:root{font-family:'DM Sans',sans-serif;color:#17221e;background:#f4f6f1;font-synthesis:none}*{box-sizing:border-box}body{margin:0;min-width:320px}.shell{min-height:100vh;display:grid;grid-template-columns:minmax(360px,1fr) minmax(320px,1fr)}.visual{position:relative;overflow:hidden;background:#173d35;color:#f5f5ed;padding:42px clamp(30px,6vw,120px);display:flex;flex-direction:column;justify-content:space-between}.visual:before{content:'';position:absolute;width:560px;height:560px;right:-170px;top:15%;border:1px solid rgba(221,233,207,.2);border-radius:50%;box-shadow:0 0 0 70px rgba(221,233,207,.045),0 0 0 140px rgba(221,233,207,.035)}.visual:after{content:'';position:absolute;width:310px;height:310px;right:35px;top:32%;background:#b9d969;border-radius:50%;opacity:.9}.brand{position:relative;z-index:1;display:flex;gap:11px;align-items:center;font-size:13px;font-weight:700;letter-spacing:.17em}.brand-mark,.mobile-brand .brand-mark{display:grid;place-items:center;width:28px;height:28px;border-radius:9px;background:#b9d969;color:#173d35;font-size:18px;letter-spacing:0}.visual-copy{position:relative;z-index:1;max-width:430px;margin-top:auto;margin-bottom:auto}.eyebrow{color:#a8bdac;text-transform:uppercase;font-size:11px;font-weight:700;letter-spacing:.16em;margin:0 0 22px}.visual h1{font-family:Manrope,sans-serif;font-size:clamp(38px,4.6vw,88px);line-height:1.02;letter-spacing:-.06em;margin:0 0 28px}.visual h1 em{color:#b9d969;font-style:normal}.intro{max-width:320px;color:#c3d1c4;font-size:16px;line-height:1.65;margin:0}.visual-footer{position:relative;z-index:1;display:flex;justify-content:space-between;color:#9cb2a2;font-size:11px}.status{display:flex;align-items:center;gap:7px}.status i{width:7px;height:7px;border-radius:50%;background:#b9d969}.panel{display:grid;place-items:center;background:#f8f9f6;padding:36px 7vw;overflow-y:auto;max-height:100vh}.form-wrap{width:min(100%,430px);min-width:0;max-width:100%}.heading h2{font-family:Manrope,sans-serif;font-size:36px;letter-spacing:-.045em;margin:0 0 12px;color:#17221e}.heading p:last-child{color:#6b776f;font-size:14px;margin:0 0 35px}.panel .eyebrow{color:#708377;margin-bottom:13px}.field{margin-bottom:21px}.field label,.label-row{color:#304039;font-size:12px;font-weight:700}.field label{display:block;margin-bottom:9px}.label-row{display:flex;justify-content:space-between;margin-bottom:9px}.field input{width:100%;border:1px solid #d8dfd8;border-radius:9px;background:white;padding:15px 16px;font:inherit;font-size:14px;outline:none;transition:.2s}.field input:focus{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}.password-input{position:relative}.password-input input{padding-right:48px}.eye{position:absolute;right:13px;top:12px;border:0;background:transparent;color:#86948b;cursor:pointer;font-size:16px}.primary{width:100%;border:0;border-radius:9px;background:#173d35;color:white;padding:15px;font:700 14px 'DM Sans';cursor:pointer;display:flex;justify-content:center;gap:12px;transition:.2s}.primary:disabled{opacity:.6;cursor:wait;transform:none}.primary:hover{background:#24564b;transform:translateY(-1px)}.primary span{color:#b9d969;font-size:18px;line-height:12px}.divider{display:flex;align-items:center;gap:13px;color:#9aa59d;font-size:12px;margin:26px 0}.divider:before,.divider:after{content:'';height:1px;background:#e1e5e0;flex:1}.provider{width:100%;border:1px solid #d8dfd8;border-radius:9px;background:white;color:#304039;padding:14px;font:600 13px 'DM Sans';cursor:pointer}.provider-icon{font-size:20px;vertical-align:-2px;margin-right:8px}.switch{text-align:center;color:#6b776f;font-size:13px;margin:25px 0}.text-button{border:0;background:none;color:#275e50;text-decoration:underline;text-underline-offset:3px;padding:0;font:600 12px 'DM Sans';cursor:pointer}.label-row .text-button{font-size:11px}.legal{text-align:center;color:#a0aaa3;font-size:11px;margin:40px 0 0}
.coming-soon{margin:14px 0 0;padding:12px 14px;border:1px solid #ecd9a8;background:#fdf6e3;border-radius:12px;font-size:13px;line-height:1.55;color:#6b5317;overflow-wrap:anywhere}
.coming-soon strong{color:#8a6a1c}.legal a{color:#6f7e74}.notice{display:none;padding:12px 14px;border-radius:8px;font-size:13px;margin:-16px 0 20px}.notice.show{display:block}.notice.success{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;font-weight:500}.notice.error{background:#fef2f2;color:#991b1b;border:1px solid #fecaca;font-weight:500}.notice.info{background:#ecfdf5;color:#065f46;border:1px solid #a7f3d0;font-weight:500}.hidden,[hidden]{display:none !important}.modal-backdrop:not(.hidden):not([hidden]){display:flex}.modal-open{overflow:hidden}html,body{min-height:100%;width:100%;max-width:100%;overflow-x:hidden}.shell.dashboard-mode,.is-dashboard .shell{display:block;width:100%;max-width:100%;min-width:0;min-height:100vh;overflow-x:hidden}.dashboard-shell{display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;min-height:100vh;margin:0;padding:0;background:#f8f9f6;color:#17221e;position:relative;left:0;grid-column:1 / -1;box-sizing:border-box;overflow-x:clip}.dashboard-shell .dashboard-nav{width:100%;max-width:100%;box-sizing:border-box;flex:0 0 auto}.dashboard-shell .dashboard-content{width:100%;max-width:100%;box-sizing:border-box;flex:1 1 auto;min-width:0}.dashboard-nav{height:82px;padding:0 clamp(24px,3.5vw,56px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e1e7df;background:#173d35;color:#f5f5ed;max-width:100%;box-sizing:border-box;position:relative;z-index:40}.dashboard-nav.has-profile-open,.dashboard-nav:has(#profile-dropdown:not(.hidden)){z-index:20000 !important}.signout{border:1px solid rgba(245,245,237,.35);border-radius:8px;background:transparent;color:#f5f5ed;padding:10px 16px;font:600 12px 'DM Sans';cursor:pointer}.dashboard-content{max-width:100%;margin:0;padding:clamp(40px,7vh,80px) clamp(24px,3.5vw,56px);box-sizing:border-box}.dashboard-content.section-page{max-width:100%;width:100%;box-sizing:border-box;min-width:0;padding:14px clamp(18px,3vw,44px) 34px;position:relative;z-index:20;overflow:visible;overflow-x:clip}.dashboard-content.section-page #section-view{width:100%;max-width:100%;min-width:0;box-sizing:border-box}.dashboard-content .eyebrow{color:#708377;margin-bottom:16px}.dashboard-content h1{font-family:Manrope,sans-serif;font-size:clamp(42px,7vw,76px);line-height:1;letter-spacing:-.06em;margin:0 0 22px}.dashboard-lede{max-width:510px;color:#6b776f;font-size:17px;line-height:1.65;margin:0 0 46px}.dashboard-card{display:flex;align-items:center;gap:18px;max-width:560px;padding:24px;border:1px solid #dce4da;border-radius:14px;background:white;box-shadow:0 12px 30px rgba(23,61,53,.06)}.card-icon{display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;border-radius:12px;background:#b9d969;color:#173d35;font-size:22px}.dashboard-card strong{font-size:15px}.dashboard-card p{color:#718078;font-size:13px;margin:6px 0 0}.mobile-brand{display:none}.text-button:focus-visible,.primary:focus-visible,.provider:focus-visible,.eye:focus-visible,.field input:focus-visible{outline:3px solid rgba(185,217,105,.7);outline-offset:3px}.section-launcher{width:min(100%,560px);display:flex;align-items:center;gap:16px;text-align:left;border:1px solid #dce4da;border-radius:14px;background:#fff;padding:18px 20px;margin-top:18px;color:#17221e;cursor:pointer;box-shadow:0 12px 30px rgba(23,61,53,.05);transition:.2s}.section-launcher:hover{transform:translateY(-2px);border-color:#b9d969;box-shadow:0 15px 32px rgba(23,61,53,.1)}.section-launcher strong,.section-launcher small{display:block}.section-launcher small{color:#718078;font-size:12px;margin-top:5px}.section-launcher b{margin-left:auto;color:#275e50;font-size:21px}.launcher-icon{display:grid;place-items:center;width:40px;height:40px;border-radius:11px;background:#e7f2df;color:#275e50;font-size:20px}.compact{width:auto;padding:12px 18px}.back-link{border:0;background:none;color:#275e50;font:600 13px 'DM Sans';padding:0;margin:0 0 20px;cursor:pointer}
/* ---- Boot splash: hides the login flash while the session check resolves ---- */
html.auth-pending .shell{visibility:hidden}
html.auth-pending body::before{content:'';position:fixed;inset:0;z-index:200000;background:#173d35}
html.auth-pending body::after{content:'\2726';position:fixed;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;z-index:200001;border-radius:15px;background:#b9d969;color:#173d35;font-size:30px;display:grid;place-items:center;animation:bootPulse 1.15s ease-in-out infinite}
@keyframes bootPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.72;transform:scale(.93)}}
@media(prefers-reduced-motion:reduce){html.auth-pending body::after{animation:none}}
.nav-left{display:flex;align-items:center}.task-management{width:100%;max-width:100%;min-width:0;box-sizing:border-box;padding-top:0}.loading-state{grid-column:1/-1;color:#718078;padding:36px 0;text-align:center;border:1px dashed #cfdacf;border-radius:12px;background:#f4f7f2}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px}.task-management .primary.compact{flex:0 0 auto}.section-heading h2{font-family:Manrope,sans-serif;font-size:20px;letter-spacing:-.02em;margin:0 0 1px}.section-lede{color:#7c8a81;margin:0;font-size:12px}.toast-stack{position:fixed;top:92px;left:50%;transform:translateX(-50%);z-index:100200 !important;display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;width:max-content;max-width:min(92vw,560px)}@media(max-width:760px){.toast-stack{top:66px}}@media(max-height:550px){.toast-stack{top:52px}}.toast{pointer-events:auto;display:inline-flex;align-items:center;gap:9px;max-width:100%;padding:10px 16px 10px 12px;border-radius:11px;background:#173d35;color:#eef4ec;font:600 12.5px 'DM Sans',sans-serif;box-shadow:0 10px 30px rgba(10,30,25,.28),0 0 0 1px rgba(255,255,255,.06) inset;opacity:0;transform:translateY(-8px) scale(.97);transition:opacity .24s ease,transform .24s cubic-bezier(.34,1.4,.64,1);cursor:default}.toast.in{opacity:1;transform:translateY(0) scale(1)}.toast.leaving{opacity:0;transform:translateY(-6px) scale(.97)}.toast-ico{flex:0 0 auto;width:17px;height:17px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;line-height:1}.toast.success{background:#1f4a35}.toast.success .toast-ico{background:#7ddc8f;color:#123324}.toast.error{background:#4a2620;color:#f8e5e2}.toast.error .toast-ico{background:#e58878;color:#43140c}.toast.info{background:#23445d;color:#e2ecf5}.toast-text{overflow-wrap:anywhere;white-space:pre-line}@media(prefers-reduced-motion:reduce){.toast,.toast.in,.toast.leaving{transition:opacity .2s ease;transform:none}}.board-tabs{display:flex;gap:8px;overflow-x:auto;padding-bottom:7px;margin-bottom:10px;border-bottom:1px solid #e5eae1}.board-tab{border:1px solid #d8dfd8;border-radius:999px;background:#fff;color:#506158;padding:6px 13px;font:600 11.5px 'DM Sans';white-space:nowrap;cursor:pointer;display:inline-flex;align-items:center;gap:7px}.board-tab.today{border-color:#e8c96a;background:linear-gradient(135deg,#fff9e3,#fdf3d0);color:#8a6a12}.board-tab.today .icon{width:14px;height:14px}.board-tab.active{background:#173d35;color:#fff;border-color:#173d35}.board-tab.active.today{background:linear-gradient(135deg,#8a6a12,#6b4e08);border-color:#6b4e08;color:#ffe9a8}.empty-state{color:#718078;font-size:13px;padding:12px 0}.kanban{display:grid;grid-template-columns:repeat(var(--col-count, 5), minmax(170px, 1fr));gap:12px;width:100%;max-width:100%;box-sizing:border-box;overflow-x:auto;overflow-y:hidden;padding-bottom:12px;align-items:stretch;scrollbar-width:thin}.kanban-column{min-width:0;max-width:100%;box-sizing:border-box;height:clamp(430px,calc(100vh - 252px),900px);border:1px solid #e2e9e0;border-radius:14px;background:linear-gradient(180deg,#f1f4ef,#ebf0ea);padding:11px;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(23,61,53,.04)}.column-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;gap:8px}.column-title{min-width:0}.column-header h3{font-size:12.5px;margin:0 0 2px}.status-name{cursor:text;border-bottom:2px dashed transparent;display:inline-block;transition:.15s}.status-name:hover{border-bottom-color:#b9d969;color:#0f2c25}.status-name.locked{cursor:default;border-bottom:none}.status-name.locked:hover{border-bottom-color:transparent;color:inherit}.column-count{display:block;font-size:10px;color:#809087}.add-task{border:0;background:#fff;color:#275e50;border-radius:7px;width:26px;height:26px;font-size:18px;line-height:18px;cursor:pointer}.inline-task-form{background:#fff;border:1px solid #cbd9c9;border-radius:9px;padding:10px;margin-bottom:10px;box-shadow:0 4px 12px rgba(23,61,53,.05)}.inline-task-form input,.inline-task-form textarea{display:block;width:100%;border:1px solid #d8dfd8;border-radius:7px;background:#f8f9f6;color:#17221e;padding:9px 10px;font:inherit;font-size:12px;outline:none;margin-bottom:8px;resize:vertical}.inline-task-form input:focus,.inline-task-form textarea:focus{border-color:#5b806e;box-shadow:0 0 0 2px rgba(91,128,110,.13)}.inline-task-actions{display:flex;justify-content:flex-end;gap:6px}.inline-task-actions .secondary,.inline-task-actions .primary{padding:8px 10px;font-size:11px}.task-list{display:flex;flex-direction:column;gap:8px;/* v82: +6px top headroom so the v81 hover lift never clips */min-height:110px;overflow-y:auto;overflow-x:hidden;flex:1 1 auto;padding:6px 2px 12px 0;scrollbar-width:thin}.task-list::-webkit-scrollbar{width:7px}.task-list::-webkit-scrollbar-thumb{background:#d3ddd2;border-radius:6px}.task-list::-webkit-scrollbar-track{background:transparent}.task-card{position:relative;background:#fff;border:1px solid #e0e7df;border-radius:11px;padding:11px 12px;box-shadow:0 2px 8px rgba(23,61,53,.04);cursor:grab;transition:border-color .15s ease,box-shadow .15s ease;box-sizing:border-box;flex-shrink:0;min-height:fit-content}.task-card:hover{border-color:#cbd7c9;box-shadow:0 6px 16px rgba(23,61,53,.08)}.task-card:active{cursor:grabbing}.task-card strong{font-size:13px;line-height:1.35}.task-card p{font-size:11.5px;color:#718078;line-height:1.45;margin:7px 0 0}.task-subject,.task-description{cursor:text}.task-subject:hover{color:#173d35;text-decoration:underline;text-decoration-color:#b9d969;text-decoration-thickness:2px;text-underline-offset:3px}.task-description:hover{color:#506158}.task-description.placeholder{color:#a3b0a8;font-style:italic}.task-description a{color:#275e50;font-weight:600;text-decoration:underline;text-underline-offset:2px;word-break:break-all}.task-description a:hover{color:#173d35;background:#e7f2df;border-radius:3px}.card-edit-input,.card-edit-textarea{width:100%;border:1px solid #5b806e;border-radius:7px;background:#f8f9f6;color:#17221e;font:inherit;font-size:12px;line-height:1.45;padding:8px 9px;outline:none;margin:3px 0 3px;box-shadow:0 0 0 3px rgba(91,128,110,.13);resize:vertical}.card-edit-input{margin-bottom:0;font-weight:700}.task-card.is-editing{border-color:#5b806e;box-shadow:0 8px 20px rgba(23,61,53,.1);cursor:default}.column-empty{color:#91a097;font-size:11px;text-align:center;padding:26px 8px;border:1px dashed #cfdacf;border-radius:8px;margin:auto 0 8px}.modal-backdrop{position:fixed;inset:0;z-index:100100 !important;display:none;align-items:center;justify-content:center;padding:20px;background:rgba(23,61,53,.42)}.modal-backdrop.is-open{display:flex !important}
.modal-backdrop.confirm-layer{z-index:100150 !important}
.modal-backdrop.confirm-layer .modal-card{box-shadow:0 30px 90px rgba(0,0,0,.4)}.modal-card{position:relative;width:min(100%,440px);border-radius:16px;background:#fff;padding:30px;box-shadow:0 24px 70px rgba(0,0,0,.2)}.modal-card h3{font-family:Manrope,sans-serif;font-size:28px;letter-spacing:-.04em;margin:0 0 24px}.modal-card label{display:block;color:#304039;font-size:12px;font-weight:700;margin:0 0 9px}.modal-card label span{font-weight:400;color:#8a968e}.modal-card input,.modal-card textarea{width:100%;border:1px solid #d8dfd8;border-radius:9px;background:#fff;padding:13px 14px;font:inherit;font-size:14px;outline:none;margin-bottom:18px;resize:vertical}.modal-card input:focus,.modal-card textarea:focus{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}.modal-close{position:absolute;right:17px;top:13px;border:0;background:none;color:#718078;font-size:25px;cursor:pointer}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}.secondary{border:1px solid #d8dfd8;border-radius:8px;background:#fff;color:#506158;padding:11px 17px;font:600 12px 'DM Sans';cursor:pointer}@media(max-width:760px){.section-heading{align-items:flex-start;flex-direction:column}.task-management .primary.compact{width:auto}.shell{grid-template-columns:1fr}.visual{min-height:280px;padding:34px 28px 30px}.visual:before,.visual:after,.visual-copy .intro,.visual-footer{display:none}.visual-copy{display:block;margin-top:34px}.visual h1{font-size:clamp(30px,8vw,44px);margin:0}.visual .eyebrow{margin:0 0 12px}.panel{min-height:calc(100vh - 280px);padding:42px 28px;display:block}.form-wrap{margin:auto}.mobile-brand{display:flex;align-items:center;gap:9px;color:#173d35;font-weight:700;letter-spacing:.13em;font-size:12px;margin-bottom:42px}.mobile-brand .brand-mark{width:24px;height:24px;font-size:15px}.heading h2{font-size:31px}.heading p:last-child{margin-bottom:29px}.legal{margin-top:32px}}

/* ---- Subtasks (base & minimized card view) ---- */
.subtask-list{margin:2px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:1px}
.subtask-list:empty{display:none}
.subtask{display:flex;align-items:center;gap:5px;font-size:11px;line-height:1.25;padding:1px 4px;border-radius:4px;position:relative;transition:background .14s ease}
.subtask:hover{background:rgba(23,61,53,.04)}
.subtask-drag-handle{display:inline-flex;align-items:center;justify-content:center;width:12px;height:12px;color:#9fb0a5;cursor:grab;flex:0 0 auto;opacity:.35;border-radius:3px;transition:opacity .14s ease,color .14s ease;user-select:none;-webkit-user-select:none}
.subtask-drag-handle .icon{width:11px;height:11px;pointer-events:none}
.subtask:hover .subtask-drag-handle,.subtask:focus-within .subtask-drag-handle{opacity:.85}
.subtask-drag-handle:hover{opacity:1;color:#173d35}
.subtask-drag-handle:active{cursor:grabbing}
.subtask[draggable="true"]{cursor:grab}
.subtask.subtask-dragging{opacity:.4;background:rgba(185,217,105,.2)!important;cursor:grabbing}
.subtask.drag-above{box-shadow:0 -2px 0 0 #7fb069}
.subtask.drag-below{box-shadow:0 2px 0 0 #7fb069}
.subtask input[type="checkbox"]{margin:0;accent-color:#275e50;cursor:pointer;flex:0 0 auto;width:12px;height:12px}
.subtask-title{flex:1 1 auto;min-width:0;cursor:text;overflow-wrap:anywhere;padding:0}
.subtask-title:hover{color:#173d35}
.subtask.done .subtask-title{text-decoration:line-through;color:#a3b0a8}
.subtask-delete{border:0;background:none;color:#8a968e;cursor:pointer;width:18px;height:18px;padding:0;border-radius:4px;flex:0 0 auto;margin-left:auto;display:inline-flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .14s ease,background .14s ease,color .14s ease}
.subtask-delete .icon{width:11px;height:11px;stroke-width:1.8;display:block;pointer-events:none}
.subtask:hover .subtask-delete,.subtask:focus-within .subtask-delete{opacity:1;pointer-events:auto}
.subtask-delete:hover{color:#c1352b;background:#fee2e2}
.subtask-edit-input{flex:1 1 auto;min-width:0;border:1px solid #5b806e;border-radius:5px;background:#f8f9f6;color:#17221e;font:inherit;font-size:11px;line-height:1.25;padding:1px 5px;outline:none;box-shadow:0 0 0 2px rgba(91,128,110,.13)}
/* ---- Board header: name, metrics, progress ---- */
.board-header{margin:10px 0 14px;padding:18px 22px 16px;border:1px solid rgba(23,61,53,.10);border-radius:16px;background:linear-gradient(135deg,#f4f8ee 0%,#eaf3e0 38%,#dcebd2 72%,#cfe6c0 100%);box-shadow:0 6px 22px -12px rgba(23,61,53,.14),inset 0 1px 0 rgba(255,255,255,.85);max-width:100%;box-sizing:border-box;overflow-x:clip}
.board-head-row{display:flex;align-items:flex-start;gap:14px;flex-wrap:nowrap}
.board-eyebrow{display:flex;align-items:center;gap:5px;color:#708377;text-transform:uppercase;font-size:9.5px;font-weight:700;letter-spacing:.14em;margin:0 0 3px}
.board-eyebrow .icon{width:13px;height:13px;color:#c99b17}
.board-name{font-family:Manrope,sans-serif;font-size:20px;letter-spacing:-.02em;margin:0;cursor:text;border-bottom:2px dashed transparent;display:inline-block;transition:border-color .15s ease,color .15s ease;line-height:1.2}
.board-name:hover{border-bottom-color:#b9d969;color:#0f2c25}
.board-name-input{font-family:Manrope,sans-serif;font-size:17px;font-weight:700;letter-spacing:-.02em;border:1px solid #5b806e;border-radius:8px;background:#fff;color:#17221e;padding:4px 10px;outline:none;box-shadow:0 0 0 3px rgba(91,128,110,.14);min-width:220px}
.board-id-block{min-width:135px;flex:0 0 auto;display:flex;flex-direction:column;justify-content:flex-start}
.board-tools{display:inline-flex;align-items:center;gap:5px;margin-left:auto;flex:0 0 auto;height:24px;flex-wrap:nowrap}
.board-tools .icon-btn{width:24px;height:24px;border:1px solid #d8dfd8;border-radius:6px;background:#fff;color:#526358;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:transform .15s ease,border-color .15s ease,background .15s ease,color .15s ease,box-shadow .15s ease;box-shadow:0 1px 2px rgba(23,61,53,.04)}
.board-tools .icon-btn .icon{width:12px;height:12px}
.board-tools .icon-btn:hover{color:#275e50;border-color:#b9d969;background:#f6faf1;transform:translateY(-1px);box-shadow:0 2px 6px rgba(23,61,53,.1)}
.board-tools .icon-btn.danger:hover{color:#8b3c31;border-color:#e5b9b1;background:#fdf1ef}
.board-tools .icon-btn.on{background:#173d35;border-color:#173d35;color:#b9d969}
.icon-btn{width:30px;height:30px;border:1px solid #e0e7de;border-radius:8px;background:#fff;color:#5c6b62;display:grid;place-items:center;cursor:pointer;transition:.15s ease}
.icon-btn .icon{width:14px;height:14px}
.icon-btn:hover{color:#275e50;border-color:#b9d969;background:#f6faf1;transform:translateY(-1px)}
.icon-btn.danger:hover{color:#8b3c31;border-color:#e5b9b1;background:#fdf1ef}
.icon-btn.on{background:#173d35;border-color:#173d35;color:#b9d969}
.pill-toggle{display:inline-flex;align-items:center;gap:6px;border:1px solid #d8dfd8;border-radius:999px;background:#fff;color:#506158;padding:6px 12px;font:600 11px 'DM Sans';cursor:pointer;transition:.15s ease}
.pill-toggle .icon{width:13px;height:13px}
.pill-toggle:hover{border-color:#b9d969;color:#275e50}
.pill-toggle.on{background:#e7f2df;border-color:#b9d969;color:#275e50}
.board-metrics{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 0}
.metric{flex:0 1 auto;background:#fff;border:1px solid #e3eae1;border-radius:999px;padding:5px 11px;display:flex;align-items:center;gap:7px;transition:border-color .15s ease}
.metric:hover{border-color:#c9d6c7}
.metric b{font-size:14px;color:#173d35;letter-spacing:-.01em;line-height:1}
.metric span{font-size:9.5px;color:#809087;text-transform:uppercase;letter-spacing:.06em;font-weight:700}
.metric.accent{background:linear-gradient(135deg,#275e50,#173d35);border-color:#173d35}
.metric.accent b{color:#b9d969}
.metric.accent span{color:#cfe0d6}
.metric.good{background:linear-gradient(135deg,#f2f9ec,#e7f2df);border-color:#c3dcc0}
.metric.good b{color:#376238}
.metric.good span{color:#6d8a67}
.metric.good .metric-icon{color:#4d8a3d}
button.metric{font:inherit;color:inherit;outline:none;border-width:1px;border-style:solid;text-align:left;line-height:inherit;margin:0}
.metric[data-toggle-allgood-filter]{cursor:pointer;user-select:none;transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease}
.metric[data-toggle-allgood-filter]:hover{border-color:#a8ce9f;transform:translateY(-1px);box-shadow:0 2px 6px rgba(23,61,53,.07)}
.metric[data-toggle-allgood-filter]:active{transform:translateY(0)}
.metric.good.active,
.metric.good.is-active{background:linear-gradient(135deg,#275e50,#173d35) !important;border-color:#173d35 !important;box-shadow:0 0 0 2px rgba(185,217,105,.4),0 2px 8px rgba(23,61,53,.15) !important;transform:translateY(-1px)}
.metric.good.active b,
.metric.good.is-active b{color:#b9d969 !important}
.metric.good.active span,
.metric.good.is-active span{color:#cfe0d6 !important}
.metric.good.active .metric-icon,
.metric.good.is-active .metric-icon{color:#b9d969 !important}
.metric-icon{width:14px;height:14px;flex:0 0 auto;color:#809087}
.metric.accent .metric-icon{color:#b9d969}
.board-progress-inline{display:flex;align-items:center;gap:9px;width:100%;max-width:100%;flex:1 1 100%;margin:0;box-sizing:border-box}
.board-progress-row{display:none}
.board-progress{flex:1 1 auto;height:6px;border-radius:999px;background:#e4ebe1;overflow:hidden;box-shadow:inset 0 1px 2px rgba(23,61,53,.07)}
.board-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#6da85b 0%,#98c952 50%,#b9d969 100%);box-shadow:0 0 6px rgba(185,217,105,.45);transition:width .6s cubic-bezier(.22,1,.36,1)}
.progress-pct{font:700 11px 'DM Sans',sans-serif;color:#275e50;min-width:32px;font-variant-numeric:tabular-nums;flex:0 0 auto}
.board-badge{font:700 10.5px 'DM Sans',sans-serif;color:#173d35;background:linear-gradient(90deg,#ffe9a8,#b9d969);border:1px solid #d9c56a;border-radius:999px;padding:3px 9px;letter-spacing:.02em;line-height:1;animation:pop .45s cubic-bezier(.22,1.4,.36,1);flex:0 0 auto}
@keyframes pop{from{transform:scale(.6);opacity:0}to{transform:scale(1);opacity:1}}

/* ---- Subtask footer counter + flow composer ---- */
.subtask-footer{display:flex;align-items:center;gap:7px;margin:5px 0 2px}
.subtask-add{width:22px;height:22px;border-radius:6px;flex:0 0 auto}
.subtask-add .icon{width:13px;height:13px}
.subtask-add:hover{border-color:#b9d969;background:#f3f8ee;color:#275e50}
.subtask-collapse{border:0;background:none;color:#809087;width:20px;height:20px;display:grid;place-items:center;cursor:pointer;border-radius:5px;padding:0}
.subtask-collapse:hover{color:#275e50;background:#f1f5ee}
.subtask-collapse .icon{width:13px;height:13px;transition:transform .18s ease}
.subtask-collapse .icon.right{transform:rotate(-90deg)}
.subtask-count{font:700 10.5px 'DM Sans';color:#809087;letter-spacing:.05em;text-transform:uppercase;flex:0 0 auto}
.subtask-progress{flex:1 1 auto;height:4px;border-radius:999px;background:#edf1ea;overflow:hidden}
.subtask-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7fb069,#b9d969);transition:width .35s ease}
.subtask-pct{font:700 10.5px 'DM Sans',sans-serif;color:#6e7f76;letter-spacing:.01em;font-variant-numeric:tabular-nums;flex:0 0 auto;min-width:27px;text-align:right;line-height:1}
.subtask-pct.done{color:#275e50}
.subtask-composer{margin-top:5px;display:flex;flex-direction:column;gap:5px;animation:composerIn .18s ease}
@keyframes composerIn{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.subtask-composer input{width:100%;border:1px solid #5b806e;border-radius:7px;background:#f8f9f6;color:#17221e;padding:7px 9px;font:inherit;font-size:12px;outline:none;box-shadow:0 0 0 3px rgba(91,128,110,.13)}
.composer-hint{font-size:9.5px;color:#91a097}

/* ---- Completed task card ---- */
.task-card.completed{background:linear-gradient(135deg,#fbfdf9,#f2f7ee);border-color:#cfe0c7}
.task-card.completed .task-subject{color:#718078;text-decoration:line-through;text-decoration-color:#b0bfb4;text-decoration-thickness:1.5px}

/* ---- Priority gradients ---- */
.task-card.prio-critical{background:linear-gradient(135deg,#fff1ee 0%,#ffe3dd 60%,#fff6f4 100%);border-color:#f3c4ba}
.task-card.prio-high{background:linear-gradient(135deg,#fff6ea 0%,#ffeccc 60%,#fffbf2 100%);border-color:#ecd3a8}
.task-card.prio-medium{background:linear-gradient(135deg,#fffbe8 0%,#fdf3c0 60%,#fffdf3 100%);border-color:#e3d389}
.task-card.prio-low{background:linear-gradient(135deg,#eef4fd 0%,#dde9fa 60%,#f5f9ff 100%);border-color:#c3d4f0}
.task-card.prio-critical .task-subject{color:#8a2f1d}
.task-card.prio-high .task-subject{color:#8a5a10}
.task-card.prio-medium .task-subject{color:#7c6411}
.task-card.prio-low .task-subject{color:#2c5591}
.prio-critical.prio-pill,.prio-high.prio-pill,.prio-medium.prio-pill,.prio-low.prio-pill{color:#fff}
.priority-select{border:1px solid #d8dfd8;border-radius:7px;background:#fff;color:#5c6b62;font:600 11px 'DM Sans';padding:4px 6px;outline:none;cursor:pointer;max-width:130px}
.priority-select:focus{border-color:#5b806e;box-shadow:0 0 0 2px rgba(91,128,110,.13)}
.priority-select.prio-critical{background:#b3402f;border-color:#b3402f;color:#fff}
.priority-select.prio-high{background:#c97a1c;border-color:#c97a1c;color:#fff}
.priority-select.prio-medium{background:#c9a72c;border-color:#c9a72c;color:#fff}
.priority-select.prio-low{background:#4a7ab5;border-color:#4a7ab5;color:#fff}
.due-input{border:1px solid #d8dfd8;border-radius:7px;background:#fff;color:#5c6b62;font:600 11px 'DM Sans';padding:4px 2px 4px 6px;outline:none;cursor:pointer;max-width:116px}.due-input::-webkit-calendar-picker-indicator{margin-left:0;margin-right:0;padding:0}.due-input::-webkit-datetime-edit{padding:0;flex:0 0 auto;width:auto}.due-input::-webkit-datetime-edit-fields-wrapper{padding:0;margin:0}
.due-input:focus{border-color:#5b806e;box-shadow:0 0 0 2px rgba(91,128,110,.13)}
.card-meta{display:flex;align-items:center;gap:6px 10px;margin:7px 0 0;flex-wrap:wrap}
.card-prio-matrix{display:inline-flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:100%;min-width:0}
.card-prio-matrix .priority-select{flex:0 1 auto;max-width:110px;min-width:0;padding:4px 6px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.card-prio-matrix .matrix-dd{flex:0 1 auto;max-width:100%;min-width:0;position:relative}
.card-prio-matrix .matrix-trigger{display:inline-flex;align-items:center;gap:4px;max-width:100%;min-width:0;box-sizing:border-box;padding:4px 7px}
.card-prio-matrix .matrix-trigger .matrix-label{max-width:135px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
.card-prio-matrix .matrix-trigger .icon{flex:0 0 12px;width:12px;height:12px}
.card-prio-matrix .mx-flag{font-size:10px;padding:1px 6px;max-width:70px;overflow:hidden;text-overflow:ellipsis}

/* ---- Card actions ---- */
.card-sub-meter{display:flex;align-items:center;gap:6px;flex:1 1 70px;min-width:70px;min-height:22px}
.card-sub-meter .subtask-count{flex:0 0 auto}
.card-sub-meter .subtask-progress{height:4px;min-width:32px}
.card-sub-meter .subtask-progress i{background:#b9d969;transition:width .25s ease}
.card-sub-meter.done .subtask-count{color:#5a7d33}
.card-sub-meter.done .subtask-progress i{background:#7fb069}
.card-sub-meter.done .subtask-pct{color:#5a7d33}
.card-actions{display:flex;align-items:center;justify-content:space-between;gap:6px 8px;margin:8px 0 0;padding-top:7px;border-top:1px dashed #e7ede4;flex-wrap:wrap}
.card-action-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.card-move-nav{display:inline-flex;align-items:center;gap:1px;flex:0 0 auto;margin-left:auto;height:24px;padding:1.5px 3px;border:1px solid #e1e7df;border-radius:999px;background:#fbfcf9;box-shadow:0 1px 2px rgba(23,61,53,.03);opacity:.48;transition:opacity .15s ease,border-color .15s ease,box-shadow .15s ease,background .15s ease;user-select:none;-webkit-user-select:none}
.task-card:hover .card-move-nav,.task-card:focus-within .card-move-nav,.card-move-nav:hover{opacity:1;border-color:#cbd7c9;background:#fff;box-shadow:0 2px 7px rgba(23,61,53,.07)}
@media(hover:none){.card-move-nav{opacity:.85}}
.card-move-btn{width:20px;height:20px;border:0;border-radius:999px;background:transparent;color:#617268;display:inline-flex;align-items:center;justify-content:center;padding:0;cursor:pointer;transition:background .12s ease,color .12s ease,transform .12s ease}
.card-move-btn .icon{width:11px;height:11px;stroke-width:2.2;display:block;pointer-events:none}
.card-move-btn:hover{background:#e7f2df;color:#173d35;transform:scale(1.08)}
.card-move-btn:active{background:#b9d969;color:#173d35;transform:scale(.92)}
.card-move-btn:disabled{opacity:.16;cursor:default;pointer-events:none;transform:none!important}
.card-move-btn:focus-visible{outline:2px solid #5b806e;outline-offset:1px}
.chip-icon{width:24px;height:24px;border:1px solid #e0e7de;border-radius:6px;background:#fff;color:#5c6b62;display:grid;place-items:center;cursor:pointer;transition:.14s ease;padding:0}
.chip-icon .icon{width:12px;height:12px}
.chip-icon:hover{color:#275e50;border-color:#b9d969;background:#f6faf1;transform:translateY(-1px)}
.chip-icon.danger:hover{color:#8b3c31;border-color:#e5b9b1;background:#fdf1ef}
.chip-icon.today:hover{color:#c99b17;border-color:#e8d27e;background:#fff9e3}
.chip-icon.copied{color:#173d35 !important;border-color:#7fb069 !important;background:#e7f2df !important}
.allgood{position:relative;display:inline-flex;align-items:center;gap:5px;border:1px solid #e0e7de;border-radius:999px;padding:4px 10px;color:#8a968e;cursor:pointer;font:700 10px 'DM Sans';letter-spacing:.04em;transition:.15s ease}
.allgood .icon{width:12px;height:12px}
.allgood input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.allgood:hover{border-color:#b9d969;color:#275e50}
.allgood.on{background:#e7f2df;border-color:#b9d969;color:#275e50}
.allgood.big{position:relative;padding:6px 13px;font-size:11.5px}
.task-card.all-good{border:2px solid #7fb069 !important;box-shadow:0 4px 16px rgba(127,176,105,.22)}

/* ---- Colored tags & Project-Board pills ---- */
.tag-chip, button.tag-chip{display:inline-flex;align-items:center;gap:4.5px;border-radius:999px;padding:3px 9px;font:600 11px 'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;letter-spacing:.015em;line-height:1.25;border:1px solid transparent;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease,background .14s ease;outline:none;user-select:none;-webkit-user-select:none;vertical-align:middle;text-decoration:none;white-space:nowrap;box-sizing:border-box}
.tag-chip b, .tag-chip .tag-count{display:inline-flex;align-items:center;justify-content:center;min-width:15px;height:15px;padding:0 4px;border-radius:999px;font-size:9.5px;font-weight:800;line-height:1;background:rgba(0,0,0,.08);margin-left:2px}
.tag-chip:hover{transform:translateY(-1px);box-shadow:0 2px 7px rgba(23,61,53,.12)}
.tag-chip.active{box-shadow:0 0 0 2px #173d35;font-weight:800}
.tag-chip.mini{padding:2.5px 7.5px;font-size:10px;gap:3.5px;height:19px;line-height:1.2;box-sizing:border-box;margin:0}
.tag-chip.mini .icon{width:9.5px;height:9.5px;flex-shrink:0}

/* Origin Project - Board tag chip */
.tag-chip.origin-tag-chip{max-width:250px;font-weight:600;display:inline-flex;align-items:center;gap:4px;vertical-align:middle;cursor:pointer}
.origin-tag-chip .origin-icon{display:inline-flex;align-items:center;justify-content:center;opacity:.78;flex-shrink:0}
.origin-tag-chip .origin-icon .icon{width:11px;height:11px;stroke-width:2}
.tag-chip.mini.origin-tag-chip .origin-icon .icon{width:9.5px;height:9.5px}
.origin-tag-chip .origin-tag-name{display:inline-flex;align-items:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.origin-tag-chip .origin-proj{font-weight:700}
.origin-tag-chip .origin-sep{opacity:.45;font-weight:400;margin:0 1.5px}
.origin-tag-chip .origin-board{font-weight:600}
.origin-tag-chip .origin-tag-ext{display:inline-flex;align-items:center;justify-content:center;color:inherit;opacity:.6;text-decoration:none;margin-left:2px;width:13px;height:13px;border-radius:999px;flex-shrink:0;transition:opacity .15s ease,transform .15s ease,background .15s ease}
.origin-tag-chip .origin-tag-ext:hover{opacity:1;transform:scale(1.15);background:rgba(0,0,0,.08)}
.origin-tag-chip .origin-tag-ext .icon{width:8.5px;height:8.5px;stroke-width:2.2}
.origin-tag-chip.active{box-shadow:0 0 0 2px #173d35,0 2px 8px rgba(23,61,53,.18);font-weight:700}
.tag-chip.static{cursor:default}
.tag-chip.static:hover{transform:none;box-shadow:none}

/* Regular colored tags */
.tag-red, button.tag-red{background:#fdeae6;border-color:#f4c5bb;color:#8a2f1d}
.tag-orange, button.tag-orange{background:#fdefd8;border-color:#f0d9ab;color:#8a5a10}
.tag-yellow, button.tag-yellow{background:#fdf6d4;border-color:#e8daa1;color:#7c6411}
.tag-green, button.tag-green{background:#e7f2df;border-color:#c9e0c6;color:#2d552e}
.tag-blue, button.tag-blue{background:#e3edfa;border-color:#c3d6f2;color:#23497d}
.tag-purple, button.tag-purple{background:#efe7fa;border-color:#dac9f2;color:#523480}
.tag-pink, button.tag-pink{background:#fbe7f1;border-color:#f2c7de;color:#842c5d}
.tag-teal, button.tag-teal{background:#e0f4f2;border-color:#bee2dd;color:#185a52}

/* Project - Board pills: distinct vibrant palette */
.pb-amber, button.pb-amber{background:#fffbeb;border-color:#fde68a;color:#854d0e}
.pb-amber:hover{box-shadow:0 2px 8px rgba(217,119,6,.18)}
.pb-ruby, button.pb-ruby{background:#fff1f2;border-color:#fecdd3;color:#9f1239}
.pb-ruby:hover{box-shadow:0 2px 8px rgba(225,29,72,.18)}
.pb-emerald, button.pb-emerald{background:#ecfdf5;border-color:#a7f3d0;color:#065f46}
.pb-emerald:hover{box-shadow:0 2px 8px rgba(5,150,105,.18)}
.pb-purple, button.pb-purple{background:#faf5ff;border-color:#e9d5ff;color:#6b21a8}
.pb-purple:hover{box-shadow:0 2px 8px rgba(147,51,234,.18)}
.pb-sky, button.pb-sky{background:#f0f9ff;border-color:#bae6fd;color:#0369a1}
.pb-sky:hover{box-shadow:0 2px 8px rgba(2,132,199,.18)}
.pb-teal, button.pb-teal{background:#f0fdfa;border-color:#99f6e4;color:#115e59}
.pb-teal:hover{box-shadow:0 2px 8px rgba(13,148,136,.18)}
.pb-orange, button.pb-orange{background:#fff7ed;border-color:#fed7aa;color:#9a3412}
.pb-orange:hover{box-shadow:0 2px 8px rgba(234,88,12,.18)}
.pb-violet, button.pb-violet{background:#f5f3ff;border-color:#ddd6fe;color:#5b21b6}
.pb-violet:hover{box-shadow:0 2px 8px rgba(124,58,237,.18)}
.pb-indigo, button.pb-indigo{background:#eef2ff;border-color:#c7d2fe;color:#3730a3}
.pb-indigo:hover{box-shadow:0 2px 8px rgba(79,70,229,.18)}
.pb-fuchsia, button.pb-fuchsia{background:#fdf4ff;border-color:#f5d0fe;color:#86198f}
.pb-fuchsia:hover{box-shadow:0 2px 8px rgba(192,38,211,.18)}
.pb-cyan, button.pb-cyan{background:#ecfeff;border-color:#a5f3fc;color:#155e75}
.pb-cyan:hover{box-shadow:0 2px 8px rgba(8,145,178,.18)}
.pb-lime, button.pb-lime{background:#f7fee7;border-color:#d9f99d;color:#3f6212}
.pb-lime:hover{box-shadow:0 2px 8px rgba(101,163,13,.18)}
.pb-rose, button.pb-rose{background:#fff0f3;border-color:#ffccd5;color:#881337}
.pb-rose:hover{box-shadow:0 2px 8px rgba(190,24,93,.18)}
.pb-slate, button.pb-slate{background:#f1f5f9;border-color:#cbd5e1;color:#334155}
.pb-slate:hover{box-shadow:0 2px 8px rgba(71,85,105,.18)}
.pb-warm, button.pb-warm{background:#faf5ef;border-color:#e6d7c3;color:#634832}
.pb-warm:hover{box-shadow:0 2px 8px rgba(120,83,50,.18)}
.pb-sage, button.pb-sage{background:#f2f6f1;border-color:#c7d8c4;color:#26492d}
.pb-sage:hover{box-shadow:0 2px 8px rgba(45,80,50,.18)}

.tag-bar{display:flex;align-items:center;gap:8px;margin:0 0 12px;min-height:0;flex-wrap:wrap;max-width:100%;box-sizing:border-box}
.tag-bar-label{display:inline-flex;align-items:center;gap:5px;font:700 10.5px 'DM Sans',sans-serif;color:#708377;text-transform:uppercase;letter-spacing:.08em}
.tag-bar-label .icon{width:13px;height:13px}
.tag-bar-chips{display:flex;gap:6px;flex-wrap:wrap;flex:1 1 auto;align-items:center}
.clear-tags{border:1px solid #e2c0ba;background:#fdf2f0;color:#8b3327;border-radius:999px;padding:3.5px 10px;font:600 10.5px 'DM Sans',sans-serif;cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:all .14s ease}
.clear-tags .icon{width:11px;height:11px}
.clear-tags:hover{background:#fae4e0;border-color:#d8a79f;transform:translateY(-1px)}

/* ---- Column tools ---- */
.column-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.col-icon{position:relative;width:24px;height:24px;border:1px solid transparent;border-radius:6px;background:none;color:#809087;display:grid;place-items:center;cursor:pointer;transition:.14s ease;padding:0}
.col-icon .icon{width:13px;height:13px}
.col-icon:hover{color:#275e50;background:#fff;border-color:#d8dfd8}
.col-icon:disabled{opacity:.32;cursor:not-allowed}
.col-icon:disabled:hover{color:#809087;background:none;border-color:transparent}
.col-icon.sweep:hover{color:#8b3c31;background:#fdf1ef;border-color:#e5b9b1}
.col-icon.danger:hover{color:#8b3c31;background:#fdf1ef}
.sort-arrow{position:absolute;right:1px;bottom:0;font:700 8px 'DM Sans';font-style:normal;color:#275e50;pointer-events:none}
.hide-done{display:inline-flex;align-items:center;gap:4px;font:600 10.5px 'DM Sans';color:#708377;cursor:pointer;white-space:nowrap}
.hide-done input{accent-color:#275e50;width:13px;height:13px;cursor:pointer}

/* ---- Collapsible subtasks ---- */
.task-card .subtask-collapse:hover{background:#eef3e9}

/* ---- Drag indicators ---- */
.kanban-column.drag-left{box-shadow:-3px 0 0 0 #7fb069}
.kanban-column.drag-right{box-shadow:3px 0 0 0 #7fb069}
.kanban-column.col-dragging{opacity:.55;cursor:grabbing}
.kanban-column[draggable="true"] .column-header h3{cursor:grab}
.kanban-column[draggable="true"] .column-header h3:hover{color:#173d35}
.kanban-column[draggable="true"] .status-name:not(.locked){cursor:text}
.task-card.drag-above{box-shadow:0 -3px 0 0 #7fb069}
.task-card.drag-below{box-shadow:0 3px 0 0 #7fb069}
.task-card{transition:box-shadow .12s ease,transform .12s ease}
.task-list.drag-over{outline:2px dashed #b9d969;outline-offset:-2px}

/* ---- Card top row (checkbox + subject + linked badge) ---- */
.card-top{display:flex;align-items:flex-start;gap:9px;min-width:0}
.card-top .task-subject{flex:1 1 auto;min-width:0;overflow-wrap:anywhere;padding-top:1px}
.card-top .complete-box{margin-top:1px}
.linked-badge{position:static;flex:0 0 auto;width:18px;height:18px;border-radius:999px;background:linear-gradient(135deg,#ffe9a8,#f4c95d);border:1px solid #e0c26a;color:#7a5b0e;display:grid;place-items:center;box-shadow:none;margin:0}
.linked-badge .icon{width:11px;height:11px}
.card-chips{display:flex;flex-wrap:wrap;align-items:center;gap:4.5px;margin:4px 0 0}
.task-card.mini .card-chips{margin-top:5px}
.card-chips:empty{display:none}

/* ---- Tag editor (in-card) ---- */
.tag-editor{margin-top:9px;border:1px solid #e3eae1;border-radius:10px;background:#fbfcf9;padding:10px 11px;display:flex;flex-direction:column;gap:8px;animation:composerIn .18s ease}
.tag-editor-chips{display:flex;flex-wrap:wrap;gap:5px}
.tag-editor-chips .tag-chip button{border:0;background:none;color:inherit;cursor:pointer;font-size:13px;line-height:1;padding:3px 3px 3px 4px;margin:-1px -2px -1px 0;display:inline-flex;align-items:center;border-radius:50%}
.tag-editor-chips .tag-chip button:hover{opacity:.7}
.tag-editor-input{width:100%;border:1px solid #d8dfd8;border-radius:7px;background:#fff;color:#17221e;padding:7px 9px;font:inherit;font-size:12px;outline:none}
.tag-editor-input:focus{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}

/* ---- Tag Autocomplete & Board Suggestion Pills ---- */
.tag-suggestions{display:flex;flex-direction:column;gap:5px;margin-top:6px;padding-top:6px;border-top:1px dashed #d8e4da;animation:composerIn .14s ease}
.tag-suggestions.empty{display:none !important}
.tag-suggestions-header{display:flex;align-items:center;gap:4px}
.tag-suggestions-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:0.5px;color:#63786d}
.tag-suggestions-list{display:flex;flex-wrap:wrap;align-items:center;gap:5px}
.tag-suggestion-pill{appearance:none;-webkit-appearance:none;display:inline-flex;align-items:center;gap:3.5px;padding:2px 7.5px 2px 6.5px;border-radius:999px;font-size:11px;font-weight:600;line-height:16px;cursor:pointer;border:1px solid transparent;transition:all .12s ease;user-select:none;box-sizing:border-box}
.tag-suggestion-pill:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(23,61,53,.16);filter:brightness(.96)}
.tag-suggestion-pill:active{transform:translateY(0)}
.tag-sugg-plus{font-size:12px;font-weight:700;line-height:1;opacity:.75}
.tag-sugg-name{white-space:nowrap}

/* Floating Table View Tag Suggestions Popover */
.at-tag-suggestions-pop{position:fixed;z-index:15000;background:#ffffff;border:1px solid #d2ded5;border-radius:9px;box-shadow:0 6px 20px rgba(23,61,53,.14),0 1px 3px rgba(23,61,53,.08);padding:8px 10px;display:flex;flex-direction:column;gap:6px;min-width:140px;max-width:320px;animation:composerIn .14s ease;box-sizing:border-box}

/* ---- Mini card ---- */
.task-card.mini{padding:9px 12px}
.task-card.mini .card-tags{display:none}
.task-card.mini .card-meta{display:flex;margin-top:6px;flex-wrap:wrap;gap:5px 7px;max-width:100%;box-sizing:border-box}
.task-card.mini .card-prio-matrix{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;max-width:100%}
.task-card.mini .due-field-group{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;max-width:100%}
.task-card.mini .task-description{max-height:3.2em;overflow-y:auto}
.task-card.mini .subtask-footer,.task-card.mini .subtask-list,.task-card.mini .subtask-composer,.task-card.mini .tag-editor{display:none}
.task-card.mini .card-actions{border-top:1px solid #eef2ea;margin-top:8px;padding-top:7px;display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap;max-width:100%;box-sizing:border-box}
.task-card.mini .card-actions .card-move-nav{height:22px;padding:1px 2px;max-width:100%;box-sizing:border-box}
.task-card.mini .card-actions .card-move-btn{width:18px;height:18px}
.task-card.mini .card-actions .chip-icon{width:22px;height:22px}
.task-card.mini .card-actions .chip-icon:not(.keep){display:none}
.task-card.mini .card-actions .chip-icon[data-mini-task],.task-card.mini .card-actions .chip-icon[data-delete-task]{display:grid}

/* ---- Scroll limits: description 7 lines, subtask 3 lines ---- */
.task-description{max-height:10.15em;overflow-y:auto}
.task-description.placeholder{max-height:none;overflow:visible}
.task-description::-webkit-scrollbar,.subtask-title::-webkit-scrollbar{width:6px}
.task-description::-webkit-scrollbar-thumb,.subtask-title::-webkit-scrollbar-thumb{background:#d3ddd2;border-radius:6px}
.task-description::-webkit-scrollbar-track,.subtask-title::-webkit-scrollbar-track{background:transparent}


/* ---- Complete checkbox ---- */
.complete-box{appearance:none;-webkit-appearance:none;width:17px;height:17px;border:1.7px solid #9fb2a5;border-radius:5px;background:#fff;cursor:pointer;flex:0 0 auto;position:relative;display:inline-grid;place-items:center;transition:.15s ease;margin:1px 0 0}
.complete-box:hover{border-color:#5b806e}
.complete-box:checked{background:#275e50;border-color:#275e50}
.complete-box:checked::after{content:'';width:8.5px;height:4.7px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
.complete-box.big{width:21px;height:21px}
.complete-box.big:checked::after{width:10px;height:5.5px}

/* ---- Mark-done choice in status modal ---- */
.mark-done-choice{margin-bottom:16px}
.mark-done-choice input{width:auto;margin:3px 0 0;accent-color:#275e50}
.choice{display:flex;gap:11px;align-items:flex-start;border:1px solid #e0e7de;border-radius:11px;padding:13px 14px;margin-bottom:10px;cursor:pointer;transition:border-color .15s,background .15s}
.choice:hover{border-color:#b9d969}
.choice.selected{border-color:#275e50;background:#f6faf3;box-shadow:0 0 0 1px #275e50 inset}
.choice input{margin:3px 0 0;accent-color:#275e50;flex:0 0 auto;width:auto;display:inline-block}
.choice b{font-size:13.5px;display:block;color:#17221e}
.choice small{color:#7d8c83;font-size:12px;display:block;margin-top:3px;line-height:1.45}
.move-picker{margin:4px 0 16px}
.move-picker label{font:700 12px 'DM Sans';color:#304039;display:block;margin-bottom:7px}
.move-picker select{width:100%;border:1px solid #d8dfd8;border-radius:9px;padding:11px 12px;font:600 13px 'DM Sans';background:#fff;outline:none;cursor:pointer}
.danger-solid{background:#b3402f !important}
.danger-solid:hover{background:#9a3526 !important;transform:translateY(-1px)}
.dialog-lede{color:#5f6d64;font-size:13.5px;line-height:1.55;margin:0 0 18px}
.confirm-icon{width:52px;height:52px;border-radius:14px;background:#fdf1ef;color:#b3402f;display:grid;place-items:center;margin:0 0 14px}
.confirm-icon .icon{width:24px;height:24px}

/* ---- Expanded task modal ---- */
.task-modal-card{position:relative;width:min(860px,95vw);max-height:88vh;overflow-y:auto;border-radius:20px;background:#fff;padding:20px 26px 24px;box-shadow:0 30px 80px rgba(0,0,0,.28);animation:modalIn .22s cubic-bezier(.22,1,.36,1)}
.task-modal-card::-webkit-scrollbar{width:8px}
.task-modal-card::-webkit-scrollbar-thumb{background:#dbe3d8;border-radius:6px}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.tm-topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #f0f3ee;min-height:30px}
.tm-eyebrow{font:800 10.5px 'DM Sans';text-transform:uppercase;letter-spacing:.12em;color:#8a968e}
.task-modal-card .modal-close{position:static}
.tm-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.tm-title{font-family:Manrope,sans-serif;font-size:23px;line-height:1.25;letter-spacing:-.03em;margin:0;flex:1 1 auto;min-width:0;cursor:text;border-bottom:2px dashed transparent;transition:.15s}
.tm-title:hover{border-bottom-color:#b9d969}
.tm-timing-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 14px}
.tm-timing-strip:empty{display:none}
.tm-meta{display:flex;flex-direction:column;gap:12px;background:#f7f9f4;border:1px solid #e9efe6;border-radius:14px;padding:14px 18px;margin:0 0 16px}
.tm-meta-row{display:grid;grid-template-columns:1fr 1.35fr;gap:14px 20px;align-items:end}
.tm-meta-row-trio{display:grid;grid-template-columns:repeat(3,1fr);gap:14px 16px;align-items:end}
@media(max-width:680px){.tm-meta-row,.tm-meta-row-trio{grid-template-columns:1fr;gap:12px}}
.tm-prio-matrix-pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:end}
.tm-field-status{min-width:0}
.tm-field-priority{min-width:0}
.tm-field-due{min-width:0}
.tm-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.tm-field>span{font:800 9.5px 'DM Sans';text-transform:uppercase;letter-spacing:.12em;color:#8a968e}
.tm-field select,.tm-field input[type=date]{width:100%;height:32px;border:1px solid #d8dfd8;border-radius:8px;padding:0 10px;font:600 12.5px 'DM Sans';background:#fff;outline:none;cursor:pointer;color:#17221e;box-sizing:border-box}
.tm-field select:focus,.tm-field input[type=date]:focus{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}
.tm-field-matrix .matrix-dd{position:static;width:100%}
.tm-field-matrix .matrix-trigger{width:100%;max-width:none;height:32px;justify-content:space-between;box-sizing:border-box;border-radius:8px;border:1px solid #d8dfd8;background:#fff;padding:0 10px;font:600 12.5px 'DM Sans'}
.tm-field-matrix .matrix-trigger:hover,.tm-field-matrix .matrix-trigger:focus{border-color:#5b806e}
.tm-field-matrix .matrix-trigger .matrix-label{max-width:none;flex:1 1 auto;text-align:left}
.tm-tagline{display:flex;flex-wrap:wrap;gap:6px;align-items:center;min-height:32px}

/* ---- New-task modal: parity with the maximized task modal ---- */
/* Title input mirrors .tm-title typography (dashed underline hover, Manrope, no box) */
.tm-new-title.tm-new-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Manrope, sans-serif;
  font-size: 23px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -.03em;
  padding: 2px 4px;
  margin: 0;
  border: none;
  border-bottom: 2px dashed transparent;
  border-radius: 0;
  outline: none;
  background: transparent;
  box-shadow: none;
  color: #17221e;
  transition: border-color .15s ease;
}
.tm-new-title.tm-new-title:hover { border-bottom-color: #b9d969; }
.tm-new-title.tm-new-title:focus { border-bottom-color: #7fb069; box-shadow: none; }
.tm-new-title.tm-new-title::placeholder { color: #a3b0a8; font-weight: 600; }
/* Description field label matches the tm-field label row */
.tm-new-desc-field span {
  font: 800 9.5px 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: #8a968e;
}
.tm-new-desc-field { margin-bottom: 14px; }
.tm-new-desc-field .card-edit-textarea { margin: 0; background: #fff; }
/* Subtask composer row */
.tm-new-sub-composer { margin-top: 8px; display: flex; flex-direction: column; gap: 4px; }
.tm-new-sub-row { display: flex; gap: 8px; align-items: center; }
.tm-new-sub-row .card-edit-input { flex: 1 1 auto; height: 32px; font-size: 12px; padding: 0 10px; min-width: 0; margin: 0; box-sizing: border-box; }
.tm-new-sub-composer .composer-hint { font-size: 9.5px; color: #91a097; }
/* Draft subtask rows use the same .tm-list .subtask styles as persisted ones; ensure
   the edit input keeps its height and the title cursor matches click-to-edit. */
.tm-new-sub-composer + .tm-footer { margin-top: 10px; }
#tm-new-subs-list .subtask.is-editing { border-color: #5b806e; background: #f6f9f2; }
#tm-new-subs-list .subtask .subtask-edit-input { height: 22px; }
/* Draft due chip in the timing strip matches the task modal's chips */
.task-modal-card .tm-timing-strip { margin-bottom: 12px; }
/* Matrix dropdown inside the new modal inherits .tm-field-matrix styles (same markup). */
.tm-tagline-empty{color:#a3b0a8;font-style:italic;font-size:11.5px}
.tm-desc{max-height:240px;margin:0 0 14px}
.tm-subtask-head{display:flex;align-items:center;gap:10px;margin:4px 0 8px}
.tm-subtask-head b{font-family:Manrope,sans-serif;font-size:13.5px;letter-spacing:-.01em;color:#17221e}
.tm-sub-progress{flex:1 1 auto;height:4px;border-radius:999px;background:#edf1ea;overflow:hidden}
.tm-sub-progress i{display:block;height:100%;border-radius:999px;background:#b9d969;transition:width .25s ease}
.tm-subtask-head .subtask-pct{font:700 11.5px 'DM Sans',sans-serif;color:#5c7065;min-width:28px;text-align:right}
.tm-subtask-head .subtask-pct.done{color:#275e50}
.tm-list{display:flex;flex-direction:column;gap:5px;max-height:280px;overflow-y:auto;padding:0 4px 0 0;margin:0 0 2px;list-style:none;scrollbar-width:thin}
.tm-list::-webkit-scrollbar{width:8px}
.tm-list::-webkit-scrollbar-thumb{background:#dbe3d8;border-radius:6px}
.tm-none{color:#91a097;font-size:12px;list-style:none;padding:12px;border:1px dashed #dfe6da;border-radius:9px;text-align:center;background:#fbfcf9}
.tm-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:14px;padding-top:14px;border-top:1px solid #eef2ea;flex-wrap:wrap}
.tm-footer-note{display:inline-flex;align-items:center;gap:6px;font:600 11px 'DM Sans';color:#8a968e}
.tm-footer-note .icon{width:12px;height:12px;color:#b9a24d}
.tm-footer-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tm-footer .chip-icon{width:auto;height:32px;padding:0 13px;gap:7px;border-radius:8px;font:600 12px 'DM Sans';background:#fff;border:1px solid #dfe6dd;color:#3d4c44;display:inline-flex;align-items:center;line-height:1;white-space:nowrap;box-sizing:border-box}
.tm-footer .chip-icon.primary{background:#275e50;border-color:#275e50;color:#fff}
.tm-footer .chip-icon.primary:hover{background:#1e4a3f;border-color:#1e4a3f;color:#fff}
.tm-footer .chip-icon.primary .icon{color:#b9d969}
.tm-footer .chip-icon .icon{width:13px;height:13px}
.tm-footer .chip-icon:hover{color:#275e50;border-color:#b9d969;background:#f6faf1;transform:none}
.tm-footer .chip-icon.danger{color:#8b3c31;border-color:#e8c7c0;background:#fff}
.tm-footer .chip-icon.danger:hover{background:#fdf1ef;border-color:#e0a99e;color:#8b3c31}

/* ---- Maximize + real estate ---- */
.task-management.maximized .section-heading,.task-management.maximized .board-tabs{display:none}
.task-management.maximized .board-header{margin-top:0}
.task-management.maximized .kanban-column{height:calc(100vh - 200px);min-height:420px}
body.board-maximized .back-link{display:none !important}
body.board-maximized .dashboard-content.section-page{padding-top:12px;padding-bottom:24px}

/* ---- Wow: entrance ---- */
.kanban.board-enter .kanban-column{animation:columnIn .5s cubic-bezier(.22,1,.36,1) backwards}
.kanban.board-enter .kanban-column:nth-child(1){animation-delay:0s}.kanban.board-enter .kanban-column:nth-child(2){animation-delay:.06s}.kanban.board-enter .kanban-column:nth-child(3){animation-delay:.12s}.kanban.board-enter .kanban-column:nth-child(4){animation-delay:.18s}.kanban.board-enter .kanban-column:nth-child(5){animation-delay:.24s}
@keyframes columnIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.kanban.board-enter .kanban-column,.board-badge{animation:none}}

/* ---- Status rename input ---- */
.status-name-input{font:700 13px 'DM Sans';border:1px solid #5b806e;border-radius:6px;background:#fff;color:#17221e;padding:4px 8px;outline:none;box-shadow:0 0 0 2px rgba(91,128,110,.15);width:120px}

/* ---- Toolbar: buttons side-by-side (fix .primary block-level wrap) ---- */
.heading-actions{display:inline-flex;align-items:center;gap:10px;flex:0 0 auto;flex-wrap:nowrap}
.heading-actions .compact{white-space:nowrap;flex:0 0 auto}

/* ---- Board search ---- */
.board-search{display:inline-flex;align-items:center;gap:8px;border:1px solid #d8dfd8;border-radius:999px;background:#fff;padding:8px 14px;min-width:230px;transition:border-color .15s,box-shadow .15s}
.board-search:focus-within{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}
.board-search .icon{width:14px;height:14px;color:#809087;flex:0 0 auto}
.board-search input{border:0;outline:none;background:transparent;font:inherit;font-size:12.5px;color:#17221e;width:100%;padding:0}
.board-search input::-webkit-search-cancel-button{-webkit-appearance:none}

/* ---- Metric pill: gap between count and label (20TOTAL TASKS fix) ---- */
.metric > div{display:flex;align-items:baseline;gap:7px}
.metric > div b{line-height:1}
.metric > div span{line-height:1}

/* ===== Tabs row: board tabs + overflow button + actions ===== */
.tabs-row{display:flex;align-items:center;gap:10px;padding-bottom:7px;margin-bottom:12px;border-bottom:1px solid #e5eae1;max-width:100%;box-sizing:border-box}
.tabs-row .board-tabs{flex:1 1 auto;min-width:0;margin:0;padding:0;border:0}
.tabs-row #open-boards{flex:0 0 auto}
.tabs-actions{display:flex;align-items:center;gap:8px;flex:0 0 auto}
.tabs-actions .tabs-search-row{display:flex;align-items:center;gap:8px}
.tabs-actions .tabs-buttons-row{display:flex;align-items:center;gap:8px}
.tabs-actions .board-search{min-width:190px}
@media(max-width:1180px){.tabs-actions .board-search{min-width:150px}}

/* ===== Uniform New Status & New Board Buttons (Desktop Web & Base) ===== */
#new-status,
#new-board{height:32px;min-width:116px;width:116px;padding:0 12px;font:600 12px 'DM Sans',sans-serif;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;box-sizing:border-box;line-height:1;flex:0 0 auto;cursor:pointer;transition:transform .15s ease,background .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease}
#new-status{background:#fff;border:1px solid #d8dfd8;color:#506158}
#new-status:hover{background:#f7faf6;border-color:#5b806e;color:#173d35;transform:translateY(-1px)}
#new-board{background:#173d35;border:1px solid #173d35;color:#fff}
#new-board:hover{background:#24564b;border-color:#24564b;transform:translateY(-1px)}

/* ===== Favorite boards ===== */
.board-tab.fav{border-color:#cdb9ec;background:linear-gradient(135deg,#f7f2ff,#efe7fb);color:#6b4fa8}
.board-tab.fav .icon{width:12px;height:12px;fill:#8a5fd6;stroke:#6b4fa8;stroke-width:1.5}
.board-tab.fav:hover{border-color:#b79ae0}
.board-tab.active.fav{background:linear-gradient(135deg,#5d3fa0,#4a3180);border-color:#4a3180;color:#ece2ff}
.board-tab.active.fav .icon{fill:#f4ce4e;stroke:#f4ce4e}
.fav-star .icon{fill:transparent;transition:fill .15s,stroke .15s}
.fav-star:hover .icon{fill:#f4ce4e;stroke:#b98a10;color:#b98a10}
.fav-star.on{background:#fff7d6;border-color:#e3c86e;color:#8a6a12}
.fav-star.on .icon{fill:#f4ce4e;stroke:#b98a10}

/* ===== All-boards modal ===== */
.boards-modal-card{width:min(100%,560px)}
.boards-modal-search{width:100%;margin:0 0 14px}
.boards-list{display:flex;flex-direction:column;gap:6px;max-height:min(430px,56vh);overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.bm-group{margin:10px 0 2px;font:700 10px 'DM Sans',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#8a968e}
.bm-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid #e2e9e0;border-radius:10px;background:#fff;cursor:pointer;transition:.15s ease}
.bm-row:hover{border-color:#b9d969;box-shadow:0 3px 10px rgba(23,61,53,.06)}
.bm-row.archived{opacity:.78;background:#f6f7f3}
.bm-icon{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#eef3ec;color:#275e50;flex:0 0 auto}
.bm-icon .icon{width:15px;height:15px}
.bm-name{flex:1 1 auto;min-width:0;font:600 13px 'DM Sans',sans-serif;color:#17221e;display:flex;align-items:center;gap:8px;overflow:hidden;white-space:nowrap}
.bm-name>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bm-fav-tag,.bm-arch-tag{display:inline-flex;align-items:center;gap:4px;font:600 9.5px 'DM Sans',sans-serif;font-style:normal;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:999px;flex:0 0 auto}
.bm-fav-tag{background:#f3ecff;color:#6b4fa8}
.bm-fav-tag .icon{width:9px;height:9px;fill:#8a5fd6;stroke:#6b4fa8;stroke-width:1.5}
.bm-arch-tag{background:#eceff5;color:#5c6b7e}
.bm-actions{display:flex;gap:5px;flex:0 0 auto}
.bm-empty{color:#718078;font-size:13px;padding:22px 8px;text-align:center}

/* ===== Main-header title (task section only) ===== */
.dashboard-nav{position:relative;z-index:40}
.dashboard-nav.has-profile-open,.dashboard-nav:has(#profile-dropdown:not(.hidden)){z-index:20000 !important}
.nav-actions{display:flex;align-items:center;gap:12px}
.profile-menu{position:relative;z-index:50}
.profile-menu.is-open{z-index:20000 !important}
.profile-button{border:1px solid rgba(245,245,237,.35);border-radius:50%;background:transparent;width:38px;height:38px;display:grid;place-items:center;cursor:pointer;padding:0;transition:.2s}
.profile-button:hover{border-color:#b9d969;background:rgba(185,217,105,.12)}
.profile-avatar,.profile-avatar-lg{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;background:#b9d969;color:#173d35;font:700 15px 'DM Sans',sans-serif}
.profile-avatar-lg{width:38px;height:38px;font-size:16px}
.profile-dropdown{position:absolute;right:0;top:calc(100% + 10px);width:250px;border:1px solid #e1e7df;border-radius:13px;background:#fff;box-shadow:0 18px 44px rgba(10,30,25,.22);padding:8px;z-index:20000 !important}
.profile-dropdown-head{display:flex;align-items:center;gap:11px;padding:10px 10px 12px;border-bottom:1px solid #edf1ec;margin-bottom:6px}
.profile-dropdown-id{min-width:0}
.profile-dropdown-id strong{display:block;font-size:13.5px;color:#17221e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-dropdown-id small{display:block;color:#718078;font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.profile-dropdown-item{display:flex;align-items:center;gap:10px;width:100%;border:0;border-radius:9px;background:transparent;color:#304039;padding:10px 11px;font:600 13px 'DM Sans',sans-serif;cursor:pointer;text-align:left}
.profile-dropdown-item:hover{background:#e7f2df;color:#173d35}
.profile-dropdown-ico{font-size:15px}
.nav-title{display:none;position:absolute;left:50%;transform:translateX(-50%);text-align:center;pointer-events:none}
.in-section .nav-title{display:block}
.nav-title h2{font-family:Manrope,sans-serif;font-size:19px;letter-spacing:-.02em;margin:0;color:#f5f5ed}
.nav-title p{margin:2px 0 0;font-size:11.5px;color:#a8bdac}
@media(max-width:900px){.nav-title p{display:none}.nav-title h2{font-size:15px}}

/* ===== Maximize hides the tabs row ===== */
.task-management.maximized .tabs-row{display:none}

/* ===== Matrix (Urgent/Important) dropdown ===== */
.matrix-dd{position:relative}
.matrix-trigger{display:inline-flex;align-items:center;gap:6px;border:1px solid #d8dfd8;border-radius:7px;background:#fff;color:#5c6b62;font:600 11px 'DM Sans';padding:4px 8px;outline:none;cursor:pointer;max-width:190px;transition:border-color .15s ease,box-shadow .15s ease}
.matrix-trigger:hover{border-color:#b9d969;box-shadow:0 0 0 3px rgba(185,217,105,.15)}
.matrix-trigger .icon{width:13px;height:13px;color:#8a968e;transition:transform .18s ease}
.matrix-dd.open .matrix-trigger .icon{transform:rotate(180deg)}
.matrix-trigger .matrix-label{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:158px;display:inline-flex;align-items:center;gap:4px}
.matrix-trigger .matrix-label:empty:before{content:'Matrix Value';color:#8a968e}
.mx-flag{font-style:normal;font-weight:700;font-size:10.5px;padding:1px 7px;border-radius:999px;white-space:nowrap}
.mx-flag.urgent{background:#fdecea;color:#b3261e}
.mx-flag.important{background:#fff7db;color:#8a6a12}
.mx-join{font-style:normal;color:#a3b0a8;font-weight:700;font-size:10px}

/* ===== Board metrics row — filters inline with metric pills ===== */
.board-metrics{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:10px 0 0}
.metrics-spacer{flex:1 1 auto}
.board-metrics .board-filter-dd{position:relative;flex:0 0 auto}
.board-metrics .filter-trigger{height:29px;padding:0 11px;gap:7px}
.board-metrics .clear-filters{height:29px;width:29px;padding:0}
.board-filters{display:flex;align-items:center;justify-content:flex-end;gap:9px;margin-top:11px;padding-top:10px;border-top:1px dashed #e0e8dd;flex-wrap:wrap}
.board-filter-dd{position:relative}
.filter-trigger{display:inline-flex;align-items:center;gap:7px;border:1px solid rgba(185,217,105,.35);border-radius:8px;background:rgba(255,255,255,.92);color:#2c4438;font:600 11.5px 'DM Sans';padding:6px 10px;outline:none;cursor:pointer;transition:border-color .15s ease,box-shadow .15s ease}
.filter-trigger:hover{border-color:#b9d969;box-shadow:0 0 0 3px rgba(185,217,105,.15)}
.filter-trigger.active{border-color:#7fb069;background:linear-gradient(135deg,#eef7e6,#e7f2df);color:#173d35;box-shadow:0 0 0 3px rgba(185,217,105,.18)}
.filter-trigger .icon{width:13px;height:13px;color:#8a968e;flex:0 0 auto}
.filter-trigger .icon:last-child{transition:transform .18s ease}
.board-filter-dd.open .filter-trigger .icon:last-child,
.board-filter-dd.is-open .filter-trigger .icon:last-child{transform:rotate(180deg)}
.filter-trigger-label{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.board-filter-dd .filter-pop{display:none;position:fixed;z-index:12000;background:#fff;border:1px solid #d8dfd8;border-radius:11px;box-shadow:0 14px 34px rgba(23,61,53,.16);padding:5px;min-width:262px;animation:mxpop .14s ease}
.board-filter-dd.open .filter-pop,
.board-filter-dd.is-open .filter-pop{display:block}
.filter-pop::before{content:'';position:absolute;top:-12px;left:0;right:0;height:12px;background:transparent;pointer-events:auto}
.filter-pop::after{content:'';position:absolute;bottom:-12px;left:0;right:0;height:12px;background:transparent;pointer-events:auto}
.filter-opt{display:flex;align-items:center;gap:9px;width:100%;border:0;background:transparent;border-radius:7px;padding:8px 9px;font:600 12px 'DM Sans';color:#304039;cursor:pointer;text-align:left;transition:background .13s ease}
.filter-opt:hover{background:#f1f5ef}
.filter-opt.on{background:#f3f8f0}
.filter-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%}
.filter-dot.critical{background:#c1352b}
.filter-dot.high{background:#e0702a}
.filter-dot.medium{background:#d9a514}
.filter-dot.low{background:#4a7fb5}
.filter-dot.q-do{background:#2e7d4f}
.filter-dot.q-schedule{background:#c8960e}

/* ---- Due Date sort dropdown ---- */
.filter-dot.due-asc{background:#2e7d4f}
.filter-dot.due-desc{background:#e0702a}
.mx-flag.due{background:#eef6ea;color:#2e7d4f}
.filter-opt.due-opt{align-items:flex-start}
.filter-opt.due-opt .filter-name{min-width:86px}
.filter-opt.due-opt .due-opt-hint{font:500 10.5px 'DM Sans';color:#8a988f;margin-left:auto;padding-top:1px;text-align:right;max-width:150px}
.filter-opt.due-opt.on .due-opt-hint{color:#4a6b58}
.filter-opt.due-opt .due-check{flex:0 0 auto;width:14px;height:14px;margin-left:6px;color:#2e7d4f}
.filter-dot.q-delegate{background:#e0702a}
.filter-dot.q-check{background:#93a29a}
.filter-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filter-count{flex:0 0 auto;min-width:22px;text-align:center;background:#eef2ec;color:#40514a;border-radius:999px;font-size:10.5px;font-weight:800;padding:2px 7px}
.filter-opt.on .filter-count{background:#173d35;color:#fff}
.clear-filters{color:#8a5a4a}
.matrix-pop{position:fixed;z-index:12000;background:#fff;border:1px solid #d8dfd8;border-radius:10px;box-shadow:0 14px 34px rgba(23,61,53,.16);padding:5px;min-width:218px;max-width:calc(100vw - 20px);animation:mxpop .14s ease}
@keyframes mxpop{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.matrix-opt{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;border-radius:7px;padding:8px 9px;font:600 12px 'DM Sans';color:#304039;cursor:pointer;text-align:left;transition:background .13s ease}
.matrix-opt:hover{background:#f1f5ef}
.matrix-opt .icon{width:15px;height:15px;border:1.6px solid #c6d1c6;border-radius:4px;flex:0 0 auto;color:transparent;transition:all .13s ease}
.matrix-opt.on .icon{color:#fff}
.matrix-opt.on.urgent .icon{background:#c1352b;border-color:#c1352b}
.matrix-opt.on.important .icon{background:#c8960e;border-color:#c89600}
.matrix-opt.on.important .icon *{stroke:#fff !important}
.matrix-opt.on.urgent .icon *{stroke:#fff !important}
/* ── Expanded-task modal: in-modal editing, composer, alignment polish ── */
.tm-edit-title{flex:1 1 auto;min-width:0;font-family:Manrope,sans-serif;font-size:21px;font-weight:800;letter-spacing:-.03em;margin:0;border-color:#5b806e}
.tm-composer{margin:10px 0 2px;padding:10px 12px;background:#f6f8f4;border:1px dashed #cfdacf;border-radius:10px}
.tm-composer input{width:100%;border:1px solid #d8dfd8;border-radius:8px;background:#fff;padding:9px 11px;font:600 12.5px 'DM Sans',sans-serif;outline:none;box-sizing:border-box}
.tm-composer input:focus{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}
.tm-composer .composer-hint{margin-top:4px}
.tm-topbar .modal-close{position:static;right:auto;top:auto;font-size:20px;width:30px;height:30px;border-radius:8px;display:grid;place-items:center}
.tm-topbar .modal-close:hover{background:#eef2ea;color:#173d35}
.tm-head:has(.tm-edit-title){align-items:stretch}
.tm-footer .chip-icon .icon{width:13px;height:13px}
.tm-list .subtask{background:#fbfcf9;border:1px solid #eef2ec;border-radius:9px;padding:7px 10px;transition:border-color .15s,background .15s}
.tm-list .subtask-drag-handle{width:14px;height:14px}
.tm-list .subtask-drag-handle .icon{width:13px;height:13px}
.tm-list .subtask:hover{border-color:#d8e2d4;background:#f6f9f2}
.tm-list .subtask.done{background:#f8faf6;border-color:#f0f3ec}
.tm-list .subtask input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;border:1.7px solid #9fb2a5;border-radius:5px;background:#fff;display:inline-grid;place-items:center;cursor:pointer;margin:0;transition:.15s ease;flex:0 0 auto}
.tm-list .subtask input[type=checkbox]:hover{border-color:#5b806e}
.tm-list .subtask input[type=checkbox]:checked{background:#275e50;border-color:#275e50}
.tm-list .subtask input[type=checkbox]:checked::after{content:'';width:8px;height:4.4px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg) translate(0,-1px)}
.tm-list .subtask-delete{opacity:0;pointer-events:none;transition:opacity .14s ease,background .14s ease,color .14s ease}
.tm-list .subtask:hover .subtask-delete,.tm-list .subtask:focus-within .subtask-delete{opacity:1;pointer-events:auto}
.tm-list .subtask-delete:hover{color:#c1352b;background:#fee2e2}


/* ================= Archived-tasks modal — canonical design (v2) ================= */
.archived-card{width:min(880px,100%);max-height:90vh;display:flex;flex-direction:column;padding:0;border-radius:18px;background:#fff;box-shadow:0 30px 80px rgba(10,30,25,.3);animation:modalIn .22s cubic-bezier(.22,1,.36,1);overflow:hidden}
.modal-backdrop{backdrop-filter:blur(3px)}
/* --- Hero header --- */
.arch-hero{display:flex;align-items:center;gap:14px;padding:20px 26px 16px;background:linear-gradient(180deg,#f4f8f1,#fbfdf9);border-bottom:1px solid #edf1ea}
.arch-hero-icon{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:#275e50;background:#fff;border:1px solid #dbe4d6;box-shadow:0 2px 8px rgba(23,61,53,.06)}
.arch-hero-icon .icon{width:21px;height:21px}
.arch-hero-copy{min-width:0;flex:1 1 auto}
.arch-hero-copy h3{margin:0;font-family:Manrope,sans-serif;font-size:19px;letter-spacing:-.02em;color:#17221e;display:flex;align-items:center;gap:8px}
.arch-hero-copy h3 .icon{display:none}
.arch-hero-copy p{margin:3px 0 0;font-size:12px;color:#8a968e;line-height:1.4}
.arch-title-count{display:inline-grid;place-items:center;min-width:26px;height:20px;padding:0 8px;border-radius:999px;background:#275e50;color:#fff;font:800 11px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums}
/* --- Toolbar --- */
.arch-toolbar{display:flex;align-items:center;gap:10px;padding:14px 26px 12px;border-bottom:1px solid #eef2ea;flex-wrap:nowrap;max-width:100%}
.arch-select-all{display:inline-flex;align-items:center;justify-content:center;gap:7px;flex:0 0 auto;height:32px;padding:0 12px;font:600 12px 'DM Sans',sans-serif;color:#3d4c44;cursor:pointer;white-space:nowrap;border:1px solid #dfe6dd;border-radius:9px;background:#fff;box-sizing:border-box;transition:border-color .15s,background .15s}
.arch-select-all:hover{border-color:#5b806e;background:#f7faf5}
.arch-select-all input{margin:0;width:14px;height:14px;flex:0 0 auto;cursor:pointer;accent-color:#275e50}
.arch-field{flex:1 1 auto;min-width:120px;position:relative;display:flex;align-items:center}
.arch-field .icon{position:absolute;left:12px;width:14px;height:14px;color:#9fb0a5;pointer-events:none}
.arch-search{flex:1 1 auto;min-width:0;width:100%;height:32px;box-sizing:border-box;border:1px solid #dfe6dd;border-radius:9px;background:#fff;padding:0 12px 0 34px;font:500 12.5px 'DM Sans',sans-serif;color:#17221e;outline:none;transition:border-color .15s,box-shadow .15s}
.arch-search::placeholder{color:#a3b0a8}
.arch-search:focus{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}
.arch-search::-webkit-search-cancel-button{-webkit-appearance:none}
.arch-toolbar .secondary.compact{display:inline-flex;align-items:center;gap:6px;flex:0 0 auto;height:32px;padding:0 12px;font:600 12px 'DM Sans',sans-serif;color:#3d4c44;white-space:nowrap;border-radius:9px;line-height:1}
.arch-toolbar .secondary.compact .icon{width:12px;height:12px}
.arch-toolbar .secondary.compact:hover{border-color:#5b806e;color:#173d35}
.arch-count{flex:0 0 auto;margin-left:auto;font:700 11.5px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;color:#1f4a35;background:#e7f4e2;border:1px solid #cfe6c4;padding:0 10px;height:24px;display:inline-flex;align-items:center;border-radius:999px;white-space:nowrap}
/* --- Bulk bar --- */
.arch-bulk{display:none;align-items:center;gap:10px;margin:12px 26px 0;padding:8px 12px;border:1px solid #d9e8cf;background:linear-gradient(135deg,#eef8ea,#f6fbf3);border-radius:11px}
.arch-bulk.show{display:flex}
.arch-bulk-label{font:800 11px 'DM Sans',sans-serif;color:#1f4a35;text-transform:uppercase;letter-spacing:.07em;white-space:nowrap}
.arch-bulk .secondary{height:30px;padding:0 13px;display:inline-flex;align-items:center;gap:7px;font:600 12px 'DM Sans',sans-serif;border-radius:8px;box-sizing:border-box}
.arch-bulk .secondary .icon{width:12px;height:12px}
.arch-bulk .danger-text{color:#8b3c31;border-color:#e5b9b1}
.arch-bulk .danger-text:hover{background:#fdf1ef}
.arch-bulk .secondary:disabled{opacity:.45;cursor:not-allowed}
.arch-bulk .spacer{flex:1 1 auto}
/* --- List + rows --- */
.arch-list{flex:1 1 auto;display:flex;flex-direction:column;gap:7px;max-height:min(560px,58vh);overflow-y:auto;padding:14px 26px 6px;scrollbar-width:thin}
.arch-list::-webkit-scrollbar{width:8px}
.arch-list::-webkit-scrollbar-thumb{background:#dbe3d8;border-radius:6px}
.arch-list::-webkit-scrollbar-track{background:transparent}
.arch-row{display:flex;align-items:center;gap:11px;background:#fff;border:1px solid #e7ece4;border-radius:11px;padding:8px 12px;min-height:44px;transition:border-color .15s,box-shadow .15s,background .15s}
.arch-row:hover{border-color:#c7d6c2;box-shadow:0 2px 8px rgba(23,61,53,.05)}
.arch-row.selected{background:#f4faef;border-color:#a5cd62;box-shadow:0 0 0 1px #a5cd62 inset}
.arch-subject{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:600 13px 'DM Sans',sans-serif;color:#25332c}
.arch-subject.struck{text-decoration:line-through;text-decoration-color:#b3c0b6;color:#8a968e}
.arch-date{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;font-size:11px;font-variant-numeric:tabular-nums;color:#93a29a}
.arch-date .icon{width:11px;height:11px;color:#a9b6ac}
.arch-row .tag-chip.mini{flex:0 0 auto}
.arch-row .chip-icon.sm{width:26px;height:26px;border-radius:8px;flex:0 0 auto}
.arch-row .chip-icon.sm .icon{width:12px;height:12px;stroke-width:2}
.arch-row .chip-icon.sm:hover{transform:translateY(-1px);box-shadow:0 2px 6px rgba(23,61,53,.12)}
/* --- Origin chip (project / board) on archived rows --- */
.arch-row{padding:8px 12px 8px 10px;gap:9px}
.arch-origin{display:inline-flex;align-items:center;gap:6px;flex:0 1 auto;min-width:0;max-width:300px;border:1px solid #e2e9e0;border-radius:999px;background:#f6f9f4;color:#506158;padding:4px 10px;font:600 11px 'DM Sans',sans-serif;cursor:pointer;transition:border-color .15s,background .15s,color .15s;white-space:nowrap}
.arch-origin .icon{width:11px;height:11px;color:#7c8a81;flex:0 0 auto}
.arch-origin span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.arch-origin .arch-origin-sep{color:#a9b6ac;font-style:normal}
.arch-origin:hover{border-color:#b9d969;background:#f0f6ea;color:#275e50}
.arch-origin:hover .icon{color:#275e50}
@media(max-width:640px){
  .arch-origin{max-width:150px}
  .arch-origin span:nth-of-type(2),.arch-origin .arch-origin-sep{display:none}
  .arch-date{display:none}
}
/* --- Empty / sentinel / footer --- */
.arch-empty{display:flex;flex-direction:column;align-items:center;gap:10px;color:#8a968e;font-size:12.5px;padding:38px 12px;border:1px dashed #d5ddd2;border-radius:13px;background:#fbfcf9;margin-top:4px}
.arch-empty .icon{width:22px;height:22px;color:#b8c4b6}
.arch-sentinel{display:flex;align-items:center;justify-content:center;gap:8px;color:#7c8a81;font-size:11.5px;padding:12px 0 6px}
.arch-spinner{width:14px;height:14px;border:2px solid #d8dfd8;border-top-color:#5b806e;border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.arch-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 26px;border-top:1px solid #eef2ea;background:#fbfcf9;font-size:11.5px;color:#7c8a81;flex-wrap:wrap}
.arch-foot b{font-variant-numeric:tabular-nums;color:#3d4c44}
.arch-foot-hint{color:#a3b0a8}
@media(max-width:640px){.arch-foot-hint{display:none}.arch-toolbar{flex-wrap:wrap}.arch-field{flex:1 1 100%;order:3}}

/* ===== archived modal: neutralize .modal-card input/label leaks + optical alignment ===== */
.archived-card .arch-select-all{display:inline-flex;margin:0;color:#3d4c44;font:600 12px 'DM Sans',sans-serif}
.archived-card .arch-select-all input{margin:0;padding:0;width:14px;height:14px}
.archived-card .arch-search{padding:0 12px 0 34px;margin:0}
.archived-card .arch-search:focus{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}
.arch-field .icon{top:50%;transform:translateY(-50%)}
.arch-select-all{gap:6px}
.arch-list{padding:14px 14px 6px}
.arch-row{padding:7px 12px}
.arch-subject.struck{text-decoration:none;background:linear-gradient(currentColor,currentColor) no-repeat 0 center/100% 1.5px}
.arch-toolbar .secondary.compact{height:32px;box-sizing:border-box}
.arch-bulk .secondary{height:32px}
.arch-row .chip-icon.sm{display:inline-grid;place-items:center;line-height:1}
.arch-bulk-label{line-height:1;padding-bottom:1px}
.arch-hero{padding-left:26px}
.arch-field .icon{top:calc(50% - .5px)}

/* ===== archived boards modal (mirrors archived tasks modal; reuses arch-* system) ===== */
.ab-chip{display:inline-flex;align-items:center;gap:5px;height:22px;padding:0 9px;border-radius:999px;background:#eef3ec;color:#275e50;font-size:11px;font-weight:700;white-space:nowrap;flex:0 0 auto}
.icon-btn.on{border-color:#2f6b58;color:#2f6b58;background:#eaf3ec}
/* === v2 modal hero header: kicker + integrated close, generous spacing === */
.archived-card .arch-hero{padding:24px 26px 20px;gap:16px;align-items:center}
.arch-kicker{display:block;font:800 10px 'DM Sans',sans-serif;text-transform:uppercase;letter-spacing:.14em;color:#8a968e;margin:0 0 4px}
.arch-close{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:1px solid #e0e7df;background:#fff;color:#718078;display:grid;place-items:center;cursor:pointer;transition:.15s ease;margin-left:6px;align-self:flex-start}
.arch-close .icon{width:14px;height:14px}
.arch-close:hover{background:#eef2ea;border-color:#cfdacf;color:#173d35;transform:rotate(90deg)}
.archived-card .arch-hero-copy h3{font-size:20px}
.archived-card .arch-hero-copy p{margin-top:4px}

/* ===== refined row checkboxes (tasks + boards modals): soft, elegant, tactile ===== */
.arch-row .arch-check,.arch-row .complete-box{
  appearance:none;-webkit-appearance:none;width:19px;height:19px;margin:0;flex:0 0 auto;position:relative;
  border:1.5px solid #c9d6cd;border-radius:6.5px;background:#fdfefd;cursor:pointer;
  display:inline-grid;place-items:center;transition:border-color .16s,background .16s,box-shadow .16s,transform .16s;
  box-shadow:0 1px 2px rgba(23,42,34,.05);
}
.arch-row .arch-check:hover,.arch-row .complete-box:hover{
  border-color:#5b806e;background:#f6faf6;box-shadow:0 0 0 3.5px rgba(91,128,110,.1);transform:translateY(-.5px);
}
.arch-row .arch-check:focus-visible,.arch-row .complete-box:focus-visible{outline:none;border-color:#5b806e;box-shadow:0 0 0 3.5px rgba(91,128,110,.22)}
.arch-row .arch-check:checked,.arch-row .complete-box:checked{
  background:linear-gradient(145deg,#2f6b58,#275e50);border-color:#2f6b58;
  box-shadow:0 1px 3px rgba(39,94,80,.28),inset 0 1px 0 rgba(255,255,255,.18);
}
.arch-row .arch-check:checked::after,.arch-row .complete-box:checked::after{
  content:'';position:absolute;inset:0;width:auto;height:auto;margin:0;border:0;border-radius:0;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 12.5 9.5 18 20 6.5' fill='none' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px 12px no-repeat;
  animation:archFade .16s ease;
}
@keyframes archFade{from{opacity:0}to{opacity:1}}
/* board-type chip replaces the checkbox-look square */
.ab-kind{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:0 0 auto;color:#6f8279;background:transparent;border:1px solid #e3eae0}
.ab-kind .icon{width:14px;height:14px}
.arch-row:hover .ab-kind{color:#2f6b58;border-color:#cfe0d4;background:#f4f9f4}

/* ===== Brand stack (name + designer caption) ===== */
.brand-stack{display:flex;flex-direction:column;gap:3px;text-align:left;min-width:0}
.brand-stack>span:first-child{line-height:1.1}
.brand-caption{font-size:9.5px;font-weight:500;letter-spacing:.06em;color:#a8bdac;opacity:.9;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dashboard-nav .brand-caption{color:#9cb2a2}
.mobile-brand .brand-caption{color:#708377;font-size:9px;letter-spacing:.04em}

/* ===== Dashboard nav logo icon (navigates to Today board of Today project) ===== */
button.brand-mark-btn{
  border: 0;
  margin: 0;
  padding: 0;
  cursor: pointer;
  outline: none;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(185,217,105,.28);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .18s ease, box-shadow .18s ease, color .18s ease;
}
button.brand-mark-btn:hover{
  background: #cbf075;
  color: #0f2c25;
  transform: scale(1.12);
  box-shadow: 0 0 16px rgba(185,217,105,.7), 0 3px 10px rgba(0,0,0,.2);
}
button.brand-mark-btn:active{
  transform: scale(0.93);
  background: #a8c85c;
}
button.brand-mark-btn:focus-visible{
  outline: 2px solid #cbf075;
  outline-offset: 3px;
}
.brand-stack[id="brand-home-btn"]{
  cursor: pointer;
  transition: opacity .15s ease;
  user-select: none;
}
.brand-stack[id="brand-home-btn"]:hover{
  opacity: .88;
}
.brand-stack[id="brand-home-btn"]:active{
  opacity: .7;
}

/* ---- Passwordless OTP (Continue with email) ---- */
#subtitle,.heading p{overflow-wrap:anywhere;word-break:break-word}
.panel{overflow-x:clip}
.otp-fields{display:flex;gap:8px;margin:0 0 21px;max-width:100%;width:100%;justify-content:space-between}
.otp-fields input{flex:1 1 0;min-width:0;max-width:60px;height:56px;text-align:center;font:700 24px 'DM Sans',sans-serif;border:1px solid #d8dfd8;border-radius:9px;background:white;color:#17221e;outline:none;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;caret-color:#275e50;box-sizing:border-box}
.otp-fields input:focus{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}
.otp-fields input.filled{border-color:#b9d969;background:#fbfdf5}
.otp-fields.otp-shake{animation:otpShake .4s ease}
@keyframes otpShake{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
@media(max-width:400px){.otp-fields{gap:6px}.otp-fields input{height:48px;font-size:20px;border-radius:8px}}

/* ---- Strict Password Guidelines & Strength Meter ---- */
.password-guidelines{background:#fbfcf9;border:1px solid #e1e7df;border-radius:10px;padding:10px 14px;margin:-4px 0 16px}
.strength-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:5px;font-size:11px;font-weight:700;color:#304039}
.strength-rating{font-size:10.5px;font-weight:700;color:#8b3c31;text-transform:uppercase;letter-spacing:.04em;transition:color .2s ease}
.strength-rating.weak{color:#ef4444}
.strength-rating.fair{color:#f59e0b}
.strength-rating.good{color:#06b6d4}
.strength-rating.strong{color:#10b981}
.strength-track{height:5px;background:#e2e8df;border-radius:999px;overflow:hidden;margin-bottom:8px}
.strength-fill{height:100%;width:0%;border-radius:999px;background:#ef4444;transition:width .15s ease,background-color .15s ease}
.strength-fill.weak{background:#ef4444}
.strength-fill.fair{background:#f59e0b}
.strength-fill.good{background:#06b6d4}
.strength-fill.strong{background:#10b981}
.guidelines-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:4px}
.guideline-item{display:flex;align-items:center;gap:7px;font-size:11px;color:#708076;transition:color .15s ease}
.guideline-item .rule-bullet{width:13px;height:13px;border-radius:50%;border:1.5px solid #cbd7c9;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;background:#fff;transition:all .15s ease;position:relative}
.guideline-item.rule-met{color:#10b981 !important;font-weight:600}
.guideline-item.rule-met .rule-bullet{border-color:#10b981 !important;background:#10b981 !important}
.guideline-item.rule-met .rule-bullet::after{content:'✓';color:#fff !important;font-size:9px;font-weight:800;line-height:1}
.confirm-password-field{margin-bottom:14px}

/* ================= Projects Hub ================= */
.projects-page{max-width:1180px !important}
.hub-mode .nav-title h2{font-family:Manrope,sans-serif}
.projects-hub{padding:6px 2px 40px}
.ph-topbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;flex-wrap:wrap;margin-bottom:18px}
.ph-eyebrow{color:#708377;text-transform:uppercase;font-size:10.5px;font-weight:700;letter-spacing:.16em;margin:0 0 10px}
.ph-topbar h1{font-family:Manrope,sans-serif;font-size:clamp(30px,4.5vw,44px);letter-spacing:-.045em;line-height:1.02;margin:0 0 10px;color:#17221e}
.ph-lede{color:#6b776f;font-size:14px;line-height:1.6;margin:0;max-width:520px}
.ph-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.ph-btn{display:inline-flex;align-items:center;gap:8px;border:1px solid #d8dfd8;border-radius:999px;background:#fff;color:#304039;padding:10px 16px;font:600 12.5px 'DM Sans';cursor:pointer;transition:.16s ease;white-space:nowrap}
.ph-btn .icon{width:14px;height:14px}
.ph-btn:hover{border-color:#b9d969;color:#275e50;transform:translateY(-1px);box-shadow:0 6px 16px rgba(23,61,53,.08)}
.ph-btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.ph-btn.ph-new{background:#173d35;border-color:#173d35;color:#f5f5ed}
.ph-btn.ph-new:hover{background:#24564b;color:#fff}
.ph-btn.ph-new .icon{color:#b9d969}
.ph-btn.ghost{background:rgba(255,255,255,.92)}
.ph-btn.ghost.danger{color:#8b3c31;border-color:#e5b9b1}
.ph-btn.ghost.danger:hover{background:#fdf1ef}
.ph-btn.ghost.danger .icon{color:#c96f5e}
.ph-select-btn .ph-select-on{display:none}
.ph-select-btn.on .ph-select-off{display:none}
.ph-select-btn.on .ph-select-on{display:inline-flex}
.ph-select-off,.ph-select-on{display:inline-flex;align-items:center;gap:6px}
.ph-select-off .icon,.ph-select-on .icon{flex:none}
.ph-select-btn.on{background:#e7f2df;border-color:#b9d969;color:#275e50}
.ph-search{display:flex;align-items:center;gap:8px;border:1px solid #d8dfd8;border-radius:999px;background:#fff;padding:9px 14px;color:#809087;transition:.16s ease}
.ph-search:focus-within{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}
.ph-search .icon{width:14px;height:14px;flex:0 0 auto}
.ph-search input{border:0;outline:none;background:transparent;font:500 13px 'DM Sans';color:#17221e;width:170px}
.ph-search input:focus{outline:none}
.ph-bulkbar{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:0 0 16px;border:1px dashed #cfdacf;border-radius:12px;background:#f8faf5;opacity:0;transform:translateY(-6px);height:0;overflow:hidden;padding-top:0;padding-bottom:0;margin-bottom:0;border-width:0;transition:.22s ease}
.ph-bulkbar.show{opacity:1;transform:none;height:auto;padding:10px 14px;margin-bottom:16px;border-width:1px}
.ph-bulk-label{font:700 12px 'DM Sans';color:#275e50;margin-right:auto}
.ph-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;min-width:0}
.ph-loading,.ph-empty{grid-column:1/-1;border:1px dashed #cfdacf;border-radius:14px;background:#f8faf5;padding:44px 20px;text-align:center;color:#718078}
.ph-empty h3{font-family:Manrope,sans-serif;color:#17221e;margin:12px 0 6px;font-size:19px}
.ph-empty p{margin:0 0 18px;font-size:13px}
.ph-empty .icon{width:34px;height:34px;color:#9cb2a2}
.ph-card{position:relative;display:flex;flex-direction:column;gap:9px;border:1px solid #e2e8df;border-radius:16px;background:linear-gradient(160deg,#ffffff 0%,#f6f9f3 100%);padding:18px 18px 15px;box-shadow:0 10px 26px rgba(23,61,53,.06);cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;animation:phIn .35s ease backwards}
.ph-card:nth-child(2){animation-delay:.04s}.ph-card:nth-child(3){animation-delay:.08s}.ph-card:nth-child(4){animation-delay:.12s}.ph-card:nth-child(5){animation-delay:.16s}
@keyframes phIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ph-card:hover{transform:translateY(-3px);border-color:#c9dcc3;box-shadow:0 18px 38px rgba(23,61,53,.11)}
.ph-card.selected{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.16),0 14px 30px rgba(23,61,53,.1);background:linear-gradient(160deg,#f4f9f0,#eef5e8)}
.ph-card.selectable{cursor:pointer}
.ph-card-top{display:flex;align-items:center;justify-content:space-between;min-height:22px}
.ph-dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto;box-shadow:0 0 0 3px rgba(23,61,53,.06)}
.ph-dot.sm{width:9px;height:9px}
.pc-blue{background:#5b806e}.pc-green{background:#7fb069}.pc-amber{background:#e0a83c}.pc-rose{background:#d97785}.pc-violet{background:#8f7bd1}.pc-teal{background:#3aa79d}
.ph-counts{font:600 10.5px 'DM Sans';color:#809087;letter-spacing:.04em;text-transform:uppercase}
.ph-check{width:17px;height:17px;accent-color:#275e50;cursor:pointer}
.ph-name{font-family:Manrope,sans-serif;font-size:18.5px;letter-spacing:-.02em;margin:2px 0 0;color:#17221e;line-height:1.25}
.ph-desc{color:#718078;font-size:12.5px;line-height:1.55;margin:0;min-height:19px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ph-desc.placeholder{color:#a3b0a8;font-style:italic}
.ph-progress{height:5px;border-radius:999px;background:#e6ece3;overflow:hidden;box-shadow:inset 0 1px 2px rgba(23,61,53,.06);margin-top:2px}
.ph-progress i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,#7fb069,#b9d969);transition:width .6s cubic-bezier(.22,1,.36,1)}
.ph-card-foot{display:flex;align-items:center;gap:8px;margin-top:auto}
.ph-pct{font:700 12px 'DM Sans';color:#275e50;min-width:34px}
.ph-foot-actions{display:flex;gap:5px;opacity:0;transform:translateY(2px);transition:.18s ease}
.ph-card:hover .ph-foot-actions,.ph-card.selected .ph-foot-actions,.ph-card:focus-within .ph-foot-actions{opacity:1;transform:none}
.ph-date{margin-left:auto;font:500 10.5px 'DM Sans';color:#a0aaa3;display:inline-flex;align-items:center;gap:4px}
.ph-date .icon{width:11px;height:11px}
.chip-btn{border:1px solid #d8dfd8;border-radius:7px;background:#fff;color:#506158;padding:6px 11px;font:600 11px 'DM Sans';cursor:pointer}
.chip-btn.primary{background:#173d35;border-color:#173d35;color:#fff}
.chip-btn.primary:hover{background:#24564b}
.ph-edit{display:flex;flex-direction:column;gap:8px}
.ph-edit-name{border:1px solid #5b806e;border-radius:8px;background:#fff;font:700 14px 'DM Sans';color:#17221e;padding:8px 10px;outline:none;box-shadow:0 0 0 3px rgba(91,128,110,.13)}
.ph-edit-desc{border:1px solid #d8dfd8;border-radius:8px;background:#fff;font:400 12px 'DM Sans';color:#17221e;padding:8px 10px;outline:none;resize:vertical}
.ph-edit-desc:focus{border-color:#5b806e;box-shadow:0 0 0 3px rgba(91,128,110,.13)}
.ph-edit-row{display:flex;align-items:center;gap:6px}
.ph-spacer{flex:1}
.ph-swatch{width:19px;height:19px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px #d8dfd8;cursor:pointer;padding:0;transition:.15s}
.ph-swatch.on{box-shadow:0 0 0 2px #173d35;transform:scale(1.12)}
.ph-color-row{display:flex;gap:8px;margin:-6px 0 16px}
.ph-confirm-message{color:#5c6b62;font-size:13.5px;line-height:1.6;margin:0 0 20px}
.danger-solid{background:#8b3c31 !important;border-color:#8b3c31 !important}
.danger-solid:hover{background:#743028 !important}
.icon-btn{width:30px;height:30px;border:1px solid #e0e7de;border-radius:8px;background:#fff;color:#5c6b62;display:grid;place-items:center;cursor:pointer;transition:.15s ease}
.icon-btn .icon{width:14px;height:14px}
.icon-btn:hover{color:#275e50;border-color:#b9d969;background:#f6faf1;transform:translateY(-1px)}
/* Elevate section-page stacking context when All Projects menu is open or hovered */
.dashboard-content.section-page.has-projects-open,
.dashboard-content.section-page:has(.projects-back-wrap.is-open),
.dashboard-content.section-page:has(.projects-back-wrap:hover) {
  z-index: 50 !important;
}

/* Elevate section-page stacking context above top header whenever ANY modal is open */
body.modal-open .dashboard-content.section-page,
.dashboard-content.section-page:has(.modal-backdrop.is-open),
body:has(.modal-backdrop.is-open) .dashboard-content.section-page {
  z-index: 100100 !important;
}

/* Lower top navigation header behind open modal */
body.modal-open .dashboard-nav,
body:has(.modal-backdrop.is-open) .dashboard-nav {
  z-index: 1 !important;
}

.archived-card{width:min(100%,640px)}

/* ===== Recent Projects Popover on "All projects" hover ===== */
.projects-back-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  margin-right: 6px;
  z-index: 12000;
}

.projects-back-wrap:hover,
.projects-back-wrap.is-open {
  z-index: 12500;
}

.projects-back {
  flex: 0 0 auto;
  margin-right: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  user-select: none;
}

.recent-proj-caret {
  width: 10px;
  height: 10px;
  margin-left: 1px;
  opacity: 0.55;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.15s ease;
  flex-shrink: 0;
}

.projects-back-wrap:hover .recent-proj-caret,
.projects-back-wrap.is-open .recent-proj-caret {
  opacity: 1;
  transform: rotate(180deg);
}

.recent-projects-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 264px;
  max-width: min(320px, calc(100vw - 24px));
  background: #ffffff;
  border: 1px solid #d8dfd8;
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(23, 61, 53, 0.18), 0 3px 8px rgba(23, 61, 53, 0.06);
  padding: 6px;
  z-index: 12510;
  box-sizing: border-box;
  display: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease;
  pointer-events: none;
}

/* Invisible bridge so mouse moving from button to dropdown doesn't lose hover */
.recent-projects-popover::before {
  content: '';
  position: absolute;
  top: -9px;
  left: 0;
  right: 0;
  height: 9px;
  background: transparent;
}

.projects-back-wrap:hover .recent-projects-popover,
.projects-back-wrap.is-open .recent-projects-popover {
  display: block;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.recent-proj-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 9px 7px;
  border-bottom: 1px solid #edf1eb;
  margin-bottom: 4px;
}

.recent-proj-eyebrow {
  font: 700 10px 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #7b8c82;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.recent-proj-eyebrow svg,
.recent-proj-eyebrow .icon {
  width: 12px;
  height: 12px;
  color: #7b8c82;
}

.recent-proj-count {
  font: 700 9.5px 'DM Sans', sans-serif;
  padding: 1px 6px;
  border-radius: 999px;
  background: #f0f4ee;
  color: #506158;
  line-height: 1.4;
}

.recent-proj-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.recent-proj-row {
  position: relative;
  width: 100%;
}

.recent-proj-row:hover,
.recent-proj-row.is-flyout-open {
  z-index: 12530;
}

.recent-proj-item {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  background: transparent;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.12s ease, transform 0.12s ease;
  color: #17221e;
  box-sizing: border-box;
  text-decoration: none;
}

.recent-proj-item:hover,
.recent-proj-row:hover .recent-proj-item,
.recent-proj-row.is-flyout-open .recent-proj-item {
  background: #f2f7ef;
  color: #173d35;
}

.recent-proj-item.is-current {
  background: rgba(39, 94, 80, 0.07);
}

.recent-proj-item.is-current:hover,
.recent-proj-row:hover .recent-proj-item.is-current,
.recent-proj-row.is-flyout-open .recent-proj-item.is-current {
  background: rgba(39, 94, 80, 0.11);
}

.recent-proj-info {
  flex: 1 1 auto;
  min-width: 0;
}

.recent-proj-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

.recent-proj-name {
  font-size: 12.5px;
  font-weight: 600;
  color: #17221e;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  line-height: 1.3;
}

.recent-proj-star-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  flex-shrink: 0;
  line-height: 1;
}

.recent-proj-star-indicator svg {
  width: 12.5px;
  height: 12.5px;
  fill: #f59e0b;
  stroke: #d97706;
  stroke-width: 1.2;
}

.recent-proj-item:hover .recent-proj-name,
.recent-proj-row:hover .recent-proj-name {
  color: #173d35;
}

.recent-proj-desc {
  font-size: 10.5px;
  color: #718078;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: block;
  margin-top: 1px;
  line-height: 1.25;
}

.recent-proj-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2.5px 7px;
  border-radius: 999px;
  background: #e7f2df;
  color: #275e50;
  margin-left: auto;
  flex-shrink: 0;
  align-self: center;
  line-height: 1;
}

.recent-proj-arrow-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  color: #9bb0a3;
  flex-shrink: 0;
  padding: 2px 2px;
  transition: transform 0.12s ease, color 0.12s ease;
}

.recent-proj-arrow {
  color: inherit;
  transition: transform 0.12s ease, color 0.12s ease;
}

.recent-proj-item:hover .recent-proj-arrow,
.recent-proj-row:hover .recent-proj-arrow {
  color: #275e50;
  transform: translateX(2px);
}

/* Boards Flyout Submenu on Hover */
.recent-boards-flyout {
  position: absolute;
  left: calc(100% + 6px);
  top: 0;
  bottom: auto;
  width: 216px;
  min-width: 196px;
  max-width: 260px;
  background: #ffffff;
  border: 1px solid #d8dfd8;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(23, 61, 53, 0.22), 0 3px 10px rgba(23, 61, 53, 0.08);
  padding: 6px;
  z-index: 12530;
  box-sizing: border-box;
  display: none;
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
  max-height: calc(100vh - 100px);
}

/* Invisible bridge so moving cursor between project item and flyout preserves hover */
.recent-boards-flyout::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  width: 14px;
  background: transparent;
}

.recent-proj-row:hover > .recent-boards-flyout,
.recent-proj-row.is-flyout-open > .recent-boards-flyout {
  display: block;
  opacity: 1;
  transform: translateX(0);
  pointer-events: auto;
}

.recent-boards-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 5px 8px 6px;
  border-bottom: 1px solid #edf1eb;
  margin-bottom: 4px;
  gap: 6px;
}

.recent-boards-header-title {
  display: flex;
  align-items: center;
  gap: 5px;
  min-width: 0;
}

.recent-boards-proj-name {
  font: 700 10.5px 'DM Sans', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #506158;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recent-boards-count {
  font: 700 9px 'DM Sans', sans-serif;
  padding: 1px 5px;
  border-radius: 999px;
  background: #f0f4ee;
  color: #617369;
  line-height: 1.4;
  flex-shrink: 0;
}

.recent-boards-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 250px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.recent-boards-list::-webkit-scrollbar {
  width: 5px;
}

.recent-boards-list::-webkit-scrollbar-thumb {
  background: #d3ddd2;
  border-radius: 4px;
}

.recent-board-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  color: #1f3029;
  transition: background 0.12s ease, color 0.12s ease;
  box-sizing: border-box;
  text-decoration: none;
}

.recent-board-item:hover {
  background: #f0f5ee;
  color: #173d35;
}

.recent-board-item.is-active {
  background: rgba(39, 94, 80, 0.12);
  font-weight: 600;
  color: #173d35;
  box-shadow: inset 3px 0 0 #275e50;
}

.recent-board-item.is-today {
  color: #8a6a12;
}

.recent-board-item.is-today:hover {
  background: #fef8e7;
  color: #725508;
}

.recent-board-item.is-today.is-active {
  background: #fdf3d0;
  color: #6b4e08;
  box-shadow: inset 3px 0 0 #b8860b;
}

.rb-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #718078;
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.rb-icon svg {
  width: 14px;
  height: 14px;
}

.rb-icon.is-today,
.recent-board-item.is-today .rb-icon {
  color: #b4830e;
}

.recent-board-item.is-today .rb-icon svg {
  stroke: #b4830e;
}

.rb-name {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.rb-star {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #f59e0b;
  flex-shrink: 0;
  margin-left: auto;
}

.rb-star svg {
  width: 11px;
  height: 11px;
  fill: #f59e0b;
  stroke: #d97706;
  stroke-width: 1.2;
}

.recent-board-badge {
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 5px;
  border-radius: 999px;
  background: #e7f2df;
  color: #275e50;
  margin-left: auto;
  flex-shrink: 0;
  line-height: 1;
}

.recent-boards-empty {
  padding: 10px 8px;
  text-align: center;
  font-size: 11px;
  color: #8a968e;
}

.recent-proj-empty {
  padding: 16px 10px;
  text-align: center;
  font-size: 12px;
  color: #8a968e;
}

.recent-proj-footer {
  border-top: 1px solid #edf1eb;
  margin-top: 4px;
  padding-top: 4px;
}

.recent-proj-all-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 9px;
  border: 0;
  background: transparent;
  border-radius: 7px;
  color: #275e50;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  box-sizing: border-box;
}

.recent-proj-all-link:hover {
  background: #f2f7ef;
  color: #173d35;
}

@media(max-width: 768px) {
  .projects-back-wrap {
    align-self: flex-start !important;
    margin-right: 0 !important;
  }
  .recent-boards-flyout {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    max-width: 100%;
    margin-top: 3px;
    margin-bottom: 3px;
    box-shadow: inset 0 1px 3px rgba(23, 61, 53, 0.05);
    background: #f7faf5;
    border: 1px solid #dbe5d8;
    transform: none;
    display: none;
  }
  .recent-boards-flyout::before {
    display: none;
  }
  .recent-proj-row.is-flyout-open > .recent-boards-flyout {
    display: block;
    opacity: 1;
    pointer-events: auto;
  }
  .recent-proj-row.is-flyout-open .recent-proj-arrow {
    transform: rotate(90deg);
  }
}
@media(max-width:640px){
  .ph-topbar{align-items:stretch;flex-direction:column}
  .ph-actions{width:100%}
  .ph-search{flex:1}
  .ph-search input{width:100%}
  .ph-grid{grid-template-columns:1fr}
  .projects-page{padding:0 2px 30px !important}
}

/* ---------- Today integration: origin chip + Today project card ---------- */
.origin-chip{flex:0 0 auto;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10.5px;font-weight:700;letter-spacing:.2px;line-height:1;padding:4px 8px;border-radius:999px;background:linear-gradient(135deg,#eef5e8,#e2eedb);border:1px solid #c9dcbe;color:#4c6b52;margin-top:1px;text-decoration:none;display:inline-block;cursor:pointer;transition:box-shadow .15s,border-color .15s}
.origin-chip:hover{border-color:#9dbf8e;box-shadow:0 1px 6px rgba(76,107,82,.22)}
.origin-chip .origin-sep{font-style:normal;opacity:.55;font-weight:400}
.ph-card.today-proj{background:linear-gradient(150deg,#fdf6e3,#f7ead0);border-color:#e5cf9d}
.ph-card.today-proj:hover{border-color:#d9b96a;box-shadow:0 18px 40px rgba(190,150,60,.18)}
.ph-today-tag{font-size:10.5px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:#8a6d1f;background:#f3e3b8;border:1px solid #e0c988;padding:3px 9px;border-radius:999px}
.chip-icon.today.active{color:#c99b17;border-color:#e8d27e;background:#fff9e3}
.chip-icon.today.active svg{fill:#f5c518}

/* ---------- "Time on Today" age chip ---------- */
.today-age{flex:0 0 auto;display:inline-flex;align-items:center;gap:3.5px;font-size:10px;font-weight:700;letter-spacing:.2px;line-height:1;padding:2.5px 7.5px;height:19px;box-sizing:border-box;border-radius:999px;background:linear-gradient(135deg,#fff8e0,#f7ecc4);border:1px solid #ecd9a0;color:#8a6d1f;margin:0;white-space:nowrap}
.today-age-prefix{font-weight:600;opacity:.88}
.today-age-time{font-weight:800;letter-spacing:.3px}
.task-card.completed .today-age{opacity:.55}
.tm-topbar .today-age{font-size:10.5px}

/* ---- Board header timeline: necklace of hour pills + full-width 15m progress bars ---- */
.board-progress-wrap{display:flex;flex-direction:column;gap:6px;flex:1 1 auto;min-width:0;margin:0;box-sizing:border-box}
.board-timeline{display:flex;align-items:center;gap:6px;width:100%;min-width:0;margin-bottom:0;min-height:28px;height:auto;box-sizing:border-box}
.tl-pills-list{display:inline-flex;align-items:center;gap:3.5px;flex:0 1 auto;min-width:0;max-width:calc(100% - 240px);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-wrap:nowrap;height:32px;padding:4px;box-sizing:border-box}
.tl-pills-list::-webkit-scrollbar{display:none}
.tl-pill{flex:0 0 auto;min-width:38px;height:24px;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:2.5px;text-align:center;font-size:10px;font-weight:700;letter-spacing:.3px;line-height:1;padding:0 6px;border-radius:999px;background:linear-gradient(135deg,#eef5e8,#e2eedb);border:1px solid #c9dcbe;color:#4c6b52;white-space:nowrap;user-select:none;-webkit-user-select:none;cursor:pointer;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease,color .15s ease;position:relative}
.tl-pill:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(23,61,53,.14)}
.tl-pill.tl-past{background:linear-gradient(135deg,#c8dcbb,#accb9c);border-color:#8fb281;color:#223d2b;font-weight:800}
.tl-pill.tl-past:hover{transform:translateY(-1px);box-shadow:0 3px 8px rgba(23,61,53,.18)}
.tl-pill.tl-now{background:linear-gradient(135deg,#173d35,#24564b);border-color:#173d35;color:#b9d969;box-shadow:0 3px 10px rgba(23,61,53,.28);position:relative}
.tl-pill.tl-now:after{content:'';position:absolute;top:-2.5px;right:-2.5px;width:6px;height:6px;border-radius:50%;background:#b9d969;border:1.5px solid #fff}
.tl-pill .tl-time{font-weight:800;font-size:10px;letter-spacing:.2px;line-height:1}
.tl-pill.tl-utilized{background:linear-gradient(135deg,#235d42,#17432f);border-color:#153d2b;color:#ecfdf2;font-weight:800;box-shadow:0 2px 7px rgba(23,67,47,.25)}
.tl-pill.tl-utilized:hover{transform:translateY(-1px);background:linear-gradient(135deg,#2b6f50,#1c4f37);border-color:#123424;box-shadow:0 4px 10px rgba(23,67,47,.32)}
.tl-pill.tl-past.tl-utilized{background:linear-gradient(135deg,#255940,#193f2c);border-color:#133323;color:#d8f8e1}
.tl-pill.tl-past.tl-utilized:hover{background:linear-gradient(135deg,#2e694b,#1e4c35)}
.tl-pill.tl-now.tl-utilized{background:linear-gradient(135deg,#13382f,#1e5641);border-color:#82e29e;color:#f0fdf4;box-shadow:0 3px 10px rgba(19,56,47,.35)}
.tl-check-icon{width:9.5px;height:9.5px;stroke-width:3.4;stroke:currentColor;display:inline-block;vertical-align:middle}
.tl-pill.tl-utilized .tl-check-icon{color:#86efac}
.tl-pill.tl-now.tl-utilized .tl-check-icon{color:#b9d969}

/* ---- Utilization dots inside time pills under hour number / clock ---- */
.tl-hour-wrap{
  display:inline-flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  line-height:1;
  vertical-align:middle;
  text-align:center;
}
.tl-hour-num{
  display:inline-block;
  line-height:1;
  font-weight:800;
  font-size:10px;
}
.tl-pill-dots{
  display:block;
  width:28px;
  height:8px;
  margin-top:1px;
  overflow:visible;
  flex:0 0 auto;
}
/* Base unlit dot: mathematically uniform 4-circle vector gauge */
.tl-dot{
  fill:rgba(44,79,53,.32);
  stroke:rgba(44,79,53,.15);
  stroke-width:0.5px;
  transition:fill .18s ease,stroke .18s ease,filter .18s ease;
}

/* Unlit dots on specific pill themes so they remain clearly visible with uniform contrast */
.tl-pill.tl-past .tl-dot{
  fill:rgba(23,59,34,.35);
  stroke:rgba(23,59,34,.18);
  stroke-width:0.5px;
}
.tl-pill.tl-utilized .tl-dot{
  fill:rgba(255,255,255,.32);
  stroke:rgba(255,255,255,.2);
  stroke-width:0.5px;
}
.tl-pill.tl-now .tl-dot{
  fill:rgba(255,255,255,.35);
  stroke:rgba(255,255,255,.2);
  stroke-width:0.5px;
}
.tl-pill.tl-finish .tl-dot{
  fill:rgba(180,83,9,.32);
  stroke:rgba(180,83,9,.18);
  stroke-width:0.5px;
}
.tl-pill.tl-finish.tl-utilized .tl-dot{
  fill:rgba(255,255,255,.32);
  stroke:rgba(255,255,255,.2);
  stroke-width:0.5px;
}

/* Lit dots: glowing with light when that specific time bar is checked/clicked */
.tl-dot.is-lit{
  fill:#16a34a;
  stroke:#86efac;
  stroke-width:0.6px;
  filter:drop-shadow(0 0 2px rgba(22,163,74,.95));
}
.tl-pill.tl-past .tl-dot.is-lit{
  fill:#15803d;
  stroke:#86efac;
  stroke-width:0.6px;
  filter:drop-shadow(0 0 2px rgba(21,128,61,.95));
}
.tl-pill.tl-utilized .tl-dot.is-lit{
  fill:#86efac;
  stroke:#ffffff;
  stroke-width:0.6px;
  filter:drop-shadow(0 0 2.5px rgba(134,239,172,1));
}
.tl-pill.tl-now .tl-dot.is-lit{
  fill:#b9d969;
  stroke:#ffffff;
  stroke-width:0.6px;
  filter:drop-shadow(0 0 3px rgba(185,217,105,1));
}
.tl-pill.tl-finish .tl-dot.is-lit{
  fill:#f59e0b;
  stroke:#fef08a;
  stroke-width:0.6px;
  filter:drop-shadow(0 0 2.5px rgba(245,158,11,.95));
}
.tl-pill.tl-finish.tl-utilized .tl-dot.is-lit,
.tl-pill.tl-finish.tl-now .tl-dot.is-lit{
  fill:#fbbf24;
  stroke:#ffffff;
  stroke-width:0.6px;
  filter:drop-shadow(0 0 3px rgba(251,191,36,1));
}

/* Pill selected for 15m bars cluster */
.tl-pill.tl-bar-selected{
  border-color:#275e50 !important;
  box-shadow:0 0 0 1.8px #275e50, 0 2px 7px rgba(23,61,53,.24) !important;
  z-index:5;
}
.tl-pill.tl-past.tl-bar-selected{
  border-color:#173d35 !important;
  box-shadow:0 0 0 1.8px #173d35, 0 2px 7px rgba(23,61,53,.26) !important;
  z-index:5;
}
.tl-pill.tl-utilized.tl-bar-selected{
  border-color:#86efac !important;
  box-shadow:0 0 0 1.8px #86efac, 0 2px 8px rgba(23,67,47,.32) !important;
  z-index:5;
}
.tl-pill.tl-now.tl-bar-selected{
  border-color:#b9d969 !important;
  box-shadow:0 0 0 1.8px #b9d969, 0 2px 8px rgba(23,61,53,.32) !important;
  z-index:5;
}
.tl-pill.tl-finish.tl-bar-selected{
  border-color:#f59e0b !important;
  box-shadow:0 0 0 1.8px #f59e0b, 0 2px 8px rgba(245,158,11,.3) !important;
  z-index:5;
}

/* ---- Finish / Final Hour Pill (Near Completion) ---- */
.tl-pill.tl-finish{
  background:linear-gradient(135deg,#fffdf2 0%,#fef3c7 45%,#fde68a 100%);
  border:1px solid #f59e0b;
  color:#92400e;
  font-weight:800;
  box-shadow:0 1px 4px rgba(245,158,11,.16),inset 0 1px 0 rgba(255,255,255,.65);
  position:relative;
  height:24px;
  box-sizing:border-box;
  padding:0 7.5px;
  gap:2.5px;
}
.tl-pill.tl-finish:hover{
  transform:translateY(-1.5px);
  background:linear-gradient(135deg,#ffffff 0%,#fef0b8 45%,#fcd34d 100%);
  border-color:#d97706;
  color:#78350f;
  box-shadow:0 3px 10px rgba(245,158,11,.28);
}
.tl-pill.tl-finish.tl-past{
  background:linear-gradient(135deg,#fef3c7,#fde68a);
  border-color:#d97706;
  color:#78350f;
}
.tl-pill.tl-finish.tl-past:hover{
  background:linear-gradient(135deg,#fde68a,#fcd34d);
  box-shadow:0 3px 9px rgba(217,119,6,.25);
}
.tl-pill.tl-finish.tl-now{
  background:linear-gradient(135deg,#173d35 0%,#204d42 55%,#92400e 100%);
  border-color:#f59e0b;
  color:#fef08a;
  box-shadow:0 0 0 2px rgba(245,158,11,.35),0 3px 12px rgba(23,61,53,.35);
}
.tl-pill.tl-finish.tl-now:after{
  content:'';
  position:absolute;
  top:-3.5px;
  right:-3.5px;
  width:8px;
  height:8px;
  border-radius:50%;
  background:#f59e0b;
  border:1.5px solid #fff;
  box-shadow:0 0 7px #f59e0b;
  animation:tlFinishPulse 1.8s ease-in-out infinite;
}
@keyframes tlFinishPulse{
  0%,100%{transform:scale(1);opacity:1}
  50%{transform:scale(1.35);opacity:.8}
}
.tl-pill.tl-finish.tl-utilized{
  background:linear-gradient(135deg,#17422f 0%,#1e5a3e 50%,#2a7a52 100%);
  border-color:#f59e0b;
  color:#fef9c3;
  font-weight:800;
  box-shadow:0 2px 8px rgba(23,66,47,.32),inset 0 0 0 1px rgba(245,158,11,.35);
}
.tl-pill.tl-finish.tl-utilized:hover{
  transform:translateY(-1.5px);
  background:linear-gradient(135deg,#1d523a 0%,#266d4c 50%,#328f61 100%);
  border-color:#fbbf24;
  box-shadow:0 4px 12px rgba(23,66,47,.4);
}
.tl-pill.tl-finish.tl-past.tl-utilized{
  background:linear-gradient(135deg,#1b4b35 0%,#236544 100%);
  border-color:#d97706;
  color:#fef3c7;
}
.tl-pill.tl-finish.tl-now.tl-utilized{
  background:linear-gradient(135deg,#143e2e 0%,#1f5f40 55%,#854d0e 100%);
  border-color:#fbbf24;
  color:#fef08a;
  box-shadow:0 0 0 2px rgba(251,191,36,.4),0 3px 12px rgba(20,62,46,.4);
}
.tl-finish-flag-icon{
  width:11px;
  height:11px;
  stroke-width:2.2;
  display:inline-block;
  vertical-align:middle;
  flex:0 0 auto;
  color:#d97706;
}
.tl-pill.tl-finish:hover .tl-finish-flag-icon{
  color:#b45309;
}
.tl-pill.tl-finish.tl-now .tl-finish-flag-icon{
  color:#fbbf24;
  filter:drop-shadow(0 0 3px rgba(251,191,36,.6));
}
.tl-pill.tl-finish.tl-utilized .tl-finish-flag-icon{
  color:#fef08a;
  stroke:#fef08a;
  filter:drop-shadow(0 0 2.5px rgba(254,240,138,.85));
}
.tl-pill.tl-finish.tl-utilized .tl-check-icon{
  color:#fbbf24;
  stroke:#fbbf24;
  filter:drop-shadow(0 0 2px rgba(251,191,36,.5));
}
.tl-finish-badge{
  font-size:8.5px;
  font-weight:800;
  letter-spacing:.5px;
  text-transform:uppercase;
  line-height:1;
  padding:2px 5.5px;
  border-radius:999px;
  background:rgba(245,158,11,.16);
  border:1px solid rgba(245,158,11,.35);
  color:#92400e;
  margin-left:2px;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
}
.tl-pill.tl-finish:hover .tl-finish-badge{
  background:rgba(245,158,11,.22);
  border-color:rgba(217,119,6,.45);
  color:#78350f;
}
.tl-pill.tl-finish.tl-now .tl-finish-badge{
  background:rgba(245,158,11,.28);
  border-color:rgba(245,158,11,.6);
  color:#fef08a;
}
.tl-pill.tl-finish.tl-utilized .tl-finish-badge{
  background:rgba(251,191,36,.22);
  border-color:rgba(251,191,36,.55);
  color:#fef08a;
}
.tl-settings-btn{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:999px;background:linear-gradient(135deg,#f4f7f2,#e8efe6);border:1px solid #c9dcbe;color:#4c6b52;cursor:pointer;padding:0;transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;flex:0 0 auto}
.tl-settings-btn:hover{transform:translateY(-1px);background:#deebd9;border-color:#9abf8b;color:#1c3d28;box-shadow:0 2px 7px rgba(23,61,53,.14)}
.tl-settings-btn svg{width:12px;height:12px;stroke-width:2}
.timeline-pop{
  position:fixed;
  z-index:12000;
  background:#ffffff;
  border:1px solid #d8dfd8;
  border-radius:12px;
  box-shadow:0 16px 36px rgba(23,61,53,.18), 0 2px 8px rgba(23,61,53,.06);
  padding:14px;
  width:268px;
  animation:mxpop .14s ease;
  box-sizing:border-box;
}
.timeline-pop-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:10px;
  padding-bottom:7px;
  border-bottom:1px solid #edf1eb;
}
.timeline-pop-title{
  font-size:12px;
  font-weight:800;
  color:#173d35;
  letter-spacing:-.2px;
}
.tl-pop-count{
  font-size:10px;
  font-weight:700;
  color:#275e50;
  background:#eaf6ee;
  border:1px solid #c1e3ce;
  padding:2px 7px;
  border-radius:999px;
}
.timeline-pop label{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  color:#304039;
  font-size:11.5px;
  font-weight:700;
  margin-bottom:9px;
}
.timeline-pop select{
  border:1px solid #d8dfd8;
  border-radius:7px;
  background:#f8f9f6;
  color:#17221e;
  padding:5px 8px;
  font:600 11.5px 'DM Sans';
  outline:none;
  cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.timeline-pop select:focus{
  border-color:#5b806e;
  box-shadow:0 0 0 2px rgba(91,128,110,.15);
}
.timeline-pop-actions{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  gap:8px;
  margin-top:10px;
  padding-top:8px;
  border-top:1px solid #edf1eb;
  flex-wrap:wrap;
}
.timeline-pop-actions .text-button{
  font-size:11px;
}
.tl-clear-btn{
  color:#9e3434 !important;
}
.tl-clear-btn:hover{
  color:#c51f1f !important;
  text-decoration:underline;
}
.timeline-pop .tl-apply{
  padding:6px 13px;
  font-size:11px;
  font-weight:700;
  border-radius:7px;
  background:#173d35;
  color:#ffffff;
  border:none;
  cursor:pointer;
  transition:background .15s ease,transform .15s ease;
}
.timeline-pop .tl-apply:hover{
  background:#24564b;
  transform:translateY(-1px);
}

/* ---- Multi-Pill Range Selection & Task Drag/Drop Hover Styles (Theme Harmonized) ---- */
.tl-pill.tl-range-selected {
  outline: none !important;
  background: linear-gradient(135deg, #173d35, #24564b) !important;
  border-color: #275e50 !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  box-shadow: 0 0 0 1.8px #275e50, 0 2px 8px rgba(23, 61, 53, 0.28) !important;
  transform: none !important;
  z-index: 8;
}
.tl-pill.tl-range-selected .tl-dot {
  fill: rgba(255, 255, 255, 0.32);
  stroke: rgba(255, 255, 255, 0.2);
}
.tl-pill.tl-range-selected .tl-dot.is-lit {
  fill: #b9d969 !important;
  stroke: #ffffff !important;
  filter: drop-shadow(0 0 3.5px rgba(185, 217, 105, 1)) !important;
}
.tl-pill.tl-range-selected .tl-check-icon {
  color: #b9d969 !important;
}

/* Hovering over pill during drag */
.tl-pill.tl-drag-over {
  outline: none !important;
  background: linear-gradient(135deg, #24564b, #173d35) !important;
  border-color: #b9d969 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 2px #b9d969, 0 0 12px rgba(185, 217, 105, 0.6) !important;
  transform: none !important;
  z-index: 12;
}

/* Pulsing guidance when dragging a task across the app */
body.is-dragging-task .tl-pill.tl-range-selected {
  animation: tlPillPulseGlow 1.3s infinite alternate ease-in-out;
}
@keyframes tlPillPulseGlow {
  0% { box-shadow: 0 0 8px rgba(39, 94, 80, 0.4), 0 2px 6px rgba(23, 61, 53, 0.2); }
  100% { box-shadow: 0 0 18px rgba(185, 217, 105, 0.8), 0 0 5px #b9d969, 0 3px 10px rgba(23, 61, 53, 0.3); }
}

/* Counter badge on pill indicating assigned tasks (light green initially, dark green when all completed)
   Rendered as an exact vector SVG component to ensure mathematically locked centering across all browser zoom levels and display scaling */
.tl-pill-task-badge {
  display: block;
  flex: 0 0 15px;
  width: 15px;
  height: 15px;
  min-width: 15px;
  max-width: 15px;
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(20, 61, 43, 0.12));
}

.tl-pill-task-badge .tl-badge-circle {
  fill: #d8f3dc;
  stroke: #82cc96;
  stroke-width: 1px;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.tl-pill-task-badge .tl-badge-num {
  fill: #143d2b;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 8.8px;
  font-weight: 800;
  text-anchor: middle;
  dominant-baseline: central;
  user-select: none;
  -webkit-user-select: none;
  transition: fill 0.2s ease;
}

.tl-pill.tl-past .tl-pill-task-badge .tl-badge-circle {
  fill: #e2f9e7;
  stroke: #73b887;
}
.tl-pill.tl-past .tl-pill-task-badge .tl-badge-num {
  fill: #143d2b;
}

.tl-pill.tl-now .tl-pill-task-badge .tl-badge-circle {
  fill: #c8ebb8;
  stroke: #a8db96;
}
.tl-pill.tl-now .tl-pill-task-badge .tl-badge-num {
  fill: #143d2b;
}
.tl-pill.tl-now .tl-pill-task-badge {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.25));
}

.tl-pill.tl-utilized .tl-pill-task-badge .tl-badge-circle {
  fill: #c8ebb8;
  stroke: #a8db96;
}
.tl-pill.tl-utilized .tl-pill-task-badge .tl-badge-num {
  fill: #143d2b;
}
.tl-pill.tl-utilized .tl-pill-task-badge {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.2));
}

.tl-pill.tl-finish .tl-pill-task-badge .tl-badge-circle {
  fill: #e0f8e5;
  stroke: #6ec283;
}
.tl-pill.tl-finish .tl-pill-task-badge .tl-badge-num {
  fill: #143d2b;
}
.tl-pill.tl-finish .tl-pill-task-badge {
  filter: drop-shadow(0 1px 3px rgba(245, 158, 11, 0.2));
}

.tl-pill.tl-range-selected .tl-pill-task-badge .tl-badge-circle {
  fill: #c8ebb8;
  stroke: #a8db96;
}
.tl-pill.tl-range-selected .tl-pill-task-badge .tl-badge-num {
  fill: #143d2b;
}
.tl-pill.tl-range-selected .tl-pill-task-badge {
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
}

.tl-pill-task-badge.is-part-done .tl-badge-circle {
  fill: #b5e4c0;
  stroke: #5ea874;
}
.tl-pill-task-badge.is-part-done .tl-badge-num {
  fill: #113624;
}

/* Once all assigned tasks to that pill are checked: dark green circle following the app theme */
.tl-pill-task-badge.is-all-done .tl-badge-circle {
  fill: #173d35;
  stroke: #1d4d41;
}
.tl-pill-task-badge.is-all-done .tl-badge-num {
  fill: #ffffff;
}
.tl-pill-task-badge.is-all-done {
  filter: drop-shadow(0 1px 4px rgba(23, 61, 53, 0.35));
}

.tl-pill.tl-past .tl-pill-task-badge.is-all-done .tl-badge-circle {
  fill: #173d35;
  stroke: #173d35;
}
.tl-pill.tl-past .tl-pill-task-badge.is-all-done .tl-badge-num {
  fill: #ffffff;
}

.tl-pill.tl-now .tl-pill-task-badge.is-all-done .tl-badge-circle,
.tl-pill.tl-utilized .tl-pill-task-badge.is-all-done .tl-badge-circle,
.tl-pill.tl-range-selected .tl-pill-task-badge.is-all-done .tl-badge-circle {
  fill: #0f2b25;
  stroke: #b9d969;
}
.tl-pill.tl-now .tl-pill-task-badge.is-all-done .tl-badge-num,
.tl-pill.tl-utilized .tl-pill-task-badge.is-all-done .tl-badge-num,
.tl-pill.tl-range-selected .tl-pill-task-badge.is-all-done .tl-badge-num {
  fill: #b9d969;
}
.tl-pill.tl-now .tl-pill-task-badge.is-all-done,
.tl-pill.tl-utilized .tl-pill-task-badge.is-all-done,
.tl-pill.tl-range-selected .tl-pill-task-badge.is-all-done {
  filter: drop-shadow(0 0 5px rgba(185, 217, 105, 0.55));
}

.tl-pill.tl-finish .tl-pill-task-badge.is-all-done .tl-badge-circle {
  fill: #173d35;
  stroke: #f59e0b;
}
.tl-pill.tl-finish .tl-pill-task-badge.is-all-done .tl-badge-num {
  fill: #fef08a;
}
.tl-pill.tl-finish .tl-pill-task-badge.is-all-done {
  filter: drop-shadow(0 0 5px rgba(245, 158, 11, 0.45));
}

/* ---- Floating Task Popover on Time Pill Hover (Theme-Matched) ---- */
.tl-pill-task-popover {
  position: fixed;
  z-index: 10000;
  width: 360px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border: 1px solid #d8dfd8;
  border-radius: 12px;
  box-shadow: 0 16px 36px rgba(23, 61, 53, 0.18), 0 2px 8px rgba(23, 61, 53, 0.06);
  padding: 11px 13px;
  box-sizing: border-box;
  color: #17221e;
  font-family: inherit;
  pointer-events: auto;
  animation: tlPopFadeIn 0.15s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes tlPopFadeIn {
  from { opacity: 0; transform: translateY(-4px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.tl-tpop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 7px;
  margin-bottom: 8px;
  border-bottom: 1px solid #edf1eb;
}
.tl-tpop-title {
  font-size: 12px;
  font-weight: 800;
  color: #173d35;
  letter-spacing: -0.2px;
}
.tl-tpop-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eaf6ee;
  color: #275e50;
  border: 1px solid #c1e3ce;
  letter-spacing: 0.1px;
}
.tl-tpop-badge.is-all-done {
  background: #eaf6ee;
  color: #1e6347;
  border-color: #a3dbb5;
  font-weight: 800;
}
.tl-tpop-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tl-tpop-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 9px;
  border-radius: 8px;
  background: #fbfdfa;
  border: 1px solid #e1e7de;
  box-shadow: 0 1px 2px rgba(23, 61, 53, 0.03);
  transition: all 0.15s ease;
  position: relative;
  user-select: none;
}
.tl-tpop-item[draggable="true"] {
  cursor: grab;
}
.tl-tpop-item.tl-tpop-dragging {
  opacity: 0.42;
  background: rgba(185, 217, 105, 0.22) !important;
  border-color: #7fb069 !important;
  cursor: grabbing !important;
}
.tl-tpop-item.drag-above {
  box-shadow: 0 -2.5px 0 0 #275e50, 0 4px 10px rgba(23, 61, 53, 0.1) !important;
  border-color: #275e50 !important;
}
.tl-tpop-item.drag-below {
  box-shadow: 0 2.5px 0 0 #275e50, 0 4px 10px rgba(23, 61, 53, 0.1) !important;
  border-color: #275e50 !important;
}
.tl-tpop-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 20px;
  color: #9fb0a5;
  cursor: grab;
  flex: 0 0 auto;
  opacity: 0.45;
  transition: opacity 0.15s ease, color 0.15s ease;
  user-select: none;
  -webkit-user-select: none;
  margin-right: -2px;
  margin-top: 1px;
  border-radius: 3px;
}
.tl-tpop-drag-handle:focus-visible {
  outline: 2px solid #275e50;
  outline-offset: 1px;
  opacity: 1;
}
.tl-tpop-drag-handle svg {
  width: 11px;
  height: 11px;
  pointer-events: none;
}
.tl-tpop-item:hover .tl-tpop-drag-handle,
.tl-tpop-item:focus-within .tl-tpop-drag-handle {
  opacity: 0.85;
}
.tl-tpop-drag-handle:hover {
  opacity: 1;
  color: #173d35;
}
.tl-tpop-drag-handle:active {
  cursor: grabbing;
}
.tl-tpop-item:hover {
  background: #f4f8f1;
  border-color: #b9d2a8;
  box-shadow: 0 2px 6px rgba(23, 61, 53, 0.08);
  transform: translateY(-1px);
}
.tl-tpop-item.is-completed {
  background: #f4f7f2;
  border-color: #dbe4d7;
  opacity: 0.88;
}
.tl-tpop-item.is-completed:hover {
  opacity: 1;
  background: #edf3ec;
  border-color: #c4d7be;
}
.tl-tpop-item.is-completed .tl-tpop-subject {
  text-decoration: line-through;
  text-decoration-color: #7a9c86;
  color: #556c63;
}
.tl-tpop-item.is-subtask {
  border-left: 3.5px solid #275e50;
  background: #fbfdf9;
}
.tl-tpop-item.is-subtask:hover {
  background: #f3f7f0;
  border-left-color: #173d35;
}
.tl-tpop-item.is-subtask.is-completed {
  border-left-color: #7a9c86;
  background: #f4f7f2;
}
.tl-tpop-subtask-row {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex-wrap: wrap;
}
.tl-tpop-subtask-badge {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  padding: 1.5px 6px;
  border-radius: 4px;
  background: #eaf6ee;
  color: #1e6347;
  border: 1px solid #bce1c7;
  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  line-height: 1.25;
}
.tl-tpop-subtask-badge svg,
.tl-tpop-sub-icon {
  width: 9.5px;
  height: 9.5px;
  stroke: #1e6347;
  stroke-width: 2.2;
}
.tl-tpop-sub-title {
  font-size: 11.5px;
  font-weight: 700;
  color: #17221e;
  line-height: 1.35;
}
.tl-tpop-parent-task {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  color: #556c63;
  cursor: pointer;
  min-width: 0;
  line-height: 1.3;
  transition: color 0.15s ease;
}
.tl-tpop-parent-task:hover {
  color: #173d35;
}
.tl-tpop-parent-label {
  font-weight: 800;
  color: #7a8e84;
  text-transform: uppercase;
  font-size: 9px;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.tl-tpop-parent-subject {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 230px;
}
.tl-tpop-item.is-completed .tl-tpop-sub-title,
.tl-tpop-item.is-completed .tl-tpop-parent-subject {
  text-decoration: line-through;
  text-decoration-color: #7a9c86;
  color: #6a7f76;
}
.tl-tpop-item-main {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}
.tl-tpop-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 5px;
  background: #e7f2df;
  border: 1px solid #c2e0b8;
  color: #275e50;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  flex-shrink: 0;
  margin-top: 1px;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  user-select: none;
  box-shadow: 0 1px 2px rgba(23, 61, 53, 0.04);
}
.tl-tpop-num:hover {
  background: #d4eecb;
  border-color: #8dc37f;
  color: #1a4238;
  box-shadow: 0 1px 4px rgba(23, 61, 53, 0.14);
  transform: scale(1.08);
}
.tl-tpop-num:active {
  transform: scale(0.95);
}
.tl-tpop-num.is-checked {
  background: #173d35;
  border-color: #173d35;
  color: #b9d969;
  box-shadow: 0 1px 4px rgba(23, 61, 53, 0.25);
}
.tl-tpop-num.is-checked:hover {
  background: #24564b;
  border-color: #24564b;
  box-shadow: 0 2px 6px rgba(23, 61, 53, 0.3);
  transform: scale(1.08);
}
.tl-tpop-check-icon {
  width: 12px;
  height: 12px;
  stroke: #b9d969;
  stroke-width: 2.8;
  display: block;
}
.tl-tpop-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1 1 auto;
}
.tl-tpop-subject-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.tl-tpop-subject {
  font-size: 11.5px;
  font-weight: 700;
  color: #17221e;
  line-height: 1.35;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  cursor: pointer;
  transition: color 0.15s ease;
}
.tl-tpop-subject:hover {
  color: #275e50;
  text-decoration: underline;
}
.tl-tpop-time-badge {
  display: inline-flex;
  align-items: center;
  gap: 3.5px;
  padding: 2px 7.5px;
  height: 19px;
  box-sizing: border-box;
  border-radius: 999px;
  background: #eaf6ee;
  color: #173d35;
  border: 1px solid #bce1c7;
  font-size: 9.5px;
  font-weight: 700;
  white-space: nowrap;
  flex: 0 0 auto;
  letter-spacing: 0.1px;
  box-shadow: 0 1px 2px rgba(23, 61, 53, 0.04);
  margin: 0;
  transition: all 0.15s ease;
}
.tl-tpop-time-badge svg {
  width: 10px;
  height: 10px;
  stroke: #275e50;
  stroke-width: 2.2;
  flex-shrink: 0;
}
.tl-tpop-item:hover .tl-tpop-time-badge {
  background: #def0e2;
  border-color: #a4d2b2;
  color: #123029;
}
.tl-tpop-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tl-tpop-meta .origin-tag-chip {
  margin: 0;
}
.tl-tpop-meta .origin-tag-ext {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.tl-tpop-deassign-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: transparent;
  border: 1px solid transparent;
  color: #8a968e;
  cursor: pointer;
  flex-shrink: 0;
  padding: 0;
  transition: all 0.15s ease;
}
.tl-tpop-deassign-btn:hover {
  background: #fee2e2;
  border-color: #fca5a5;
  color: #b91c1c;
  transform: scale(1.06);
}
.tl-tpop-deassign-btn svg {
  width: 11px;
  height: 11px;
  stroke-width: 2.2;
}

/* ---- Full-Width 15-Minute Hour Progress & Flow Bars (Liquid Chronometer) ---- */
.tl-bars-cluster{display:flex;align-items:center;gap:5px;flex:1 1 auto;min-width:220px;height:24px;box-sizing:border-box}
.tl-bars-divider{display:inline-block;width:1px;height:16px;background:linear-gradient(180deg,transparent,#b9cfaf 30%,#b9cfaf 70%,transparent);margin:0 2px;flex:0 0 auto;border-radius:1px}
.tl-bars-wrap{display:flex;align-items:center;gap:4px;flex:1 1 0%;min-width:0;width:100%;height:24px;box-sizing:border-box;background:transparent;padding:0;border:none;box-shadow:none}

.tl-hour-bar{
  position:relative;
  overflow:hidden;
  flex:1 1 0%;
  min-width:28px;
  height:24px;
  box-sizing:border-box;
  border-radius:6px;
  border:1.5px solid #c9dcbe;
  background:linear-gradient(135deg,#fafdf8 0%,#edf4e8 100%);
  color:#35563c;
  cursor:pointer;
  padding:0 3px;
  margin:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  outline:none;
  user-select:none;
  -webkit-user-select:none;
  transition:transform .16s cubic-bezier(.22,1,.36,1),border-color .16s ease,box-shadow .16s ease,background .16s ease,color .16s ease;
  box-shadow:0 1px 2px rgba(23,61,53,.04);
}
.tl-hour-bar:hover{
  transform:translateY(-1px);
  border-color:#8eb57e;
  box-shadow:0 3px 8px rgba(23,61,53,.12);
}
.tl-hour-bar:active{
  transform:scale(.98);
}

/* 5m and 10m micro-ticks for chronometer precision */
.tl-bar-ticks{position:absolute;top:0;bottom:0;left:0;right:0;pointer-events:none;z-index:2}
.tl-tick{position:absolute;top:0;width:1px;height:4px;background:rgba(39,94,80,.2);border-radius:0 0 1px 1px}
.tl-tick.t1{left:33.33%}
.tl-tick.t2{left:66.66%}

/* Flowing time fill & beacon needle (bold, solid, prominent) */
.tl-bar-fill{
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  width:0%;
  pointer-events:none;
  background:linear-gradient(90deg,#78b261 0%,#9ecb52 100%);
  transition:width .95s linear;
  z-index:1;
  overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 0 rgba(0,0,0,.08);
}
.tl-hour-bar.is-full .tl-bar-fill{
  background:linear-gradient(90deg,#558d4a 0%,#79b75b 50%,#9ecb52 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.1);
}
.tl-hour-bar.is-active .tl-bar-fill{
  background:linear-gradient(90deg,
    #387654 0%,
    #529860 30%,
    #7ebf57 65%,
    #b9d969 100%
  );
  background-size:200% 100%;
  animation:tlStreamFlow 3.5s linear infinite;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -1px 0 rgba(0,0,0,.1);
}
@keyframes tlStreamFlow{
  0%{background-position:100% 0}
  100%{background-position:-100% 0}
}
.tl-bar-beacon{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  width:2.5px;
  background:#ffffff;
  box-shadow:0 0 8px 2px #b9d969,0 0 2px #ffffff;
  border-radius:2px;
  opacity:0;
  transition:opacity .25s ease;
}
.tl-hour-bar.is-active .tl-bar-beacon{
  opacity:1;
}

/* Center content & clean numbers (no circle badge) */
.tl-bar-center{
  position:relative;
  z-index:3;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  pointer-events:none;
  white-space:nowrap;
}
.tl-bar-num{
  font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;
  font-size:11px;
  font-weight:800;
  line-height:1;
  font-variant-numeric:tabular-nums;
  color:#173d35;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-shadow:0 1px 2px rgba(255,255,255,.85);
  transition:transform .15s ease,color .15s ease;
  pointer-events:none;
}
.tl-hour-bar:hover .tl-bar-num{
  transform:scale(1.15);
  color:#0f2e21;
}
.tl-hour-bar.is-full .tl-bar-num{
  color:#0e301d;
  text-shadow:0 1px 2px rgba(255,255,255,.75);
}
.tl-hour-bar.is-active .tl-bar-num{
  color:#092516;
  text-shadow:0 0 4px rgba(255,255,255,.95),0 1px 2px rgba(185,217,105,.85);
}

/* Checked checkbox state */
.tl-hour-bar.is-checked{
  background:linear-gradient(135deg,#1f5446 0%,#173d35 60%,#102d26 100%);
  border-color:#82e29e;
  color:#ecfdf2;
  box-shadow:0 2px 7px rgba(18,52,43,.3),inset 0 1px 0 rgba(255,255,255,.18);
  animation:tlCheckPulse .24s cubic-bezier(.22,1,.36,1);
}
@keyframes tlCheckPulse{
  0%{transform:scale(.96)}
  100%{transform:scale(1)}
}
.tl-hour-bar.is-checked:hover{
  background:linear-gradient(135deg,#266353 0%,#1c4a40 100%);
  border-color:#a7f3d0;
  box-shadow:0 4px 11px rgba(18,52,43,.38);
}
.tl-bar-checkbox{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  line-height:1;
}
.tl-bar-check-icon{
  width:15px;
  height:15px;
  display:block;
  filter:drop-shadow(0 1px 2px rgba(23,61,53,.25));
}

/* Configure & Setting Dock */
.tl-actions-dock{
  display:inline-flex;
  align-items:center;
  gap:3px;
  flex:0 0 auto;
  height:24px;
}
.tl-bar-live-btn{
  display:inline-flex;
  align-items:center;
  gap:3.5px;
  height:24px;
  padding:0 7.5px;
  border-radius:999px;
  background:linear-gradient(135deg,#173d35,#24564b);
  border:1px solid #173d35;
  color:#b9d969;
  font-size:9.5px;
  font-weight:800;
  letter-spacing:.3px;
  cursor:pointer;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease;
  flex:0 0 auto;
}
.tl-bar-live-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 2px 7px rgba(23,61,53,.25);
  background:linear-gradient(135deg,#1c4a40,#2c685b);
}
.tl-live-dot{
  display:inline-block;
  width:4px;
  height:4px;
  border-radius:50%;
  background:#b9d969;
  box-shadow:0 0 3px #b9d969;
  animation:tlLivePulse 1.5s ease-in-out infinite;
}
@keyframes tlLivePulse{
  0%,100%{opacity:1;transform:scale(1)}
  50%{opacity:.45;transform:scale(.75)}
}
.tl-settings-btn,
.tl-bar-settings-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:24px;
  height:24px;
  border-radius:6px;
  background:linear-gradient(135deg,#f4f8f1,#e6efe3);
  border:1px solid #c9dcbe;
  color:#426348;
  cursor:pointer;
  padding:0;
  transition:transform .15s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease,color .15s ease;
  flex:0 0 auto;
  box-shadow:0 1px 2px rgba(23,61,53,.04);
}
.tl-settings-btn:hover,
.tl-bar-settings-btn:hover{
  transform:translateY(-1px);
  background:#ddead6;
  border-color:#8fb57f;
  color:#153821;
  box-shadow:0 2px 6px rgba(23,61,53,.14);
}
.tl-settings-btn svg,
.tl-bar-settings-btn svg{
  width:12px;
  height:12px;
  stroke-width:2.1;
}

@media(max-width:1060px){
  .board-head-row{flex-wrap:wrap;gap:8px 12px}
  .board-progress-wrap{width:100%;min-width:100%;order:3}
  .board-tools{margin-left:auto}
  .board-progress-inline{width:100%;max-width:100%}
  .tl-bars-cluster{flex:1 1 auto;min-width:220px}
  .tl-pills-list{flex:0 1 auto;min-width:0;max-width:calc(100% - 240px);overflow-x:auto;-webkit-overflow-scrolling:touch}
}

/* Bar settings popover */
.tl-bar-settings-pop{position:fixed;z-index:12000;background:#ffffff;border:1px solid #d8dfd8;border-radius:12px;box-shadow:0 16px 36px rgba(23,61,53,.18);padding:13px;width:268px;animation:mxpop .14s ease;box-sizing:border-box}
.tl-bpop-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:7px;padding-bottom:6px;border-bottom:1px solid #edf1eb}
.tl-bpop-title{font-size:12px;font-weight:800;color:#173d35;letter-spacing:-.2px}
.tl-bpop-badge{font-size:10px;font-weight:700;color:#275e50;background:#eaf6ee;border:1px solid #c1e3ce;padding:2px 7px;border-radius:999px}
.tl-bpop-desc{font-size:11px;line-height:1.35;color:#4f6356;margin:0 0 10px 0}
.tl-bpop-options{display:flex;flex-direction:column;gap:5px;margin-bottom:9px}
.tl-bpop-opt{display:flex;align-items:center;gap:8px;padding:7px 9px;border-radius:8px;border:1px solid #e1e7de;background:#fbfdfa;color:#24352b;cursor:pointer;transition:background .12s ease,border-color .12s ease,transform .12s ease;text-align:left;width:100%;box-sizing:border-box}
.tl-bpop-opt:hover{background:#eef5e9;border-color:#b5ceaa;transform:translateX(2px)}
.tl-bpop-opt.active{background:linear-gradient(135deg,#173d35,#275e50);border-color:#173d35;color:#ffffff;box-shadow:0 2px 7px rgba(23,61,53,.2)}
.tl-bpop-num{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:5px;background:rgba(0,0,0,.06);font-size:11px;font-weight:800}
.tl-bpop-opt.active .tl-bpop-num{background:rgba(255,255,255,.2);color:#b9d969}
.tl-bpop-lbl{flex:1;font-size:11.5px;font-weight:700}
.tl-bpop-check{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;color:#b9d969}
.tl-bpop-check svg{width:14px;height:14px;stroke-width:3}
.tl-bpop-foot{padding-top:6px;border-top:1px solid #edf1eb}
.tl-bpop-hint{font-size:10px;line-height:1.35;color:#728578}

/* Activation code field (signup only) */
.activation-field .code-input{font-family:'DM Sans';letter-spacing:.22em;text-transform:uppercase;font-weight:600}
.activation-field .code-input::placeholder{letter-spacing:.04em;text-transform:none;font-weight:400;color:#a7b3aa}

/* ---- Hub dense tile view (40+ projects at a glance) ---- */
.ph-grid.tile-view{grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px}
.ph-tile{position:relative;display:flex;flex-direction:column;gap:6px;border:1px solid #e2e8df;border-radius:13px;background:linear-gradient(165deg,#ffffff 0%,#f4f8f1 100%);padding:11px 11px 10px;min-height:104px;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease;animation:phIn .3s ease backwards}
.ph-tile:hover{transform:translateY(-2px);border-color:#b9d2a8;box-shadow:0 8px 20px rgba(23,61,53,.1)}
.ph-tile.selected{border-color:#275e50;box-shadow:0 0 0 2px rgba(39,94,80,.25);background:linear-gradient(165deg,#f4faf3,#e9f4e4)}
.ph-tile.selectable:hover{border-color:#275e50}
.ph-tile.today-proj{background:linear-gradient(150deg,#fdf6e3,#f7ead0);border-color:#e5cf9d}
.ph-tile.today-proj.selected{border-color:#8a6d1f;box-shadow:0 0 0 2px rgba(138,109,31,.22)}
.ph-tile-top{display:flex;align-items:center;justify-content:space-between;min-height:20px}
.ph-tile-actions{display:flex;gap:2px;opacity:0;transition:opacity .15s ease}
.ph-tile:hover .ph-tile-actions,.ph-tile.selectable:hover .ph-tile-top .ph-check{opacity:1}
.ph-tile.selectable .ph-check{opacity:0;transition:opacity .15s ease}
.ph-tile.selectable:hover .ph-check,.ph-tile.selected .ph-check{opacity:1}
.icon-btn.sm{width:22px;height:22px;padding:0;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;box-shadow:0 1px 4px rgba(23,61,53,.08)}
.icon-btn.sm .icon{width:11px;height:11px}
.ph-tile-name{font-family:Manrope,sans-serif;font-size:13px;font-weight:800;letter-spacing:-.015em;line-height:1.28;color:#17221e;margin:0;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:33px;word-break:break-word}
.ph-tile-stats{display:flex;align-items:center;gap:5px;font:600 9.5px 'DM Sans';color:#7d8b81;letter-spacing:.03em;text-transform:uppercase}
.ph-tile-stats i{width:3px;height:3px;border-radius:50%;background:#b7c3ba;flex:0 0 auto}
.ph-tile-foot{margin-top:auto;display:flex;align-items:center;gap:6px}
.ph-tile-foot .ph-progress{flex:1;margin-top:0}
.ph-tile-pct{font:700 10.5px 'DM Sans';color:#275e50;min-width:30px;text-align:right}
.ph-tile .ph-today-tag{font-size:8.5px;padding:2px 6px}
@media(max-width:1280px){.ph-grid.tile-view{grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}}
@media(max-width:640px){.ph-grid.tile-view{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}.ph-tile{min-height:92px;padding:9px 9px 8px}.ph-tile-name{font-size:12px;min-height:30px}}

/* ---- In-tile edit form (tile view edit mode) ---- */
.ph-tile .ph-tile-edit { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ph-tile .ph-tile-edit .ph-edit-name { width: 100%; font-size: 12px; padding: 4px 6px; }
.ph-tile .ph-tile-edit .ph-edit-row { display: flex; justify-content: flex-end; gap: 6px; }
.ph-tile .ph-tile-edit .chip-btn { font-size: 11px; padding: 3px 10px; }

.dashboard-content > *{min-width:0}

/* favorites + tile density */
.ph-fav-badge{color:#d9a520;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
.ph-fav-badge .icon{width:13px;height:13px}
.ph-tile-actions .icon-btn.sm .icon,.ph-foot-actions .icon-btn .icon{width:13px;height:13px}
.icon-btn.fav-on{color:#d9a520;border-color:#f0e3c0;background:#fdf8ec}
.ph-tile-date{display:flex;align-items:center;gap:4px;margin-top:5px;font:500 9.5px 'DM Sans',sans-serif;color:#a0aaa3}
.ph-tile-date .icon{width:11px;height:11px;flex:0 0 auto}
@media(max-width:640px){.ph-tile-date{display:none}}
.ph-tile.fav-proj{background:linear-gradient(150deg,#fdf9e8,#f8efd6);border-color:#ecd9a0}.ph-tile.fav-proj:hover{border-color:#dcbf74;box-shadow:0 18px 40px rgba(190,150,60,.15)}.ph-card.fav-proj{background:linear-gradient(150deg,#fdf9e8,#f8efd6);border-color:#ecd9a0}.ph-card.fav-proj:hover{border-color:#dcbf74;box-shadow:0 18px 40px rgba(190,150,60,.18)}.ph-tile.fav-proj.selected{border-color:#8a6d1f;box-shadow:0 0 0 2px rgba(138,109,31,.22)}

/* ---- Card foot: one-line date, compact icons (favorite row added) ---- */
.ph-card-foot { flex-wrap:nowrap;min-width:0 }
.ph-card-foot .ph-foot-actions .icon-btn { width:24px;height:24px;border-radius:7px }
.ph-card-foot .ph-foot-actions .icon-btn .icon { width:12px;height:12px }
.ph-card-foot .ph-foot-actions { gap:3px;flex:0 0 auto }
.ph-card-foot .ph-pct { flex:0 0 auto }
.ph-card-foot .ph-date { white-space:nowrap;flex-shrink:0;margin-left:auto;min-width:0 }
.ph-card-foot .ph-date span { overflow:hidden;text-overflow:ellipsis }

/* Due date & time picker, chips, quick duration selector and remaining countdown */
.due-field-group{display:inline-flex;align-items:center;gap:4px;flex-wrap:wrap;max-width:100%;min-width:0}
.due-input{border:1px solid #d8dfd8;border-radius:7px;background:#fff;color:#5c6b62;font:600 11px 'DM Sans';padding:4px 2px 4px 6px;outline:none;cursor:pointer;max-width:116px;box-sizing:border-box}
.due-time-input{border:1px solid #d8dfd8;border-radius:7px;background:#fff;color:#5c6b62;font:600 11px 'DM Sans',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;padding:4px 4px 4px 6px;outline:none;cursor:pointer;box-sizing:border-box}
.due-time-input:focus{border-color:#5b806e;box-shadow:0 0 0 2px rgba(91,128,110,.13)}
.due-time-input::-webkit-calendar-picker-indicator{cursor:pointer;margin-left:0;margin-right:0;padding:0}

/* Quick duration selector & popover: time icon trigger + side-by-side Number & Unit picker */
.quick-due-wrapper{position:relative;display:inline-flex;align-items:center;flex:0 0 auto;min-width:0}
.due-quick-btn{width:24px;height:24px;border:1px solid #d8dfd8;border-radius:6px;background:#fff;color:#5c6b62;cursor:pointer;display:inline-grid;place-items:center;padding:0;transition:all .15s ease;flex-shrink:0;box-sizing:border-box}
.due-quick-btn:hover{border-color:#5b806e;color:#173d35;background:#f4f8f4}
.due-quick-btn.active{border-color:#275e50;background:#e7f2df;color:#173d35;box-shadow:0 0 0 2px rgba(39,94,80,.15)}
.due-quick-btn .icon{width:13px;height:13px;display:block}

/* Fibonacci Sequence Estimation Dropdown */
.fibonacci-select{height:24px;width:28px;min-width:28px;max-width:28px;border:1px solid #d8dfd8;border-radius:6px;background:#fff;color:#5c6b62;font:700 11px 'DM Sans',sans-serif;padding:0;text-align:center;text-align-last:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;cursor:pointer;box-sizing:border-box;flex:0 0 auto;transition:border-color .15s ease,box-shadow .15s ease,background .15s ease,color .15s ease}
.fibonacci-select:hover{border-color:#5b806e;background:#f7faf7;color:#173d35}
.fibonacci-select:focus{border-color:#5b806e;box-shadow:0 0 0 2px rgba(91,128,110,.13)}
.fibonacci-select.has-value{background:#f0f7ef;border-color:#a8cfb4;color:#1c523d;font-weight:700}
.fib-chip{display:inline-flex;align-items:center;padding:2px 7px;height:19px;box-sizing:border-box;border-radius:999px;font-size:10px;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:-.01em;background:#f0f7ef;color:#1c523d;border:1px solid #c2e0cb}

.quick-due-pop{position:fixed;z-index:100120;width:216px;background:#fff;border:1px solid #cbd7c9;border-radius:10px;box-shadow:0 10px 30px rgba(23,61,53,.18),0 2px 8px rgba(23,61,53,.08);padding:0;font-family:'DM Sans',-apple-system,BlinkMacSystemFont,sans-serif;animation:composerIn .15s ease;overflow:hidden;user-select:none;box-sizing:border-box}
.quick-due-head{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;background:#f7faf6;border-bottom:1px solid #e7eee5;font-size:11px;color:#2e5645}
.quick-due-head .quick-due-title{display:inline-flex;align-items:center;gap:4.5px;font-weight:700;letter-spacing:-.01em}
.quick-due-head .quick-due-title .icon{width:12px;height:12px;color:#275e50}
.quick-due-head .quick-due-close{border:none;background:none;font-size:16px;line-height:1;color:#7a8a80;cursor:pointer;padding:0 2px;transition:color .12s ease}
.quick-due-head .quick-due-close:hover{color:#173d35}
.quick-due-grid{display:flex;border-bottom:1px solid #eef2ea}
.quick-due-col{display:flex;flex-direction:column}
.quick-due-numbers-col{width:72px;border-right:1px solid #eef2ea;background:#fafcfa}
.quick-due-units-col{flex:1 1 auto;background:#fff}
.quick-due-col-head{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:#7d8e83;padding:5px 8px;background:#f2f6f1;border-bottom:1px solid #eef2ea;text-align:center}
.quick-due-wheel{height:168px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#d4ded3 transparent;padding:3px 0}
.quick-due-wheel::-webkit-scrollbar{width:4px}
.quick-due-wheel::-webkit-scrollbar-thumb{background:#d4ded3;border-radius:4px}
.quick-due-num-item{width:100%;height:28px;border:none;background:transparent;color:#2c3a33;font:600 12px 'DM Sans',sans-serif;font-variant-numeric:tabular-nums;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .1s ease,color .1s ease}
.quick-due-num-item:hover{background:#eef4ec;color:#173d35}
.quick-due-num-item.selected{background:#275e50;color:#fff;font-weight:800}
.quick-due-units-list{display:flex;flex-direction:column;padding:4px 6px;gap:2px;height:168px;overflow-y:auto}
.quick-due-unit-item{width:100%;height:25px;border:1px solid transparent;border-radius:6px;background:transparent;color:#3b4d44;font:600 11.5px 'DM Sans',sans-serif;display:flex;align-items:center;padding:0 8px;cursor:pointer;text-align:left;transition:all .12s ease}
.quick-due-unit-item:hover{background:#f0f6ee;border-color:#d6e4d2;color:#173d35}
.quick-due-unit-item.selected{background:#e7f2df;border-color:#b9d969;color:#173d35;font-weight:700}
.quick-due-foot{display:flex;align-items:center;justify-content:center;padding:6px 9px;background:#fcfdfb;border-top:1px solid #eef2ea}
.quick-due-preview{font-size:10px;font-weight:600;color:#516358;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:center;width:100%}

.due-chip{display:inline-flex;align-items:center;gap:3.5px;padding:2.5px 7.5px;height:19px;box-sizing:border-box;border-radius:999px;font-size:10px;font-weight:700;line-height:1;white-space:nowrap;letter-spacing:-.01em;margin:0;transition:all .15s ease;max-width:100%}
.due-chip .icon{width:11px;height:11px;stroke-width:2.2;flex-shrink:0}
.due-chip-sep{opacity:.5;font-weight:400;margin:0 1px}
.due-chip.due-normal{background:#f0f4ef;color:#2e5645;border:1px solid #d6e2d3}
.due-chip.due-soon{background:#fdf8e6;color:#7a5a0b;border:1px solid #fae69e}
.due-chip.due-urgent{background:#fff3ec;color:#a84214;border:1px solid #fed2b7}
.due-chip.due-overdue{background:#feebee;color:#b3261e;border:1px solid #f9c3c0;font-weight:800}
.due-chip.due-completed{background:#f2f5f2;color:#6b7c73;border:1px solid #d4ded4;opacity:.9}
.due-chip.due-completed .due-chip-struck{text-decoration:line-through;font-weight:600}
.tm-due-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px;max-width:100%}
.tm-due-row .due-input{flex:1 1 120px;min-width:110px}
.tm-due-row .due-time-input{flex:0 1 95px;min-width:85px}
.tm-due-row .quick-due-wrapper{flex:0 0 auto}
.tm-due-row .fibonacci-select{height:26px;width:30px;min-width:30px;max-width:30px;font-size:11.5px}

/* ---- Zoom and boundary protection: buttons and icons never overflow task card bounds ---- */
.task-card{max-width:100%;min-width:0;box-sizing:border-box;overflow-wrap:anywhere;word-break:break-word}
.task-card *{box-sizing:border-box}
.task-card .card-top,.task-card .card-chips,.task-card .card-meta,.task-card .card-actions,.task-card .subtask-footer,.task-card .subtask-list,.task-card .subtask{max-width:100%;min-width:0}
.task-card .card-action-tools{display:flex;align-items:center;gap:4px;flex-wrap:wrap;max-width:100%;min-width:0}
.task-card .card-move-nav{max-width:100%;box-sizing:border-box;flex-shrink:0}
.task-card .chip-icon,.task-card .allgood,.task-card .card-move-btn{flex-shrink:0;box-sizing:border-box}
.task-card .subtask-progress{flex:1 1 24px;min-width:16px;max-width:100%}
.task-card .tag-editor{max-width:100%;box-sizing:border-box}
.task-card .tag-editor-input{max-width:100%;box-sizing:border-box}
.task-card .card-edit-input,.task-card .card-edit-textarea{max-width:100%;box-sizing:border-box}

/* ---- Rich Links & YouTube Tab Links in Description ---- */
.task-description a.rich-link,.subtask-title a.rich-link,.tm-desc a.rich-link{color:#275e50;font-weight:600;text-decoration:underline;text-underline-offset:2px;word-break:break-word;transition:color .15s ease,background .15s ease}
.task-description a.rich-link:hover,.subtask-title a.rich-link:hover,.tm-desc a.rich-link:hover{color:#173d35;background:#e7f2df;border-radius:3px}
.task-description a.yt-tab-link,.subtask-title a.yt-tab-link,.tm-desc a.yt-tab-link{display:inline-flex;align-items:center;gap:5px;padding:2px 7px 2px 6px;margin:1px 0;border-radius:6px;background:rgba(255,0,51,.06);border:1px solid rgba(255,0,51,.2);color:#c41818;font-weight:600;font-size:.95em;line-height:1.35;text-decoration:none;vertical-align:baseline;max-width:100%;box-sizing:border-box;transition:all .15s ease}
.task-description a.yt-tab-link:hover,.subtask-title a.yt-tab-link:hover,.tm-desc a.yt-tab-link:hover{background:rgba(255,0,51,.12);border-color:rgba(255,0,51,.38);color:#9e0e0e;text-decoration:none;box-shadow:0 1px 4px rgba(255,0,51,.12)}
.yt-tab-link .yt-icon{width:15px;height:15px;flex-shrink:0;vertical-align:-2px}
.yt-tab-link .link-label{overflow-wrap:anywhere;word-break:break-word}

/* ==========================================================================
   MOBILE PHONE BROWSER COMPATIBILITY
   Strictly scoped to mobile viewports (<= 768px and hover:none)
   Desktop browser experience (> 768px) is 100% untouched and preserved.
   ========================================================================== */

@media (max-width: 768px) {
  /* Global layout safety: prevent unwanted horizontal document scroll */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    -webkit-text-size-adjust: 100%;
  }

  .dashboard-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* 1. Header Navigation Bar */
  .dashboard-nav {
    height: 56px !important;
    padding: 0 12px !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 8px !important;
    z-index: 40 !important;
  }
  .dashboard-nav.has-profile-open,
  .dashboard-nav:has(#profile-dropdown:not(.hidden)) {
    z-index: 20000 !important;
  }

  .nav-left {
    flex: 0 0 auto !important;
  }

  .nav-left .brand {
    gap: 7px !important;
    font-size: 12px !important;
  }

  .nav-left .brand-mark {
    width: 24px !important;
    height: 24px !important;
    font-size: 15px !important;
    border-radius: 7px !important;
  }

  .nav-left .brand-caption {
    display: none !important;
  }

  .nav-title {
    position: static !important;
    transform: none !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: min(150px, 36vw) !important;
    text-align: center !important;
    padding: 0 4px !important;
    pointer-events: none !important;
    display: block !important;
  }

  .nav-title h2 {
    font-size: 13px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    color: #f5f5ed !important;
  }

  .nav-title p {
    display: none !important;
  }

  .nav-actions {
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .signout {
    padding: 5px 9px !important;
    font-size: 11px !important;
    border-radius: 6px !important;
  }

  .profile-button {
    width: 28px !important;
    height: 28px !important;
  }

  .profile-avatar {
    width: 28px !important;
    height: 28px !important;
    font-size: 11px !important;
  }

  /* 2. Main Content Container */
  .dashboard-content.section-page {
    padding: 8px 10px 24px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    overflow-x: clip !important;
    position: relative !important;
    z-index: 20 !important;
  }

  /* 3. Board Header & Timeline */
  .board-header {
    padding: 14px 18px 12px !important;
    margin: 8px 0 12px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .board-head-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
    width: 100% !important;
  }

  .board-id-block {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  .board-name {
    font-size: 17px !important;
    line-height: 1.25 !important;
  }

  .board-tools {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    height: 26px !important;
    flex-wrap: nowrap !important;
  }

  .board-tools .icon-btn {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
    flex-shrink: 0 !important;
  }

  .board-progress-wrap {
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }

  .board-timeline {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    height: auto !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Horizontally scrollable hour pills row with smooth touch swipe */
  .tl-pills-list {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 4px !important;
    height: 32px !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
  }

  .tl-pills-list::-webkit-scrollbar {
    display: none !important;
  }

  .tl-pill {
    flex-shrink: 0 !important;
    min-width: 38px !important;
    height: 24px !important;
    padding: 0 6px !important;
    font-size: 10px !important;
  }

  /* 15m Bars Cluster */
  .tl-bars-cluster {
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 24px !important;
    box-sizing: border-box !important;
  }

  .tl-bars-divider {
    display: none !important;
  }

  .tl-bars-wrap {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 24px !important;
  }

  .tl-hour-bar {
    height: 24px !important;
    font-size: 11px !important;
  }

  .tl-bar-settings-btn,
  .tl-settings-btn {
    width: 22px !important;
    height: 22px !important;
    flex-shrink: 0 !important;
  }

  .board-progress-inline {
    width: 100% !important;
    margin: 2px 0 0 0 !important;
  }

  .board-metrics {
    gap: 5px !important;
    margin: 6px 0 0 0 !important;
    flex-wrap: wrap !important;
  }

  .metric {
    padding: 3px 8px !important;
  }

  .metric b {
    font-size: 12px !important;
  }

  .metric span {
    font-size: 8.5px !important;
  }

  /* 4. Tabs Row & Search */
  .tabs-row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding-bottom: 8px !important;
    margin-bottom: 12px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .tabs-row .board-tabs {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 3px !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 6px !important;
  }

  .tabs-row .board-tabs::-webkit-scrollbar {
    display: none !important;
  }

  .board-tab {
    padding: 5px 11px !important;
    font-size: 11px !important;
    flex-shrink: 0 !important;
  }

  .tabs-actions {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .tabs-actions .tabs-search-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .tabs-actions .board-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 32px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
  }

  .tabs-actions #open-archived-boards {
    flex: 0 0 32px !important;
    width: 32px !important;
    height: 32px !important;
    box-sizing: border-box !important;
  }

  .tabs-actions .tabs-buttons-row {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-sizing: border-box !important;
  }

  .tabs-actions #new-status,
  .tabs-actions #new-board {
    flex: 1 1 0 !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 34px !important;
    font: 600 12px 'DM Sans', sans-serif !important;
    padding: 0 10px !important;
    border-radius: 8px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }

  .tabs-actions #new-status[hidden],
  .tabs-actions #new-board[hidden],
  .tabs-actions #open-archived-boards[hidden],
  .tabs-actions [hidden] {
    display: none !important;
  }

  /* 5. Mobile Kanban Columns: Snap-scrolling native app experience */
  .kanban {
    display: flex !important;
    flex-direction: row !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-snap-type: x mandatory !important;
    padding: 2px 2px 14px 2px !important;
    scrollbar-width: thin;
    align-items: stretch !important;
  }

  .kanban-column {
    flex: 0 0 min(86vw, 320px) !important;
    min-width: min(86vw, 320px) !important;
    max-width: min(86vw, 320px) !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: normal !important;
    height: clamp(480px, calc(100vh - 230px), 800px) !important;
    padding: 10px !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
  }

  .task-list {
    -webkit-overflow-scrolling: touch !important;
    overflow-y: auto !important;
    padding: 0 2px 8px 0 !important;
  }

  /* 6. Task Cards & Touch Navigation */
  .task-card {
    padding: 10px !important;
    border-radius: 10px !important;
  }

  .task-card strong {
    font-size: 12.5px !important;
  }

  .task-card p {
    font-size: 11px !important;
  }

  .card-action-tools {
    gap: 5px !important;
    display: flex !important;
    align-items: center !important;
  }

  .chip-icon {
    width: 26px !important;
    height: 26px !important;
    border-radius: 7px !important;
  }

  .card-move-nav {
    opacity: 0.95 !important;
    height: 25px !important;
  }

  .card-move-btn {
    width: 21px !important;
    height: 21px !important;
  }

  .priority-select {
    max-width: 95px !important;
    font-size: 10.5px !important;
    padding: 3px 5px !important;
  }

  .due-input {
    max-width: 105px !important;
    font-size: 10.5px !important;
  }

  .subtask-delete {
    opacity: 0.8 !important;
    pointer-events: auto !important;
  }
  .sub-color-btn  {
    opacity: 0.8 !important;
    pointer-events: auto !important;
  }

  .subtask-drag-handle {
    opacity: 0.7 !important;
  }

  /* 7. Modals & Sheets */
  .modal-backdrop {
    padding: 10px !important;
    align-items: center !important;
    justify-content: center !important;
  }

  .modal-card,
  .task-modal-card,
  .boards-modal-card,
  .archived-card {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    padding: 16px 14px !important;
    border-radius: 14px !important;
    margin: auto 0 !important;
    box-sizing: border-box !important;
  }

  .task-modal-card .tm-topbar {
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }

  .task-modal-card .tm-title {
    font-size: 18px !important;
  }

  .task-modal-card .tm-meta {
    padding: 10px 12px !important;
    gap: 8px !important;
    margin-bottom: 12px !important;
  }

  .task-modal-card .tm-meta-row,
  .task-modal-card .tm-meta-row-trio {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  #task-modal-card .tm-prio-matrix-pair {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #task-modal-card .tm-due-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  #task-modal-card .tm-footer-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    gap: 8px !important;
    align-items: stretch;
  }
  #task-modal-card .tm-footer-actions .chip-icon {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    justify-content: center;
    white-space: normal;
    line-height: 1.25;
    padding: 8px 6px;
    min-height: 36px !important;
    font-size: 13px;
    overflow-wrap: anywhere;
  }

  /* 8. Popovers: clamped to screen width */
  .timeline-pop,
  .tl-bar-settings-pop,
  .quick-due-pop,
  .tl-pill-task-popover {
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box !important;
  }

  /* 9. Projects Hub */
  .projects-page {
    padding: 6px 8px 30px !important;
  }

  .ph-topbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }

  .ph-actions {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  .ph-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .ph-search input {
    width: 100% !important;
  }

  .ph-grid:not(.tile-view) {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  .ph-card {
    padding: 13px 14px !important;
    border-radius: 12px !important;
  }

  /* 10. Auth / Sign-in Screen */
  .shell {
    grid-template-columns: 1fr !important;
    min-height: 100vh !important;
  }

  .visual {
    min-height: auto !important;
    padding: 24px 20px 20px !important;
  }

  .visual h1 {
    font-size: clamp(26px, 7vw, 36px) !important;
    margin: 0 0 6px !important;
  }

  .visual .eyebrow {
    margin: 0 0 8px !important;
    font-size: 10px !important;
  }

  .panel {
    min-height: auto !important;
    padding: 24px 18px 36px !important;
    display: block !important;
  }

  .form-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
  }

  .mobile-brand {
    display: none !important;
  }

  .heading h2 {
    font-size: 24px !important;
    margin-bottom: 6px !important;
  }

  .heading p:last-child {
    font-size: 13px !important;
    margin-bottom: 22px !important;
  }

  .field {
    margin-bottom: 16px !important;
  }

  .field input {
    padding: 13px 14px !important;
    font-size: 16px !important; /* Prevents auto zoom-in on iOS Safari */
    box-sizing: border-box !important;
    width: 100% !important;
  }

  .primary {
    padding: 13px !important;
    font-size: 14px !important;
  }

  .provider {
    padding: 12px !important;
    font-size: 13px !important;
  }

  .legal {
    margin-top: 24px !important;
  }
}

@media (min-width: 480px) and (max-width: 768px) {
  .ph-grid:not(.tile-view) {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (hover: none) {
  .card-move-nav {
    opacity: 0.95 !important;
  }
  .subtask-delete {
    opacity: 0.8 !important;
    pointer-events: auto !important;
  }
  .sub-color-btn  {
    opacity: 0.8 !important;
    pointer-events: auto !important;
  }
  .subtask-drag-handle {
    opacity: 0.7 !important;
  }
}

/* ==========================================================================
   MOBILE PHONE BROWSER LANDSCAPE ORIENTATION
   Strictly scoped to mobile devices flipped horizontally:
   - Covers viewport heights <= 550px in landscape
   - Covers widths up to 1024px with height <= 600px
   Guarantees zero overflow, zero clipped elements, and full boundary containment.
   ========================================================================== */
@media (orientation: landscape) and (max-height: 550px),
       (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
  /* Prevent horizontal document spill */
  html, body {
    overflow-x: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .dashboard-shell {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  /* Compact nav in landscape so vertical height is conserved */
  .dashboard-nav {
    height: 44px !important;
    padding: 0 10px !important;
    position: relative !important;
    z-index: 40 !important;
  }
  .dashboard-nav.has-profile-open,
  .dashboard-nav:has(#profile-dropdown:not(.hidden)) {
    z-index: 20000 !important;
  }

  .dashboard-content.section-page {
    padding: 6px 12px 20px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: clip !important;
    position: relative !important;
    z-index: 20 !important;
  }

  /* Board Header: ultra-clean, contained within boundary */
  .board-header {
    padding: 12px 16px 10px !important;
    margin: 6px 0 10px !important;
    border-radius: 12px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Row 1: Title & Tools on the same row, tools never wrap or overflow */
  .board-head-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 9px 12px !important;
    width: 100% !important;
  }

  .board-id-block {
    flex: 0 0 auto !important;
    min-width: 0 !important;
    max-width: 55% !important;
  }

  .board-eyebrow {
    font-size: 8.5px !important;
    margin: 0 0 1px !important;
    letter-spacing: .08em !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  .board-eyebrow .icon {
    width: 11px !important;
    height: 11px !important;
  }

  .board-name {
    font-size: 15px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100% !important;
  }

  .board-tools {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin-left: auto !important;
    flex: 0 0 auto !important;
    height: 24px !important;
    flex-wrap: nowrap !important;
  }

  .board-tools .icon-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .board-tools .icon-btn .icon {
    width: 11px !important;
    height: 11px !important;
  }

  /* Row 2: Progress wrap with full-width stacked timeline */
  .board-progress-wrap {
    width: 100% !important;
    min-width: 0 !important;
    order: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }

  .board-timeline {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    width: 100% !important;
    height: auto !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Horizontally scrollable hour pills - touch swipeable, zero overflow */
  .tl-pills-list {
    display: flex !important;
    align-items: center !important;
    gap: 3.5px !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding: 3px 4px !important;
    height: 30px !important;
    box-sizing: border-box !important;
    flex-wrap: nowrap !important;
  }

  .tl-pills-list::-webkit-scrollbar {
    display: none !important;
  }

  .tl-pill {
    flex-shrink: 0 !important;
    min-width: 36px !important;
    height: 24px !important;
    padding: 0 6px !important;
    font-size: 9.5px !important;
  }

  .tl-pill .tl-time {
    font-size: 9.5px !important;
  }

  /* 15m Bars Cluster: full width, spacious bars, zero overlap, dock within border */
  .tl-bars-cluster {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: 24px !important;
    box-sizing: border-box !important;
  }

  .tl-bars-divider {
    display: none !important;
  }

  .tl-bars-wrap {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 24px !important;
    gap: 4px !important;
  }

  .tl-hour-bar {
    flex: 1 1 0% !important;
    min-width: 0 !important;
    height: 24px !important;
    font-size: 10.5px !important;
    padding: 0 2px !important;
    border-radius: 6px !important;
  }

  .tl-actions-dock {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    flex: 0 0 auto !important;
    height: 24px !important;
  }

  .tl-bar-live-btn {
    height: 24px !important;
    padding: 0 6px !important;
    font-size: 9px !important;
    gap: 3px !important;
  }

  .tl-bar-settings-btn,
  .tl-settings-btn {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  .tl-bar-settings-btn svg,
  .tl-settings-btn svg {
    width: 11.5px !important;
    height: 11.5px !important;
  }

  /* Full-width completion progress bar */
  .board-progress-inline {
    width: 100% !important;
    margin: 2px 0 0 0 !important;
    gap: 6px !important;
  }

  .board-progress {
    height: 5px !important;
  }

  .progress-pct {
    font-size: 10px !important;
    min-width: 28px !important;
  }

  /* Metrics & filters row: compact and horizontally scrollable with touch */
  .board-metrics {
    gap: 8px !important;
    margin: 8px 0 0 0 !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: none !important;
    padding-bottom: 2px !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .board-metrics::-webkit-scrollbar {
    display: none !important;
  }

  .metric {
    padding: 4px 10px !important;
    gap: 4.5px !important;
    flex-shrink: 0 !important;
  }

  .metric b {
    font-size: 11.5px !important;
  }

  .metric span {
    font-size: 8px !important;
  }

  .metric-icon {
    width: 11.5px !important;
    height: 11.5px !important;
  }

  .filter-trigger {
    padding: 4px 10px !important;
    font-size: 10px !important;
    height: 23px !important;
    flex-shrink: 0 !important;
  }
}

/* ---- Global Today Board View ---- */
.board-tabs-global-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.board-tab.today.is-global {
  background: linear-gradient(135deg, #1f4a35, #173d35);
  border-color: #2d6b4f;
  color: #b9d969;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(23, 61, 53, 0.18);
  padding: 6px 15px;
}

.global-today-badge {
  font-size: 11.5px;
  color: #506158;
  background: rgba(23, 61, 53, 0.07);
  padding: 4px 11px;
  border-radius: 999px;
  font-weight: 600;
  border: 1px solid rgba(23, 61, 53, 0.1);
}

.inline-proj-select-wrap {
  margin-bottom: 8px;
  padding: 3px 0 5px;
}

.inline-proj-label {
  font-size: 11.5px;
  color: #506158;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}

.inline-proj-select {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #cbd7c9;
  background: #fff;
  color: #173d35;
  font-weight: 600;
  cursor: pointer;
  outline: none;
}

.inline-proj-select:focus {
  border-color: #5b806e;
  box-shadow: 0 0 0 2px rgba(91, 128, 110, 0.15);
}

.board-name.is-static {
  cursor: default !important;
  border-bottom: none !important;
}

/* ---- Airtable-Style Table View ---- */
.board-tools .icon-btn.is-active {
  background: #173d35;
  color: #ffffff;
  border-color: #173d35;
}

.kanban.is-table-view,
.kanban:has(.at-table-container) {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: visible !important;
  padding-bottom: 0 !important;
}

.at-table-container {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #dce4dc;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(23, 61, 53, 0.04);
  margin-top: 12px;
  margin-bottom: 24px;
}

.at-table {
  min-width: 100%;
  width: max-content;
  display: flex;
  flex-direction: column;
}

.at-header-row,
.at-row,
.at-inline-add-row {
  display: grid;
  grid-template-columns: var(--at-grid-cols, 24px minmax(160px, 2fr) minmax(120px, 1.4fr) 46px 95px 115px 85px 125px 145px 46px minmax(90px, 1fr) 76px 72px);
  align-items: center;
  column-gap: 8px;
  padding: 8px 14px;
  box-sizing: border-box;
  width: 100%;
}

.at-header-row {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f4f7f4;
  border-bottom: 1px solid #d8dfd8;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #55685d;
}

.at-th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  user-select: none;
  position: relative;
  transition: background 0.15s ease, box-shadow 0.15s ease;
  border-radius: 4px;
  padding: 2px 8px 2px 4px;
  min-width: 0;
}

.at-th[draggable="true"] {
  cursor: grab;
}

.at-th[draggable="true"]:active {
  cursor: grabbing;
}

.at-th.is-resizing {
  background: #e7f2df !important;
}

.at-col-resizer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 10px;
  cursor: col-resize;
  z-index: 6;
  user-select: none;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: none;
}

.at-col-resizer::after {
  content: '';
  position: absolute;
  right: 1px;
  top: 3px;
  bottom: 3px;
  width: 2px;
  background: transparent;
  border-radius: 1px;
  transition: background 0.15s ease, width 0.15s ease;
}

.at-th:hover .at-col-resizer::after,
.at-col-resizer:hover::after {
  background: #7fb069;
}

.at-col-resizer.is-active::after,
.at-th.is-resizing .at-col-resizer::after {
  background: #173d35 !important;
  width: 3px !important;
  box-shadow: 0 0 6px rgba(23, 61, 53, 0.4);
}

body.is-col-resizing,
.at-table.is-col-resizing {
  cursor: col-resize !important;
  user-select: none !important;
}

.at-col-resize-tooltip {
  position: fixed;
  z-index: 99999;
  background: #173d35;
  color: #ffffff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  pointer-events: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.at-th.is-dragging {
  opacity: 0.4;
  background: #e7f2df !important;
}

.at-th.is-drop-left {
  box-shadow: inset 3px 0 0 #173d35 !important;
  background: rgba(23, 61, 53, 0.08) !important;
}

.at-th.is-drop-right {
  box-shadow: inset -3px 0 0 #173d35 !important;
  background: rgba(23, 61, 53, 0.08) !important;
}

.at-th-inner {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  min-width: 0;
}

.at-th-grip {
  display: inline-flex;
  align-items: center;
  color: #a4b3a9;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.at-th:hover .at-th-grip {
  opacity: 0.85;
}

.at-th-grip .icon {
  width: 10px;
  height: 10px;
}

.at-th-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
}

.at-th-nav {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: auto;
  opacity: 0;
  transition: opacity 0.15s ease;
  flex-shrink: 0;
}

.at-th:hover .at-th-nav {
  opacity: 1;
}

.at-th-nav-btn {
  border: none;
  background: transparent;
  color: #708277;
  font-size: 13px;
  line-height: 1;
  padding: 1px 3px;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.12s ease;
}

.at-th-nav-btn:hover {
  background: #e4eee6;
  color: #173d35;
  font-weight: 800;
}

.at-reset-cols-btn {
  border: 1px solid #cbdad0;
  border-radius: 6px;
  background: #f5f9f6;
  color: #3b5c4f;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  box-shadow: 0 1px 2px rgba(23, 61, 53, 0.05);
}

.at-reset-cols-btn:hover {
  background: #e7f2df;
  border-color: #7fb069;
  color: #173d35;
  transform: rotate(180deg);
  box-shadow: 0 2px 5px rgba(23, 61, 53, 0.12);
}

.at-reset-cols-btn:active {
  transform: rotate(360deg) scale(0.92);
}

.at-reset-cols-btn .icon {
  width: 13px;
  height: 13px;
  stroke-width: 2.2;
}

.at-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: #edf3ef;
  border-top: 1px solid #dce5dc;
  border-bottom: 1px solid #dce5dc;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease;
}

.at-group-header:hover {
  background: #e4ece6;
}

.at-group-toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4a5c51;
  transition: transform 0.2s ease;
  width: 18px;
  height: 18px;
  flex: 0 0 18px;
}

.at-group-toggle .icon {
  width: 14px;
  height: 14px;
  color: #4a5c51;
}

.at-group.is-collapsed .at-group-toggle,
.at-group-toggle.is-collapsed {
  transform: rotate(-90deg);
}

.at-group-title {
  font-size: 13px;
  font-weight: 700;
  color: #173d35;
  display: flex;
  align-items: center;
  gap: 6px;
}

.at-group-count {
  font-size: 11px;
  font-weight: 600;
  color: #55685d;
  background: #ffffff;
  border: 1px solid #d0d9d1;
  border-radius: 999px;
  padding: 2px 8px;
}

.at-btn-add-left {
  background: #ffffff;
  border: 1px solid #c8d4c9;
  border-radius: 6px;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #173d35;
  cursor: pointer;
  transition: all 0.15s ease;
  flex: 0 0 22px;
  padding: 0;
  margin-right: 2px;
}

.at-btn-add-left:hover {
  background: #173d35;
  color: #ffffff;
  border-color: #173d35;
  transform: scale(1.08);
}

.at-btn-add-left .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.2;
}

/* Table view status header action icons (delete-all / archive-all) — reuse kanban handlers via data attrs */
.at-status-act {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: 6px;
  transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease, transform 0.15s ease;
}

.at-status-act .icon {
  width: 12px;
  height: 12px;
}

.at-row {
  border-bottom: 1px solid #edf1ed;
  background: #ffffff;
  transition: background 0.12s ease;
  font-size: 12.5px;
  color: #21332a;
}

.at-row[draggable="true"] {
  cursor: default;
}

.at-row.at-row-dragging {
  opacity: 0.45;
  background: #f0f7ef !important;
}

.at-row.drag-above {
  box-shadow: inset 0 3px 0 0 #275e50 !important;
}

.at-row.drag-below {
  box-shadow: inset 0 -3px 0 0 #275e50 !important;
}

.at-group.drag-over {
  background: rgba(39, 94, 80, 0.04);
}

.at-group.drag-over .at-group-header {
  border-color: #275e50;
  color: #173d35;
}

.at-group.drag-over .at-group-rows {
  outline: 2px dashed #5b806e;
  outline-offset: -2px;
}

.at-row:hover {
  background: #f7faf7;
}

.at-td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: flex;
  align-items: center;
  min-width: 0;
}

.at-col-drag {
  color: #b0beb5;
  justify-content: center;
  opacity: 0.6;
  cursor: grab;
  user-select: none;
  transition: color 0.15s ease, opacity 0.15s ease;
}

.at-col-drag:hover {
  opacity: 1;
  color: #275e50;
}

.at-col-drag:active {
  cursor: grabbing;
}

.at-subject-cell {
  display: flex !important;
  align-items: center !important;
  gap: 7px !important;
  width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  padding: 4px 0 !important;
  box-sizing: border-box !important;
}

.at-col-subject {
  overflow: hidden !important;
}

.at-subject-cell .origin-tag-chip {
  flex-shrink: 0 !important;
  transform: none !important;
}

.at-subject-cell .origin-tag-chip:hover {
  transform: none !important;
}

.at-subject-cell .origin-tag-chip.active {
  outline: none !important;
  border-color: #173d35 !important;
  box-shadow: 0 0 0 1.8px #173d35, 0 1px 4px rgba(23, 61, 53, 0.2) !important;
  font-weight: 700 !important;
  transform: none !important;
}

.at-subject-cell .complete-box {
  flex-shrink: 0;
}

.allgood.at-allgood {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid #d8dfd8;
  border-radius: 6px;
  background: #ffffff;
  color: #8a968e;
  cursor: pointer;
  padding: 0;
  margin: 0;
  position: relative;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.allgood.at-allgood input {
  position: absolute;
  inset: 0;
  opacity: 0;
  margin: 0;
  cursor: pointer;
  width: 100%;
  height: 100%;
}

.allgood.at-allgood .icon {
  width: 12px;
  height: 12px;
  stroke-width: 2.5;
  pointer-events: none;
}

.allgood.at-allgood:hover {
  border-color: #7fb069;
  color: #275e50;
  background: #f6faf1;
  transform: scale(1.06);
}

.allgood.at-allgood.on {
  box-shadow: 0 1px 3px rgba(127, 176, 105, 0.28);
}

.allgood.at-allgood.on .icon {
  stroke: #173d35;
}

.at-subject-cell .at-today-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid #d8dfd8;
  border-radius: 6px;
  background: #ffffff;
  color: #94a3b8;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.at-subject-cell .at-today-btn:hover {
  border-color: #f59e0b;
  color: #d97706;
  background: #fefce8;
  transform: scale(1.08);
}

.at-subject-cell .at-today-btn.active {
  background: #fef3c7 !important;
  border-color: #f59e0b !important;
  color: #d97706 !important;
  box-shadow: 0 1px 3px rgba(245, 158, 11, 0.28);
}

.at-subject-cell .at-today-btn .icon {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.at-subject-cell .at-maximize-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  border: 1px solid #d8dfd8;
  border-radius: 6px;
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
  padding: 0;
  margin: 0;
  transition: all 0.15s ease;
  box-sizing: border-box;
}

.at-subject-cell .at-maximize-btn:hover {
  border-color: #7fb069;
  color: #173d35;
  background: #f6faf1;
  transform: scale(1.08);
}

.at-subject-cell .at-maximize-btn .icon {
  width: 11px;
  height: 11px;
  pointer-events: none;
}

.at-subject-text {
  font-weight: 600;
  color: #173d35;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.12s ease;
  flex: 1 1 auto;
  min-width: 0;
}

.at-subject-text:hover {
  background: #eef4f0;
  color: #0d2923;
}

.at-subject-text.completed {
  text-decoration: line-through;
  color: #819488;
}

.at-edit-subject,
.at-edit-desc {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  font: inherit;
  font-size: 12px;
  border: 1px solid #173d35;
  border-radius: 6px;
  background: #ffffff;
  outline: none;
  box-shadow: 0 0 0 2px rgba(23, 61, 53, 0.14);
}

.at-desc-cell {
  width: 100%;
  overflow: hidden;
}

.at-desc-cell-inner {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
  cursor: pointer;
}

.at-desc-cell-inner .at-desc-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 4px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.at-desc-cell-inner:hover .at-desc-text,
.at-desc-cell-inner .at-desc-text:hover {
  background: #eef4f0;
  color: #0d2923;
}

.at-desc-cell-inner .at-edit-desc {
  flex: 1 1 auto;
  min-width: 0;
}

.at-desc-expand-btn {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border: 1px solid #d4ded7;
  border-radius: 5px;
  background: #ffffff;
  color: #537063;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: all 0.15s ease;
  box-shadow: 0 1px 2px rgba(23, 61, 53, 0.04);
}

.at-desc-expand-btn:hover {
  background: #e7f2df;
  border-color: #7fb069;
  color: #173d35;
  transform: scale(1.08);
  box-shadow: 0 2px 4px rgba(23, 61, 53, 0.1);
}

.at-desc-expand-btn .icon {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.at-desc-text {
  color: #55685d;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  display: block;
  transition: background 0.12s ease;
  flex: 1 1 auto;
  min-width: 0;
}

.at-desc-text:hover {
  background: #eef4f0;
  color: #173d35;
}

.at-desc-text.at-placeholder {
  color: #a4b3a9;
  font-style: italic;
}

.at-placeholder {
  color: #abbcb2;
  font-size: 12px;
}

.at-today-btn {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 1px solid #d0dcd3;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #8c9e94;
  cursor: pointer;
  transition: all 0.15s ease;
}

.at-today-btn:hover {
  border-color: #f59e0b;
  color: #f59e0b;
}

.at-today-btn.active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #b45309;
}

.at-age-chip {
  font-size: 11px;
  line-height: 1;
}

.at-cell-select {
  height: 24px;
  padding: 0 6px;
  border: 1px solid #d8dfd8;
  border-radius: 6px;
  font: 600 11px 'DM Sans', sans-serif;
  background: #ffffff;
  color: #275e50;
  cursor: pointer;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  max-width: 100%;
}

.at-cell-select:hover {
  border-color: #173d35;
}

.at-cell-select:focus {
  border-color: #173d35;
  box-shadow: 0 0 0 2px rgba(23, 61, 53, 0.12);
}

.at-prio-select.tag-red {
  border-color: #fca5a5;
  color: #991b1b;
  background: #fef2f2;
}

.at-prio-select.tag-amber {
  border-color: #fcd34d;
  color: #92400e;
  background: #fffbeb;
}

.at-prio-select.tag-emerald {
  border-color: #a7f3d0;
  color: #065f46;
  background: #ecfdf5;
}

.at-prio-select.tag-slate {
  border-color: #cbd5e1;
  color: #334155;
  background: #f8fafc;
}

/* ---- Table View Matrix Multi-Select ---- */
.at-col-matrix,
.at-col-datetime,
.at-col-due {
  overflow: visible !important;
}

.at-matrix-dd {
  position: relative;
  width: 100%;
  max-width: 100%;
}

.at-matrix-trigger {
  width: 100%;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  padding: 0 6px;
  border: 1px solid #d8dfd8;
  border-radius: 6px;
  background: #ffffff;
  color: #275e50;
  font: 600 11px 'DM Sans', sans-serif;
  cursor: pointer;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  box-sizing: border-box;
}

.at-matrix-trigger:hover {
  border-color: #173d35;
  box-shadow: 0 0 0 2px rgba(23, 61, 53, 0.08);
}

.at-matrix-trigger.has-value {
  background: #fdfdfc;
  border-color: #cbd7c9;
}

.at-matrix-trigger .matrix-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
}

.at-matrix-trigger .matrix-label .mx-flag {
  font-size: 10px;
  padding: 1px 6px;
}

.at-matrix-trigger .icon {
  width: 11px;
  height: 11px;
  color: #8a968e;
  flex: 0 0 auto;
  transition: transform 0.18s ease;
}

.at-matrix-dd.open .at-matrix-trigger .icon {
  transform: rotate(180deg);
}

.at-matrix-empty {
  color: #a3b0a8;
  font-weight: 500;
}

.at-matrix-pop {
  min-width: 190px;
  padding: 6px;
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(23, 61, 53, 0.16);
  border: 1px solid #d8dfd8;
  background: #fff;
  z-index: 12500;
}

.at-matrix-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 6px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid #edf1ed;
  font-size: 9.5px;
  font-weight: 800;
  color: #718078;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.at-matrix-pop-clear {
  background: none;
  border: none;
  padding: 0;
  font: 700 10.5px 'DM Sans', sans-serif;
  color: #b3261e;
  cursor: pointer;
}

.at-matrix-pop-clear:hover {
  text-decoration: underline;
}

.at-datetime-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
}

.at-datetime-wrap .quick-due-wrapper {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}

.at-datetime-wrap .due-quick-btn {
  width: 24px;
  height: 24px;
  border: 1px solid #d8dfd8;
  border-radius: 6px;
  background: #ffffff;
  color: #5c6b62;
  cursor: pointer;
  display: inline-grid;
  place-items: center;
  padding: 0;
  transition: all 0.15s ease;
  flex-shrink: 0;
  box-sizing: border-box;
}

.at-datetime-wrap .due-quick-btn:hover {
  border-color: #5b806e;
  color: #173d35;
  background: #f4f8f4;
}

.at-datetime-wrap .due-quick-btn.active {
  border-color: #275e50;
  background: #e7f2df;
  color: #173d35;
  box-shadow: 0 0 0 2px rgba(39, 94, 80, 0.15);
}

.at-datetime-wrap .due-quick-btn .icon {
  width: 13px;
  height: 13px;
  display: block;
}

.at-due-cell-inner {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  cursor: pointer;
}

.at-due-empty {
  color: #a3b0a8;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}

.at-due-empty:hover {
  background: #eef4ec;
  color: #173d35;
}

.at-cell-date,
.at-cell-time {
  height: 24px;
  border: 1px solid #d8dfd8;
  border-radius: 6px;
  padding: 0 4px;
  font: 500 11px 'DM Sans', sans-serif;
  color: #275e50;
  background: #ffffff;
  outline: none;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
  box-sizing: border-box;
}

.at-cell-date:focus,
.at-cell-time:focus {
  border-color: #173d35;
  box-shadow: 0 0 0 2px rgba(23, 61, 53, 0.12);
}

.at-cell-date {
  width: 94px;
  min-width: 92px;
}

.at-cell-time {
  width: 98px;
  min-width: 96px;
}

.at-size-select {
  height: 24px;
  width: 28px;
}

/* Zero-clipping Tag Column & Wrap in Table View */
.at-col-tags {
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
}

.at-tags-wrap {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  padding: 5px 3px !important;
  min-height: 32px !important;
  height: 100% !important;
  box-sizing: border-box !important;
  flex-wrap: nowrap !important;
  scrollbar-width: none !important;
  -ms-overflow-style: none !important;
}

.at-tags-wrap::-webkit-scrollbar {
  display: none !important;
}

/* Zero-Displacement Tag Pill in Table View */
.at-tag-chip {
  display: inline-flex !important;
  align-items: center !important;
  height: 20px !important;
  line-height: 18px !important;
  padding: 0 5px 0 8px !important;
  gap: 3.5px !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  border-radius: 999px !important;
  box-sizing: border-box !important;
  transform: none !important;
  flex-shrink: 0 !important;
  position: relative !important;
  margin: 0 !important;
  cursor: pointer !important;
  transition: border-color 0.14s ease, box-shadow 0.14s ease, background 0.14s ease !important;
}

.at-tag-chip:hover {
  transform: none !important;
  box-shadow: 0 1px 4px rgba(23, 61, 53, 0.15) !important;
}

/* Active Filtered Tag Pill: Capsule-compliant border and shadow without clipping */
.at-tag-chip.active {
  outline: none !important;
  border-color: #173d35 !important;
  box-shadow: 0 0 0 1.8px #173d35, 0 1px 4px rgba(23, 61, 53, 0.22) !important;
  font-weight: 700 !important;
  transform: none !important;
  z-index: 2 !important;
}

.at-tag-chip.active:hover {
  transform: none !important;
  box-shadow: 0 0 0 1.8px #173d35, 0 1px 5px rgba(23, 61, 53, 0.28) !important;
}

.at-tag-filter-btn {
  background: none !important;
  border: none !important;
  padding: 0 !important;
  font: inherit !important;
  color: inherit !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  line-height: 18px !important;
  vertical-align: middle !important;
}

.at-tag-del-btn {
  background: none !important;
  border: none !important;
  padding: 0 1px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  color: inherit !important;
  opacity: 0.55 !important;
  cursor: pointer !important;
  border-radius: 3px !important;
  transition: opacity 0.12s ease, background 0.12s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: 1px !important;
}

.at-tag-del-btn:hover {
  opacity: 1 !important;
  background: rgba(0, 0, 0, 0.14) !important;
}

.at-add-tag-btn {
  border: 1px dashed #c0ccc2 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #6b7c73 !important;
  font: 600 10px 'DM Sans', sans-serif !important;
  padding: 1.5px 7px !important;
  height: 20px !important;
  line-height: 16px !important;
  box-sizing: border-box !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  transition: all 0.12s ease !important;
}

.at-add-tag-btn:hover {
  border-color: #173d35 !important;
  color: #173d35 !important;
  background: #e7f2df !important;
}

.at-tag-inline-input {
  height: 20px !important;
  width: 70px !important;
  border: 1px solid #173d35 !important;
  border-radius: 999px !important;
  padding: 0 8px !important;
  font: 600 10px 'DM Sans', sans-serif !important;
  outline: none !important;
  box-sizing: border-box !important;
  box-shadow: 0 0 0 2px rgba(23, 61, 53, 0.14) !important;
  flex-shrink: 0 !important;
}

.at-prio-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
}

.at-matrix-tag {
  font-weight: 600;
}

.at-datetime-pill {
  font-size: 11.5px;
  color: #405247;
  font-variant-numeric: tabular-nums;
}

.at-datetime-pill small {
  color: #6e8075;
  margin-left: 2px;
}

.at-size-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 22px;
  border-radius: 5px;
  border: 1px solid #cbd7cb;
  font-size: 11px;
  font-weight: 700;
  color: #55685d;
  background: #f9fbf9;
}

.at-size-tag.has-value {
  border-color: #173d35;
  background: #173d35;
  color: #ffffff;
}

/* duplicate .at-tags-wrap removed */

.at-subtasks-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  border-radius: 6px;
  border: 1px solid #d0dcd3;
  background: #ffffff;
  font-size: 11.5px;
  font-weight: 600;
  color: #2b4036;
  cursor: pointer;
  transition: all 0.15s ease;
}

.at-subtasks-pill:hover {
  border-color: #173d35;
  background: #f0f6f2;
  color: #173d35;
}

.at-subtasks-pill.done {
  background: #e7f2df;
  border-color: #7fb069;
  color: #173d35;
}

.at-subtasks-pill.empty {
  color: #8c9e94;
  border-color: #e0e8e2;
}

.at-col-actions {
  justify-content: center;
  padding: 0 4px;
}

.at-row-actions {
  display: flex;
  align-items: center;
  gap: 4px;
  justify-content: center;
}

.at-row-actions .icon-btn.mini {
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}

.at-row-actions .icon-btn.mini .icon {
  width: 12px;
  height: 12px;
}

.at-subtasks-popover {
  position: fixed;
  z-index: 13000;
  min-width: 260px;
  max-width: 340px;
  background: #ffffff;
  border: 1px solid #cfdad2;
  border-radius: 10px;
  box-shadow: 0 12px 36px rgba(23, 61, 53, 0.18);
  padding: 12px 14px;
  font-family: 'DM Sans', sans-serif;
  animation: atPopFadeIn 0.15s ease;
}

@keyframes atPopFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.at-pop-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 8px;
}

.at-pop-title {
  font-size: 12px;
  font-weight: 700;
  color: #173d35;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.at-pop-count {
  font-size: 11px;
  font-weight: 600;
  color: #55685d;
}

.at-pop-close {
  border: none;
  background: transparent;
  color: #708277;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  border-radius: 4px;
  margin-left: auto;
  transition: all 0.12s ease;
}

.at-pop-close:hover {
  background: #f0f4f1;
  color: #173d35;
}

.at-pop-close .icon {
  width: 12px;
  height: 12px;
}

.at-pop-bar {
  height: 4px;
  background: #e5ece6;
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 10px;
}

.at-pop-bar-fill {
  height: 100%;
  background: #173d35;
  transition: width 0.2s ease;
}

.at-pop-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}

.at-sub-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  font-size: 12px;
  color: #21332a;
  line-height: 1.35;
  padding: 3px 6px;
  border-radius: 6px;
  user-select: none;
  transition: background 0.12s ease;
  position: relative;
}

.at-sub-item[draggable="true"] {
  cursor: grab;
}

.at-sub-item.at-sub-dragging {
  opacity: 0.45;
  background: rgba(185, 217, 105, 0.25) !important;
  cursor: grabbing;
}

.at-sub-item.drag-above {
  box-shadow: 0 -2px 0 0 #275e50 !important;
}

.at-sub-item.drag-below {
  box-shadow: 0 2px 0 0 #275e50 !important;
}

.at-sub-drag-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: #9fb0a5;
  cursor: grab;
  flex: 0 0 auto;
  opacity: 0.35;
  border-radius: 3px;
  transition: opacity 0.14s ease, color 0.14s ease;
  user-select: none;
  -webkit-user-select: none;
}

.at-sub-drag-handle .icon {
  width: 12px;
  height: 12px;
  pointer-events: none;
}

.at-sub-item:hover .at-sub-drag-handle,
.at-sub-item:focus-within .at-sub-drag-handle {
  opacity: 0.85;
}

.at-sub-drag-handle:hover {
  opacity: 1;
  color: #173d35;
}

.at-sub-drag-handle:active {
  cursor: grabbing;
}

.at-sub-item:hover {
  background: #f2f7f3;
}

.at-sub-item.is-editing {
  background: #f6faf1;
  padding: 3px 4px;
  border: 1px solid #d0e2d4;
  cursor: default;
}

.at-sub-item.is-editing .at-sub-drag-handle {
  display: none;
}

.at-sub-check-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  padding: 2px;
}

.at-sub-check-box {
  width: 14px;
  height: 14px;
  margin: 0;
  accent-color: #173d35;
  cursor: pointer;
  flex-shrink: 0;
}

.at-sub-item.done {
  color: #819488;
}

.at-sub-item.done .at-sub-text {
  text-decoration: line-through;
  opacity: 0.75;
}

.at-sub-text {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  transition: background 0.12s ease, color 0.12s ease;
}

.at-sub-text:hover {
  background: #e5ece6;
  color: #173d35;
}

.at-sub-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
}

.at-sub-delete {
  border: 1px solid transparent;
  background: transparent;
  color: #1f2937;
  cursor: pointer;
  width: 22px;
  height: 22px;
  padding: 0;
  border-radius: 5px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: all 0.14s ease;
}

.at-sub-delete .icon {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  stroke-width: 2.2;
  display: block;
  pointer-events: none;
}

.at-sub-item:hover .at-sub-delete {
  color: #0f172a;
  background: #f1f5f9;
}

.at-sub-delete:hover {
  color: #dc2626 !important;
  background: #fee2e2 !important;
  border-color: #fca5a5 !important;
}

.at-sub-edit-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  width: 100%;
}

.at-sub-edit-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 26px;
  padding: 0 7px;
  font: inherit;
  font-size: 12px;
  border: 1.5px solid #7fb069;
  border-radius: 5px;
  outline: none;
  background: #ffffff;
  color: #1f2937;
  box-shadow: 0 0 0 2px rgba(127, 176, 105, 0.2);
  box-sizing: border-box;
}

.at-sub-edit-btns {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}

.at-sub-edit-save {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #173d35;
  color: #ffffff;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.14s ease;
}

.at-sub-edit-save:hover {
  background: #23594e;
}

.at-sub-edit-save .icon {
  width: 13px;
  height: 13px;
  stroke: #ffffff;
  stroke-width: 2.4;
  display: block;
}

.at-sub-edit-cancel {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: #ffffff;
  color: #64748b;
  border: 1px solid #cbd5e1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: all 0.14s ease;
}

.at-sub-edit-cancel:hover {
  background: #f1f5f9;
  color: #0f172a;
  border-color: #94a3b8;
}

.at-sub-edit-cancel .icon {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.2;
  display: block;
}

.at-pop-add {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #edf1ed;
}

.at-pop-add-input {
  width: 100%;
  height: 26px;
  padding: 0 8px;
  font: inherit;
  font-size: 11.5px;
  border: 1px solid #d0dcd3;
  border-radius: 6px;
  outline: none;
  box-sizing: border-box;
  background: #ffffff;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.at-pop-add-input:focus {
  border-color: #173d35;
  box-shadow: 0 0 0 2px rgba(23, 61, 53, 0.12);
}

.at-sub-empty {
  font-size: 11.5px;
  color: #8c9e94;
  font-style: italic;
  padding: 4px 0;
}

.at-row-empty {
  padding: 12px 16px;
  font-size: 12px;
  color: #8c9e94;
  font-style: italic;
  border-bottom: 1px solid #edf1ed;
}

/* Table Cell Floating Hover Tooltip (Full Subject & Description) */
.at-cell-hover-tooltip {
  position: fixed;
  z-index: 100065;
  pointer-events: none;
  max-width: 440px;
  min-width: 160px;
  background: #173d35;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 8px;
  box-shadow: 0 12px 30px rgba(13, 41, 35, 0.38), 0 3px 8px rgba(0, 0, 0, 0.15);
  padding: 8px 12px;
  box-sizing: border-box;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  animation: atTooltipIn 0.12s ease-out;
}
@keyframes atTooltipIn {
  from { opacity: 0; transform: translateY(-3px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}
.at-cell-hover-tooltip-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #a3e0b5;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  gap: 5px;
}
.at-cell-hover-tooltip-label .icon {
  width: 12px;
  height: 12px;
  color: #82e29e;
}
.at-cell-hover-tooltip-content {
  font-size: 12px;
  line-height: 1.5;
  color: #f1f8f4;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow-y: auto;
}
.at-cell-hover-tooltip-content.is-empty {
  color: #a4b8ad;
  font-style: italic;
}

/* Table Task Edit Popover (Subject + Description) */
.at-task-edit-popover,
.at-desc-popover {
  position: fixed;
  z-index: 100060;
  width: 480px;
  max-width: calc(100vw - 24px);
  background: #ffffff;
  border: 1px solid #d0ded4;
  border-radius: 12px;
  box-shadow: 0 16px 38px rgba(23, 61, 53, 0.24), 0 3px 10px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: atPopFadeIn 0.16s ease-out;
  box-sizing: border-box;
}

.at-task-edit-pop-header,
.at-desc-pop-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: #f4f8f5;
  border-bottom: 1px solid #e1ebe4;
}

.at-task-edit-pop-title,
.at-desc-pop-title {
  display: flex;
  align-items: center;
  gap: 7px;
  font: 600 13.5px 'DM Sans', sans-serif;
  color: #173d35;
}

.at-task-edit-pop-title .icon,
.at-desc-pop-title .icon {
  width: 15px;
  height: 15px;
  color: #275e50;
}

.at-task-edit-pop-body,
.at-desc-pop-body {
  padding: 14px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.at-task-edit-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.at-task-edit-label {
  font: 600 11.5px 'DM Sans', sans-serif;
  color: #3b5c4f;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.at-task-edit-popover-input {
  width: 100%;
  box-sizing: border-box;
  height: 35px;
  border: 1px solid #c9d8ce;
  border-radius: 8px;
  padding: 0 12px;
  font: 500 13px 'DM Sans', -apple-system, sans-serif;
  color: #173d35;
  background: #fbfdfc;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.at-task-edit-popover-input:focus {
  border-color: #173d35;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(23, 61, 53, 0.12);
}

.at-task-edit-popover-textarea,
.at-desc-popover-textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 120px;
  max-height: 340px;
  resize: vertical;
  border: 1px solid #c9d8ce;
  border-radius: 8px;
  padding: 10px 12px;
  font: 400 13px/1.55 'DM Sans', -apple-system, sans-serif;
  color: #173d35;
  background: #fbfdfc;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.at-task-edit-popover-textarea:focus,
.at-desc-popover-textarea:focus {
  border-color: #173d35;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(23, 61, 53, 0.12);
}

.at-task-edit-pop-hint,
.at-desc-pop-hint {
  font: 400 11px 'DM Sans', sans-serif;
  color: #7b8f84;
}

.at-task-edit-pop-hint b,
.at-desc-pop-hint b {
  color: #3b5c4f;
  font-weight: 600;
}

.at-task-edit-pop-footer,
.at-desc-pop-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 16px;
  background: #f8faf8;
  border-top: 1px solid #e1ebe4;
}

.at-task-edit-pop-btn,
.at-desc-pop-btn {
  height: 32px;
  padding: 0 15px;
  border-radius: 6px;
  font: 600 12px 'DM Sans', sans-serif;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: all 0.14s ease;
  border: 1px solid transparent;
}

.at-task-edit-pop-btn.cancel,
.at-desc-pop-btn.cancel {
  background: transparent;
  border-color: #d0ded4;
  color: #486154;
}

.at-task-edit-pop-btn.cancel:hover,
.at-desc-pop-btn.cancel:hover {
  background: #eef4f0;
  color: #173d35;
}

.at-task-edit-pop-btn.save.primary,
.at-desc-pop-btn.save.primary {
  background: #173d35;
  border-color: #173d35;
  color: #ffffff;
}

.at-task-edit-pop-btn.save.primary:hover,
.at-desc-pop-btn.save.primary:hover {
  background: #275e50;
  border-color: #275e50;
  box-shadow: 0 2px 6px rgba(23, 61, 53, 0.25);
}

.at-task-edit-pop-btn .icon,
.at-desc-pop-btn .icon {
  width: 13px;
  height: 13px;
}

/* ===== Subtasks section inside the table task-edit popover ===== */
.at-ep-sub-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 11px;
  border: 1px solid #e1ebe4;
  border-radius: 10px;
  background: #f7faf7;
}

.at-ep-sub-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.at-ep-sub-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.at-ep-sub-title .icon {
  width: 13px;
  height: 13px;
  color: #275e50;
}

.at-ep-sub-section .at-pop-count {
  font: 700 11px 'DM Sans', sans-serif;
  color: #3b5c4f;
  background: #ffffff;
  border: 1px solid #e1ebe4;
  border-radius: 999px;
  padding: 2px 9px;
}

.at-ep-sub-section .at-pop-bar {
  height: 4px;
  border-radius: 999px;
  background: #e6eee7;
  overflow: hidden;
}

.at-ep-sub-section .at-pop-bar-fill {
  display: block;
  height: 100%;
  background: #173d35;
  border-radius: 999px;
  transition: width 0.2s ease;
}

.at-ep-sub-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 208px;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.at-ep-add-row {
  display: flex;
  align-items: center;
  gap: 7px;
  padding-top: 8px;
  border-top: 1px dashed #d5e2d8;
}

.at-ep-add-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 10px;
  font: 500 12.5px 'DM Sans', sans-serif;
  color: #17221e;
  border: 1px solid #d0dcd3;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.14s ease, box-shadow 0.14s ease;
}

.at-ep-add-input:focus {
  border-color: #173d35;
  box-shadow: 0 0 0 2px rgba(23, 61, 53, 0.12);
}

.at-ep-add-input::placeholder {
  color: #9aaba0;
}

/* ==========================================================================
   Full View New Task Modal Styling
   ========================================================================== */
.tm-new-title {
  flex: 1 1 auto;
  min-width: 0;
  font-family: Manrope, sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  padding: 6px 12px;
  border: 1px solid #d0dcd2;
  border-radius: 8px;
  outline: none;
  background: #ffffff;
  color: #17221e;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-new-title:focus {
  border-color: #5b806e;
  box-shadow: 0 0 0 3px rgba(91, 128, 110, 0.14);
}

.tm-new-desc {
  width: 100%;
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 12px;
  border: 1px solid #d0dcd2;
  border-radius: 8px;
  outline: none;
  resize: vertical;
  background: #ffffff;
  color: #1f2924;
  box-sizing: border-box;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.tm-new-desc:focus {
  border-color: #5b806e;
  box-shadow: 0 0 0 3px rgba(91, 128, 110, 0.14);
}

.tm-new-matrix-group {
  display: flex;
  gap: 6px;
  align-items: center;
  height: 32px;
}

.tm-new-matrix-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 30px;
  padding: 0 10px;
  border-radius: 7px;
  border: 1px solid #d8dfd8;
  background: #ffffff;
  color: #55685d;
  font: 600 11.5px 'DM Sans', sans-serif;
  cursor: pointer;
  outline: none;
  transition: all 0.14s ease;
}

.tm-new-matrix-btn:hover {
  border-color: #a0b2a5;
  background: #f7faf7;
}

.tm-new-matrix-btn .icon {
  width: 12px;
  height: 12px;
  border: 1.5px solid #b8c7b9;
  border-radius: 3px;
  color: transparent;
  transition: all 0.14s ease;
}

.tm-new-matrix-btn.on.urgent {
  background: #fdecea;
  border-color: #f5a6a0;
  color: #b3261e;
}

.tm-new-matrix-btn.on.urgent .icon {
  background: #b3261e;
  border-color: #b3261e;
  color: #ffffff;
}

.tm-new-matrix-btn.on.urgent .icon * {
  stroke: #ffffff !important;
}

.tm-new-matrix-btn.on.important {
  background: #fff7db;
  border-color: #f3d477;
  color: #8a6a12;
}

.tm-new-matrix-btn.on.important .icon {
  background: #c8960e;
  border-color: #c8960e;
  color: #ffffff;
}

.tm-new-matrix-btn.on.important .icon * {
  stroke: #ffffff !important;
}

.tm-new-tags {
  height: 30px;
  font-size: 12px;
  padding: 0 8px;
  width: 100%;
  box-sizing: border-box;
}

.tm-new-subtask-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px;
  background: #f7faf8;
  border-radius: 6px;
  border: 1px solid #e2ebe4;
  margin-bottom: 4px;
}

.tm-new-subtask-item .subtask-title {
  font-size: 12.5px;
  color: #21332a;
}

/* Pill action button beside the new-task subtask input */
.tm-sub-add-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 32px;
  padding: 0 13px 0 10px;
  border-radius: 999px;
  border: 1px solid #275e50;
  background: linear-gradient(135deg, #275e50, #173d35);
  color: #eaf4e4;
  font: 700 11.5px 'DM Sans', sans-serif;
  letter-spacing: .02em;
  cursor: pointer;
  transition: .15s ease;
  box-shadow: 0 1px 3px rgba(23, 61, 53, .18);
  white-space: nowrap;
}
.tm-sub-add-btn .icon {
  width: 12px;
  height: 12px;
  color: #b9d969;
}
.tm-sub-add-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, #2f6f5e, #1c4a3f);
  border-color: #2f6f5e;
  color: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgba(23, 61, 53, .24);
}
.tm-sub-add-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(23, 61, 53, .18);
}
.tm-sub-add-btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  box-shadow: none;
}
.tm-sub-add-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2.5px rgba(185, 217, 105, .45);
}




/* ================= Day-Plan Drawer (vertical time UI) ================= */
/* Backdrop is INERT: transparent + pointer-transparent so the board stays fully interactive (drag & drop works with drawer open). Drawer closes via head X or header clock. */
.tl-drawer-backdrop{position:fixed;inset:0;z-index:99000 !important;background:transparent;backdrop-filter:none;pointer-events:none}
/* Entrance animation gated to fresh mount only — re-renders (now-line tick, gear, task syncs) must never re-animate (flash fix) */
.tl-drawer-backdrop.drawer-anim{animation:drawerFade .18s ease}
@keyframes drawerFade{from{opacity:0}to{opacity:1}}
.tl-drawer{position:fixed;top:0;right:0;bottom:0;width:min(var(--drawer-w, 430px), 94vw);z-index:99001 !important;background:#f8faf6;border-left:1px solid #d8e2d6;box-shadow:-18px 0 50px rgba(15,40,33,.22);display:flex;flex-direction:column;transition:transform .24s cubic-bezier(.3,1,.4,1)}
.tl-drawer.drawer-anim{animation:drawerSlide .22s cubic-bezier(.3,1,.4,1)}
@keyframes drawerSlide{from{transform:translateX(40px);opacity:0}to{transform:translateX(0);opacity:1}}
@media(prefers-reduced-motion:reduce){.tl-drawer,.tl-drawer-backdrop{animation:none;transition:none}}
/* Drawer minimize/maximize bump (left edge, vertical center) */
/* Drawer width grip — drag the left edge to resize the panel (320..720px) */
.tl-drawer-grip{position:absolute;left:-5px;top:0;bottom:0;width:11px;cursor:col-resize;z-index:1;display:flex;align-items:flex-end;justify-content:center;padding-bottom:26px;touch-action:none}
.tl-drawer-grip span{display:block;width:3px;height:44px;margin:0 1px;border-radius:2px;background:rgba(23,61,53,.45);opacity:0;transition:background .15s ease}
body.tl-wresizing{cursor:col-resize!important;user-select:none!important}
body.tl-wresizing .tl-drawer{transition:none!important}
.tl-drawer-min .tl-drawer-grip{display:none}
/* Persistent day-plan pill toggle — ALWAYS visible on the board.
   Closed/minimized → flush right screen edge (right:0);
   drawer open → straddles the drawer's seam (right = drawerW - 13px).
   Glides via right-transition; icon points in the direction of travel. */
#tl-drawer-pill{position:fixed;top:50%;right:0;transform:translateY(-50%);width:26px;height:56px;padding:0;border:1px solid #d8e2d6;border-right:none;border-radius:12px 0 0 12px;background:#173d35;color:#f5f5ed;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:-4px 2px 12px rgba(15,40,33,.28);z-index:99002;transition:background .15s ease,right .24s cubic-bezier(.3,1,.4,1)}
#tl-drawer-pill:hover{background:#1f5548}
#tl-drawer-pill .icon{width:15px;height:15px;transform:rotate(180deg);transition:transform .22s cubic-bezier(.3,1,.4,1)}
body.drawer-open:not(.tl-min) #tl-drawer-pill{right:calc(min(var(--drawer-w, 430px), 94vw) - 13px)}
body.drawer-open:not(.tl-min) #tl-drawer-pill .icon{transform:rotate(0deg)}
body.tl-wresizing #tl-drawer-pill{transition:none!important}
.tl-drawer.tl-drawer-min{transform:translateX(100%)}
.tl-drawer-backdrop.tl-drawer-min{opacity:0;pointer-events:none}

.tl-drawer-head{display:flex;align-items:center;justify-content:space-between;gap:10px;height:82px;padding:0 18px;background:#173d35;color:#f5f5ed}
.tl-drawer-head-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.tl-drawer-title{display:inline-flex;align-items:center;gap:8px;font:700 14px 'DM Sans';letter-spacing:.02em}
.tl-drawer-title .icon{width:16px;height:16px;color:#b9d969}
.tl-drawer-date{font-size:11px;color:#a8bdac}
.tl-drawer-head-actions{display:flex;gap:6px;align-items:center}
.tl-drawer-head .icon-btn{color:#ffffff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.tl-drawer-head .icon-btn:hover{background:rgba(185,217,105,.32);border-color:rgba(185,217,105,.5);color:#f2ffdc}
.tl-drawer-head .icon-btn.on{background:rgba(185,217,105,.25);color:#b9d969}
/* Range popover (gear) */
.tl-drawer-rangepop{position:absolute;top:58px;right:14px;z-index:2;background:#fff;border:1px solid #d8dfd8;border-radius:12px;padding:13px 14px;box-shadow:0 14px 34px rgba(23,61,53,.16);width:250px}
.tl-drawer-rangepop-title{font:700 12px 'DM Sans';color:#304039;margin-bottom:9px}
.tl-drawer-rangepop-row{display:flex;gap:8px}
.tl-drawer-rangepop-row label{flex:1;font:600 10.5px 'DM Sans';color:#708377;display:flex;flex-direction:column;gap:4px}
.tl-drawer-rangepop-row select{border:1px solid #d8dfd8;border-radius:7px;background:#fff;padding:7px 8px;font:600 11.5px 'DM Sans';color:#17221e;outline:none;cursor:pointer}
.tl-drawer-rangepop-row select:focus{border-color:#5b806e;box-shadow:0 0 0 2px rgba(91,128,110,.15)}
.tl-drawer-rangepop-hint{font-size:10px;color:#91a097;margin-top:8px;line-height:1.5}
/* Body / scale */
.tl-drawer-body{flex:1;overflow-y:auto;overflow-x:hidden;position:relative;scrollbar-width:thin;scrollbar-color:#c8d6c6 transparent}
.tl-drawer-body::-webkit-scrollbar{width:8px}
.tl-drawer-body::-webkit-scrollbar-thumb{background:#c8d6c6;border-radius:6px}
.tl-drawer-scale{position:relative;margin:10px 14px 16px 62px}
.tl-drawer-hour{position:relative;height:var(--drawer-rowh,100px);border-top:1px solid #dfe8dc}
/* Four equally sized quarter-hour drop targets per hour. */
.tl-drawer-quarter{position:absolute;left:0;right:0;height:25%;z-index:1;pointer-events:none;border-bottom:1px dashed rgba(80,105,87,.13);transition:background .12s}
.tl-drawer-quarter:nth-of-type(2){top:0}.tl-drawer-quarter:nth-of-type(3){top:25%}.tl-drawer-quarter:nth-of-type(4){top:50%}.tl-drawer-quarter:nth-of-type(5){top:75%;border-bottom:0}
.tl-drawer-quarter.is-drop{background:rgba(156,210,59,.19);box-shadow:inset 0 0 0 1px rgba(126,176,34,.25)}

.tl-drawer-hour.is-now{border-top-color:#8fbf7f}
.tl-drawer-hour-label{position:absolute;left:-52px;top:-7px;width:46px;text-align:right;font:700 10.5px 'DM Sans';color:#5f7268;background:#f8faf6;padding:1px 4px;border-radius:5px}
.tl-drawer-hour-label em{font-style:normal;font-size:8.5px;color:#93a498;margin-left:2px}
.tl-drawer-hour.is-now .tl-drawer-hour-label{color:#275e50;background:#e7f2df}
/* Legacy half-hour target styles removed; quarter-hour hit zones are above. */
/* Panel-width slider */
.tl-drawer-widthrow{display:flex;align-items:center;gap:10px;margin-top:8px}
.tl-drawer-widthrow input[type=range]{flex:1;accent-color:#5b806e;cursor:pointer;height:22px}
.tl-drawer-widthval{flex:0 0 auto;font:700 11px 'DM Sans';color:#275e50;background:#e7f2df;border-radius:6px;padding:3px 7px;min-width:42px;text-align:center}
/* Blocks */
.tl-drawer-block{position:absolute;z-index:2;left:6px;right:8px;touch-action:none;background:linear-gradient(135deg,#275e50,#1b463c);color:#eef4ec;border-radius:10px;padding:5px 8px;box-shadow:0 4px 14px rgba(23,61,53,.25);border:1px solid rgba(255,255,255,.08);cursor:grab;transition:box-shadow .15s ease,transform .12s ease;min-height:0}
.tl-drawer-block:hover{box-shadow:0 8px 22px rgba(23,61,53,.33),inset 0 2px 0 rgba(196,241,125,.4),inset 0 -2px 0 rgba(196,241,125,.4);transform:translateY(-1px);z-index:6}
.tl-drawer-block.is-subtask{background:linear-gradient(135deg,#3c5a45,#2c4736);border-left:3px solid #b9d969}
.tl-drawer-block.is-done{opacity:.72}
.tl-drawer-block.is-done .tl-drawer-block-title{text-decoration:line-through;color:#b7c9ba}
.tl-drawer-block.is-past{background:linear-gradient(135deg,#31473f,#263a33)}
.tl-drawer-block.is-resizing{box-shadow:0 0 0 2px #b9d969,0 10px 26px rgba(23,61,53,.4);cursor:ns-resize}
.tl-drawer-block.is-moving{opacity:.9;z-index:20;cursor:grabbing}
.tl-drawer-block.is-resizing{z-index:20}
.tl-drawer-block-main{display:flex;align-items:flex-start;gap:7px;height:100%;overflow:hidden}
.tl-drawer-check{flex:0 0 auto;width:16px;height:16px;margin-top:0;border:1.5px solid rgba(255,255,255,.5);border-radius:5px;background:transparent;color:#fff;cursor:pointer;display:grid;place-items:center;padding:0;transition:.15s}
.tl-drawer-check:hover{border-color:#b9d969;background:rgba(185,217,105,.18)}
.tl-drawer-check.is-checked{background:#b9d969;border-color:#b9d969;color:#173d35}
.tl-drawer-check .icon{width:10px;height:10px}
.tl-drawer-block-info{flex:1;min-width:0;cursor:pointer;overflow:hidden;display:flex;flex-direction:column;justify-content:center;height:100%}
/* Compact 15-min blocks: single-row card, tighter paddings.
   Roomy blocks get .is-roomy (JS: rendered height >= 62px, i.e. duration x hour-height) —
   it restores full details even on is-compact blocks (e.g. 15-min at 500px/hour). */
.tl-drawer-block.is-compact{padding:1px 8px;border-radius:8px}
.tl-drawer-block.is-compact .tl-drawer-block-info{flex-direction:row;align-items:center;gap:8px}
.tl-drawer-block.is-compact .tl-drawer-block-meta{display:none}
/* Compact blocks are ~23px: shrink 10px resize strips so the body stays grabbable */
.tl-drawer-block.is-compact .tl-drawer-resize{height:8px}
.tl-drawer-block.is-compact .tl-drawer-resize-top{top:-2px}
.tl-drawer-block.is-compact .tl-drawer-resize-bottom{bottom:-2px}
.tl-drawer-block-title{display:block;font:700 11px 'DM Sans';white-space:nowrap;overflow:hidden;text-overflow:ellipsis;overflow-wrap:anywhere;line-height:16px}
.tl-drawer-subbadge{display:inline-grid;place-items:center;width:13px;height:13px;border-radius:4px;background:rgba(185,217,105,.25);color:#d9eca8;margin-right:4px;vertical-align:-2px}
.tl-drawer-subbadge .icon{width:8px;height:8px}
.tl-drawer-block-meta{display:flex;flex-wrap:nowrap;gap:1px 8px;align-items:center;margin-top:2px;font-size:11px;font-weight:600;color:#cfdfd0;overflow:hidden;white-space:nowrap}
/* Uniform detail typography: meta, time, parent — all 11px to match the title; hierarchy via weight/color only */
.tl-drawer-block-meta .tl-drawer-time{font-size:11px}
.tl-drawer-block-meta .tl-drawer-parent{font-size:11px}
.tl-drawer-block-meta .origin-tag-chip{font-size:10px;padding:1.5px 7px}
.tl-chip-inline{font-size:11px;font-weight:600;color:#dfeee2;white-space:nowrap;display:inline-flex;align-items:center;gap:3px}
/* Full display when there's room: .is-roomy (JS-computed from rendered height = duration × hour-height px)
wraps the title (up to 3 lines) and lets details flow to extra lines; constrained blocks keep
single-line ellipsis. Recomputed on every drawer render → responds LIVE to the hour-height slider. */
.tl-drawer-block.is-roomy .tl-drawer-block-title{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;white-space:normal}
.tl-drawer-block.is-roomy .tl-drawer-block-meta{flex-wrap:wrap;white-space:normal;row-gap:3px}
  /* Roomy 15-min blocks: restore the full card even though is-compact hides meta by default */
  .tl-drawer-block.is-compact.is-roomy{padding:5px 8px;border-radius:10px}
  .tl-drawer-block.is-compact.is-roomy .tl-drawer-block-meta{display:flex}
  .tl-drawer-block.is-compact.is-roomy .tl-drawer-block-info{flex-direction:column;align-items:stretch;gap:1px}
.tl-drawer-parent{color:#d9eca8;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;flex:0 1 auto;cursor:pointer}
.tl-drawer-parent:hover{text-decoration:underline}
.tl-drawer-time{display:inline-flex;align-items:center;gap:3px;white-space:nowrap}
.tl-drawer-time .icon{width:9px;height:9px}
.tl-drawer-dur{background:rgba(185,217,105,.2);color:#d9eca8;border-radius:5px;padding:1px 5px;font-weight:700;white-space:nowrap}
.tl-drawer-x{flex:0 0 auto;border:0;background:transparent;color:rgba(238,244,236,.55);cursor:pointer;width:18px;height:18px;display:grid;place-items:center;border-radius:5px;padding:0;opacity:0;transition:.15s}
.tl-drawer-block:hover .tl-drawer-x{opacity:1}
.tl-drawer-x:hover{background:rgba(255,255,255,.14);color:#ffd7ce}
.tl-drawer-x .icon{width:11px;height:11px}
.tl-drawer-resize{position:absolute;left:0;right:0;height:16px;cursor:ns-resize;z-index:5;touch-action:none}
.tl-drawer-resize-top{top:-5px}
.tl-drawer-resize-bottom{bottom:-5px}
.tl-drawer-resize:hover{background:linear-gradient(to top,rgba(185,217,105,.4),transparent)}
.tl-drawer-resize::after{content:'';position:absolute;left:50%;transform:translateX(-50%);width:34px;height:4px;border-radius:2px;background:rgba(255,255,255,.45);opacity:.4;transition:.15s}
.tl-drawer-resize-top::after{top:2px}.tl-drawer-resize-bottom::after{bottom:2px}
body.drawer-resizing{cursor:ns-resize!important;user-select:none;-webkit-user-select:none}
body.drawer-resizing .tl-drawer-block{transform:none!important;transition:none}
.tl-drawer-block:hover .tl-drawer-resize::after{opacity:1}
.tl-drawer-resize:hover::after{opacity:1;background:#c4f17d;box-shadow:0 0 0 2px rgba(0,0,0,.12)}
/* Now line */
.tl-drawer-nowline{position:absolute;left:-6px;right:0;height:0;border-top:2px solid #e05656;z-index:3;pointer-events:none}
.tl-drawer-nowline .tl-drawer-nowdot{position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:#e05656;box-shadow:0 0 0 3px rgba(224,86,86,.25)}
/* Footer */
.tl-drawer-foot{flex:0 0 auto;padding:9px 18px;border-top:1px solid #e2e9e0;background:#f2f5f0;color:#7c8a81;font-size:10.5px;line-height:1.5}
/* Page shift when drawer open (desktop) */
@media(min-width:1100px){
  body.drawer-open:not(.tl-min) .dashboard-content{padding-right:calc(var(--drawer-w, min(430px,94vw)) + 14px)}
  body.drawer-open:not(.tl-min) .tl-pill-task-popover,body.drawer-open:not(.tl-min) .timeline-pop{max-width:calc(100vw - var(--drawer-w, min(430px,94vw)) - 40px)}
}
@media(max-width:1099px){body.drawer-open{overflow:hidden}body.drawer-open.tl-min{overflow:auto}}
/* Header pill-block highlighting (blocks scheduled in drawer highlight their hour pills) */
.tl-pill.tl-has-block{border-color:#b9d969;box-shadow:0 0 0 2px rgba(185,217,105,.35)}

/* ============================================================
   TRACKER — hub menu, card badges, calendar UI, charts
   ============================================================ */
/* --- hub: New split-menu --- */
.ph-new-wrap{position:relative;display:inline-flex}
.ph-new-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:230px;background:#fff;border:1px solid #e5e7eb;border-radius:14px;box-shadow:0 12px 32px rgba(15,23,42,.14);padding:6px;z-index:130;display:flex;flex-direction:column;gap:2px}
.ph-new-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border:0;background:none;border-radius:10px;cursor:pointer;text-align:left;font:inherit;width:100%}
.ph-new-item:hover{background:#f1f5f9}
.ph-new-item.tracker:hover{background:#ecfdf5}
.ph-new-ico{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:#eef2ff;color:#4f46e5;flex:0 0 auto}
.ph-new-item.tracker .ph-new-ico{background:#d1fae5;color:#059669}
.ph-new-ico .icon{width:18px;height:18px}
.ph-new-item-txt{display:flex;flex-direction:column;line-height:1.2}
.ph-new-item-txt b{font-size:13px;color:#0f172a}
.ph-new-item-txt small{font-size:11px;color:#64748b}

/* --- hub: tracker badge + tile differentiation --- */
.ph-kind-badge{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:700;letter-spacing:.02em;padding:3px 9px;border-radius:999px;margin-top:6px}
.ph-kind-badge.tracker{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}
.ph-kind-ico .icon{width:12px;height:12px;display:block}
.ph-tile.tracker-tile,.ph-card.tracker-tile{border-color:#6ee7b7;background:linear-gradient(180deg,#f0fdf7 0%,#fff 55%)}
.ph-tile.tracker-tile .ph-dot,.ph-card.tracker-tile .ph-dot{box-shadow:0 0 0 3px #d1fae5}

/* --- tracker layout --- */
.tracker-root{--tr-c1:#3f8a6e;--tr-c2:#7fb069;--tr-brand:#173d35;--tr-brand2:#2f6e57;--tr-brand3:#b9d969;--tr-brand3a:#eef7e6;--tr-ink:#17221e;--tr-mut:#5f6f66;--tr-line:#e2e8e0;--tr-accent:#275e50;--tr-green:#059669;display:flex;flex-direction:column;gap:14px;padding:18px clamp(12px,3vw,28px) 48px;max-width:1280px;margin:0 auto}
.tr-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.tr-header-l{display:flex;align-items:center;gap:12px;min-width:0}
.tr-back{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--tr-line);background:#fff;color:var(--tr-ink);cursor:pointer;flex:0 0 auto}
.tr-back:hover{background:#f8fafc}
.tr-back svg{width:18px;height:18px}
.tr-title{min-width:0}
.tr-title h2{margin:0;font-size:19px;font-weight:800;color:var(--tr-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-title p{margin:2px 0 0;font-size:12px;color:var(--tr-mut)}
.tr-header-r{display:flex;align-items:center;gap:10px;margin-left:auto}
.tr-view-switch{display:inline-flex;background:#fff;border:1px solid var(--tr-line);border-radius:11px;padding:3px;gap:2px}
.tr-view-btn{width:34px;height:32px;border:0;background:none;border-radius:8px;font-size:12px;font-weight:700;color:var(--tr-mut);cursor:pointer}
.tr-view-btn.active{background:var(--tr-accent);color:#fff}
.tr-icon-btn{display:grid;place-items:center;width:38px;height:38px;border-radius:11px;border:1px solid var(--tr-line);background:#fff;color:var(--tr-ink);cursor:pointer}
.tr-icon-btn svg{width:17px;height:17px}

/* --- tracker pills --- */
.tr-pills{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tr-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:999px;border:1px solid #d8dfd8;background:#fff;color:#506158;font:600 11.5px 'DM Sans',sans-serif;white-space:nowrap;cursor:pointer;max-width:240px}
.tr-pill span.tn{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tr-pill .tr-pill-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-flex;align-items:center;gap:4px}
.tr-pill .tr-pill-star{color:#d97706;flex:0 0 auto}
.tr-pill.active .tr-pill-star{color:#fbbf24}
.tr-pill{transition:background .16s ease,border-color .16s ease,color .16s ease,box-shadow .16s ease}
.tr-pill:not(.active):not(.add):hover{background:#f2f7f4;border-color:#c4d2ca;color:#275e50;box-shadow:0 2px 8px rgba(23,61,53,.08)}
.tr-pill.active{background:#173d35;border-color:#173d35;color:#fff}
.tr-pill.is-archived{opacity:.55;background:#f4f4f2;border-style:dashed;color:#8a8a84}
.tr-pill-wrap.archived{opacity:.85}
.tr-pill-unarch{border:1px solid #d8dfd8;background:#fff;border-radius:999px;width:22px;height:22px;font-size:12px;line-height:1;color:#275e50;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.tr-pill-unarch:hover{background:#eef4ee}
.tr-menu-wrap{position:relative;display:inline-flex}
.tr-menu-pop{position:absolute;top:calc(100% + 6px);right:0;min-width:190px;background:#fff;border:1px solid var(--tr-line);border-radius:12px;box-shadow:0 12px 34px rgba(15,40,35,.16);padding:6px;z-index:13000;display:flex;flex-direction:column;gap:2px}
.tr-menu-item{border:0;background:none;text-align:left;padding:9px 12px;border-radius:8px;font:500 13px 'DM Sans',sans-serif;color:#33544c;cursor:pointer}
.tr-menu-item:hover{background:#f0f5f2}
.tr-menu-item.danger{color:#b4382c}
.tr-menu-item.danger:hover{background:#fbeeea}
.tr-archived-strip{margin:10px 0 0;display:flex;align-items:center;gap:10px;padding:9px 14px;border:1px dashed #cbb27a;background:#fdf7e7;border-radius:12px;color:#7a6330;font:500 12.5px 'DM Sans',sans-serif}
.tr-archived-strip .tr-btn.ghost{margin-left:auto}
.tr-pill.active .tr-pill-count{background:rgba(255,255,255,.25);color:#fff}
.tr-pill-count{min-width:20px;height:20px;padding:0 6px;border-radius:999px;background:#f1f5f9;color:var(--tr-mut);font-size:11px;font-weight:700;display:grid;place-items:center}
.tr-pill.add{border-style:dashed;color:var(--tr-mut);background:transparent}
.tr-pill.add:hover{border-color:var(--tr-accent);color:var(--tr-accent)}

/* --- calendar --- */
.tr-cal-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tr-cal-nav{display:flex;align-items:center;gap:8px}
.tr-nav{width:34px;height:34px;border-radius:10px;border:1px solid var(--tr-line);background:#fff;font-size:18px;line-height:1;color:var(--tr-ink);cursor:pointer}
.tr-nav:hover{background:#f8fafc}
.tr-month-title{margin:0 4px;font-size:16px;font-weight:800;color:var(--tr-ink);min-width:0;white-space:nowrap}
.tr-cal-right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.tr-cal-sum{font-size:13px;font-weight:700;color:var(--tr-mut)}
.tr-cal-sum b{color:var(--tr-ink)}
.tr-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-top:4px}
.tr-dow span{text-align:center;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--tr-mut)}
.tr-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.tr-week-row{display:grid;grid-template-columns:repeat(7,1fr) 92px;gap:6px;margin-bottom:6px;grid-column:1/-1}
.tr-week-row .tr-day{min-width:0}
.tr-wk-total{display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#059669;background:#ecfdf5;border:1px solid #a7f3d0;border-radius:12px;padding:4px 6px;text-align:center;word-break:break-word}
.tr-wk-total.zero{color:#8a968e;background:#f8fafc;border-color:var(--tr-line)}
.tr-dow{display:grid;grid-template-columns:repeat(7,1fr) 92px;gap:6px;font-size:11px;font-weight:700;color:var(--tr-mut);text-transform:uppercase;letter-spacing:.4px;padding:0 2px 4px}
.tr-dow-total{text-align:center}
.tr-day{position:relative;min-height:96px;border:1px solid var(--tr-line);border-radius:12px;background:#fff;padding:8px;display:flex;flex-direction:column;gap:4px;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tr-day:hover{border-color:#cfdacf;box-shadow:0 3px 10px rgba(39,94,80,.08)}
.tr-day.pad{background:transparent;border-color:transparent;cursor:default;min-height:0}
.tr-day.today{border-color:var(--tr-accent);box-shadow:inset 0 0 0 1px var(--tr-accent)}
/* v14: special-date cells (days with entries) get a distinct treatment vs empty boxes */
.tr-day.has-entries{background:linear-gradient(160deg,#e7f2df 0%,#ffffff 55%);border-color:#cfdacf}
.tr-day.has-entries:hover{border-color:#9bc4b4;box-shadow:0 4px 14px rgba(39,94,80,.14)}
.tr-day.has-entries::before{content:'';position:absolute;top:8px;bottom:8px;left:0;width:3px;border-radius:0 3px 3px 0;background:var(--tr-accent);opacity:.55}
.tr-day.has-entries.today{background:linear-gradient(160deg,#dbead3 0%,#e7f2df 60%);border-color:var(--tr-accent)}
.tr-day.has-entries.today::before{opacity:.9}
.tr-day-num{font-size:12px;font-weight:700;color:var(--tr-mut)}
.tr-day.today .tr-day-num{color:var(--tr-accent)}
.tr-day-total{font-size:12px;font-weight:800;color:var(--tr-green)}
.tr-day-entry{display:flex;align-items:center;gap:4px;max-width:100%;border:0;background:#e7f2df;color:#173d35;font-size:11px;font-weight:600;padding:3px 7px;border-radius:7px;cursor:pointer;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 0 auto}
/* All entries shown — rows stretch to content (v4: cap removed) */
.tr-day-entry:hover{background:#dbead3}
.tr-rec-dot{width:6px;height:6px;border-radius:50%;background:#275e50;flex:0 0 auto;display:inline-block}
.tr-day-more{font-size:10px;color:var(--tr-mut);font-weight:600}
.tr-btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:11px;border:1px solid var(--tr-line);background:#fff;font-size:13px;font-weight:700;color:var(--tr-ink);cursor:pointer}
.tr-btn:hover{background:#f8fafc}
.tr-btn.primary{background:var(--tr-accent);border-color:var(--tr-accent);color:#fff}
.tr-btn.primary:hover{background:#1d4a3e}
.tr-btn.sm{padding:6px 12px;font-size:12px}

/* --- charts --- */
.tr-charts{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
.tr-chart-card{background:#fff;border:1px solid var(--tr-line);border-radius:16px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.tr-chart-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.tr-chart-head h4{margin:0;font-size:14px;font-weight:800;color:var(--tr-ink)}
.tr-chart-controls{display:flex;gap:8px;flex-wrap:wrap}
.tr-ctl{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--tr-mut)}
.tr-ctl select{border:1px solid var(--tr-line);border-radius:8px;padding:5px 8px;font-size:12px;font-weight:600;color:var(--tr-ink);background:#fff;max-width:140px}
.tr-bars{display:flex;align-items:flex-end;gap:8px;height:190px;padding-top:6px;overflow-x:auto}
.tr-bar-col{flex:1 1 0;min-width:34px;display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.tr-bar{width:70%;max-width:44px;background:linear-gradient(180deg,#818cf8,#275e50);border-radius:8px 8px 3px 3px;position:relative;min-height:3px}
.tr-bar-val{font-size:10px;font-weight:700;color:var(--tr-mut);white-space:nowrap;order:-1}
.tr-bar-label{font-size:10px;font-weight:600;color:var(--tr-mut);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.tr-bars-empty{color:var(--tr-mut);font-size:13px;padding:30px 0;text-align:center;width:100%}
.tr-chart-foot{font-size:12px;color:var(--tr-mut)}
.tr-chart-foot b{color:var(--tr-ink)}
.tr-pie-wrap{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.tr-pie{width:150px;height:150px;border-radius:50%;flex:0 0 auto;position:relative}
.tr-pie::after{content:'';position:absolute;inset:26%;background:#fff;border-radius:50%}
.tr-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;min-width:0;flex:1 1 140px}
.tr-legend li{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--tr-ink);min-width:0}
.tr-legend li i{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
.tr-legend li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1 1 auto}
.tr-legend li b{font-weight:700;white-space:nowrap}
.tr-legend-empty{color:var(--tr-mut)}

/* --- settings popover --- */
.tr-pop{position:absolute;top:64px;right:clamp(12px,3vw,28px);z-index:130;background:#fff;border:1px solid var(--tr-line);border-radius:14px;box-shadow:0 12px 32px rgba(15,23,42,.14);padding:14px;min-width:240px;display:flex;flex-direction:column;gap:10px}
.tracker-root{position:relative}
.tr-pop-row{display:flex;flex-direction:column;gap:5px}
.tr-pop-row label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--tr-mut)}
.tr-pop-row select{border:1px solid var(--tr-line);border-radius:9px;padding:8px 10px;font-size:13px;font-weight:600;color:var(--tr-ink);background:#fff}
.tr-pop-hint{margin:0;font-size:11px;color:var(--tr-mut)}

/* --- modals --- */
.tr-modal{position:fixed;inset:0;z-index:100100;background:rgba(15,23,42,.45);display:flex;align-items:center;justify-content:center;padding:16px}
.tr-modal[hidden]{display:none}
.tr-modal-card{background:#fff;border-radius:18px;box-shadow:0 24px 60px rgba(15,23,42,.25);width:min(440px,94vw);max-height:90vh;overflow:auto;padding:20px;display:flex;flex-direction:column;gap:12px}
.tr-modal-head{display:flex;align-items:center;justify-content:space-between}
.tr-modal-head h3{margin:0;font-size:16px;font-weight:800;color:var(--tr-ink)}
.tr-x{border:0;background:none;font-size:22px;line-height:1;color:var(--tr-mut);cursor:pointer;padding:2px 8px;border-radius:8px}
.tr-x:hover{background:#f1f5f9}
.tr-fld{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:var(--tr-mut)}
.tr-day.has-special{background:linear-gradient(150deg,#fdf9e8,#f8efd6);border-color:#ecd9a0;box-shadow:0 1px 6px rgba(217,165,32,.15)}
.tr-day.has-special:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(217,165,32,.22)}
.tr-day.has-special .tr-day-num{color:#b8860b}
.tr-day.has-special .tr-note-star{color:#b8860b}
.tr-day.has-special.today{background:linear-gradient(160deg,#fdf3d0 0%,#fdf9e8 60%);border-color:#e3c76f}
.tr-day.has-special.has-entries{border-left:3px solid #d9a520}
.tr-fld input,.tr-fld select{border:1px solid var(--tr-line);border-radius:10px;padding:9px 11px;font-size:13px;font-weight:600;color:var(--tr-ink);background:#fff;width:100%}
.tr-fld input:focus,.tr-fld select:focus{outline:2px solid #cfdacf;border-color:#818cf8}
#tr-e-save{margin-top:4px;justify-content:center}

/* --- empty state --- */
.tr-empty{background:#fff;border:1px dashed var(--tr-line);border-radius:18px;padding:44px 20px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px}
.tr-empty h3{margin:0;font-size:17px;color:var(--tr-ink)}
.tr-empty p{margin:0 0 8px;font-size:13px;color:var(--tr-mut)}

/* --- mobile --- */
@media(max-width:767px){
  .tracker-root{padding:12px 10px 40px;gap:10px}
  .tr-header{gap:8px}
  .tr-back{width:34px;height:34px}
  .tr-title h2{font-size:16px;max-width:46vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tr-header-r{gap:6px}
  .tr-view-btn{width:30px;height:30px;font-size:11px}
  .tr-icon-btn{width:34px;height:34px}
  .tr-grid{gap:3px}
  .tr-day{min-height:64px;padding:5px;border-radius:9px}
  .tr-day.pad{min-height:0}
  .tr-day-num{font-size:10px}
  .tr-day-total{font-size:10px}
  .tr-day-entry{font-size:9px;padding:2px 5px;border-radius:5px}
  .tr-day-more{font-size:8.5px}
  .tr-cal-head{flex-direction:column;align-items:stretch}
  .tr-cal-right{justify-content:space-between}
  .tr-cal-sum{font-size:12px}
  .tr-month-title{font-size:14px;min-width:0;flex:1;text-align:center}
  .tr-charts{grid-template-columns:1fr}
  .tr-bars{height:150px;gap:5px}
  .tr-bar-col{min-width:26px}
  .tr-bar-val{font-size:9px}
  .tr-bar-label{font-size:9px}
  .tr-pie{width:120px;height:120px}
  .tr-pop{position:fixed;top:auto;bottom:0;left:0;right:0;min-width:0;border-radius:16px 16px 0 0;box-shadow:0 -12px 40px rgba(15,23,42,.2)}
  .tr-pills{gap:6px}
  .tr-pill{padding:6px 11px;font-size:12px;max-width:56vw}
}
/* very narrow phones: shrink day cells further */
@media(max-width:380px){
  .tr-day{min-height:56px;padding:4px}
  .tr-day-entry{font-size:8px;padding:2px 4px}
  .tr-day-total{font-size:9px}
}
/* ==== tracker views v2: day/week/year + chips/tooltips ==== */
.tr-pill-wrap{display:inline-flex;align-items:center;gap:4px;background:#fff;border:1px solid var(--tr-line);border-radius:999px;padding:4px 4px 4px 12px}
.tr-pill-wrap.active{border-color:var(--tr-accent);border-width:2px;padding:3px 3px 3px 11px}
.tr-pill-wrap .tr-pill{border:0;background:none;padding:0;margin:0;box-shadow:none;font-weight:700;font-size:12.5px;color:var(--tr-ink);cursor:pointer}
.tr-pill-wrap .tr-pill.active{background:none;color:var(--tr-accent);padding:0}
.tr-pill-edit{display:grid;place-items:center;width:24px;height:24px;border:0;background:#f1f5f9;border-radius:8px;color:var(--tr-mut);cursor:pointer;flex:0 0 auto}
.tr-pill-edit:hover{background:#e2e8e0;color:var(--tr-ink)}
.tr-tag-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.tr-tag-chip{display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:999px;border:1px solid var(--tr-line);background:#fff;font-size:12px;font-weight:600;color:var(--tr-mut);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.tr-tag-chip:hover{border-color:var(--tr-accent);color:var(--tr-accent)}
.tr-day-done,.tr-row-done{width:15px;height:15px;accent-color:#275e50;cursor:pointer;flex:none;pointer-events:auto}
.tr-day-entry.is-task .tr-day-done{margin-left:0}
.tr-row-done{margin-left:0}
.tr-tag-chip.on{background:var(--tr-accent);border-color:var(--tr-accent);color:#fff;box-shadow:0 0 0 2px rgba(39,94,80,.18)}
.tr-row-tag.is-task{background:#e8f1ec;color:#275e50;border-color:#cfe2d8}
.tr-amt{margin-left:auto;font-size:10.5px;font-weight:800;color:var(--tr-green);padding-left:6px;white-space:nowrap}
.tr-rec-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--tr-accent);margin-right:3px;flex:0 0 auto}
.tr-day-total{display:inline-block;font-size:10px;font-weight:800;color:var(--tr-green);background:#ecfdf5;border:1px solid #a7f3d0;border-radius:999px;padding:1px 6px;align-self:flex-start;white-space:nowrap}
.tr-dayview{display:flex;flex-direction:column;gap:8px}
.tr-weekview{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.tr-yearview{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.tr-row{display:flex;align-items:center;gap:8px;width:100%;text-align:left;padding:10px 12px;border:1px solid var(--tr-line);border-radius:11px;background:#fff;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.tr-row:hover{border-color:var(--tr-accent);box-shadow:0 1px 6px rgba(39,94,80,.12)}
.tr-row .tr-row-subj{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.tr-row .tr-row-subj{font-size:14px;font-weight:700;color:var(--tr-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-row .tr-row-tag{font-size:11px;color:var(--tr-mut);display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tr-row .tr-row-tags{display:flex;gap:4px;flex-wrap:wrap}
.tr-row .tr-tag-mini{font-size:9.5px;font-weight:700;color:var(--tr-accent);background:#e7f2df;border-radius:999px;padding:1px 7px}
.tr-row .tr-row-amt{font-size:13px;margin-left:0;padding-left:0}
.tr-wcol{display:flex;flex-direction:column;gap:6px;border:1px solid var(--tr-line);border-radius:12px;background:#fff;padding:8px;min-height:200px}
.tr-wcol.today{border-color:var(--tr-accent);box-shadow:0 0 0 2px rgba(39,94,80,.15)}
.tr-wcol-head{display:flex;flex-direction:column;gap:1px;padding-bottom:4px;border-bottom:1px solid var(--tr-line)}
.tr-wcol-head .tr-wcol-dow{font-size:10px;font-weight:800;text-transform:uppercase;color:var(--tr-mut);letter-spacing:.04em}
.tr-wcol-head .tr-wcol-num{font-size:15px;font-weight:800;color:var(--tr-ink)}
.tr-wcol-head .tr-wcol-num.today{color:var(--tr-accent)}
.tr-wcol-total{font-size:10.5px;font-weight:800;color:var(--tr-green);background:#ecfdf5;border-radius:999px;padding:1px 7px;align-self:flex-start}
.tr-wcol-body{display:flex;flex-direction:column;gap:4px;flex:1}
.tr-wcol .tr-row{padding:6px 8px;border-radius:9px;box-shadow:none;font-size:12px}
.tr-wcol .tr-row .tr-row-subj{font-size:12px}
.tr-wcol .tr-row .tr-row-amt{font-size:10.5px}
.tr-wcol .tr-row .tr-row-tag{font-size:9px;padding:0 5px}
.tr-wcol .tr-row:hover{background:#e7f2df}
.tr-wcol-entry .tr-amt{font-size:9.5px}
.tr-wcol-add{border:1px dashed var(--tr-line);border-radius:9px;background:none;color:var(--tr-mut);font-size:16px;line-height:1;padding:4px 0;cursor:pointer}
.tr-wcol-add:hover{border-color:var(--tr-accent);color:var(--tr-accent);background:#e7f2df}
.tr-mcard{display:flex;flex-direction:column;gap:6px;padding:14px;border:1px solid var(--tr-line);border-radius:13px;background:#fff;cursor:pointer;text-align:left;transition:border-color .15s,box-shadow .15s,transform .15s}
.tr-mcard:hover{border-color:var(--tr-accent);box-shadow:0 2px 10px rgba(39,94,80,.14);transform:translateY(-1px)}
.tr-mcard-title{font-size:13.5px;font-weight:800;color:var(--tr-ink)}
.tr-mcard-title.today{color:var(--tr-accent)}
.tr-mcard-stats{display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.tr-mcard-count{font-size:11px;font-weight:700;color:var(--tr-mut)}
.tr-mcard-amt{font-size:14px;font-weight:800;color:var(--tr-green)}
.tr-mcard-bar{height:5px;border-radius:999px;background:#f1f5f9;overflow:hidden}
.tr-mcard-bar i{display:block;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--tr-c1),var(--tr-c2))}
.tr-empty-view{padding:36px 18px;text-align:center;color:var(--tr-mut);font-size:13px;border:1px dashed var(--tr-line);border-radius:13px}
@media (max-width:768px){
  .tr-weekview{grid-template-columns:repeat(2,1fr)}
  .tr-yearview{grid-template-columns:repeat(2,1fr)}
  .tr-dayview .tr-row{padding:9px 10px}
  .tr-wcol{min-height:150px}
}
.tr-tabrow{display:flex;flex-wrap:wrap;gap:8px;padding:2px 2px 10px}
.tr-tab{padding:6px 14px;border-radius:999px;border:1px solid var(--tr-line);background:#fff;font-size:12.5px;font-weight:700;color:var(--tr-mut);cursor:pointer;transition:background .12s,color .12s,border-color .12s}
.tr-tab:hover{border-color:var(--tr-accent);color:var(--tr-accent)}
.tr-tab.active{background:var(--tr-accent);border-color:var(--tr-accent);color:#fff}
.tr-tag-new{display:flex;gap:6px;margin-top:8px}
.tr-tag-new input{flex:1;min-width:0;padding:7px 10px;border:1px solid var(--tr-line);border-radius:8px;font-size:12.5px}
.tr-tag-new button{padding:6px 12px;border:1px solid var(--tr-line);border-radius:8px;background:#f8fafc;font-size:14px;font-weight:700;color:var(--tr-mut);cursor:pointer}
.tr-tag-new button:hover{border-color:var(--tr-accent);color:var(--tr-accent)}
.tr-pop-col{flex-direction:column;align-items:stretch;gap:4px}
.tr-pop-col input{width:100%;padding:7px 10px;border:1px solid var(--tr-line);border-radius:8px;font-size:12.5px}
.tr-pop-sub{font-weight:400;color:var(--tr-mut);font-size:11px}
.tr-pop-save{width:100%;margin-top:6px}
.tr-fld-label{font-size:12px;font-weight:600;color:var(--tr-mut);display:block;margin-bottom:4px}
.tr-fld-sub{font-weight:400;font-size:11px}
/* Inline pill rename (v4) */
.tr-pill.editing{cursor:text;padding:3px 8px}
.tr-pill-edit{width:110px;font:inherit;font-size:13px;font-weight:600;color:var(--tr-ink);background:#fff;border:1.5px solid var(--tr-accent);border-radius:999px;padding:4px 10px;outline:none}
.tr-pill.active .tr-pill-edit{background:#fff;color:var(--tr-ink)}
/* Weekend tinting (v4) — Sat/Sun get a warm slate-lavender wash */
.tr-day.weekend,.tr-wcol.weekend{background:#f4f6f1;border-color:#dde3d6}
.tr-day.weekend .tr-day-num,.tr-wcol.weekend .tr-wcol-head span{color:#5b806e}
.tr-day.weekend:hover{border-color:#c7bfe0;box-shadow:0 1px 4px rgba(139,127,184,.15)}
.tr-day.today.weekend,.tr-wcol.today.weekend{background:#eef3e6}
/* Day notes (v4) — special-star + note icon on cells, editor modal */
.tr-note-star{font-style:normal;font-size:13px;line-height:1;color:#d97706;text-shadow:0 1px 2px rgba(217,119,6,.25);cursor:pointer}
.tr-note-icon{font-style:normal;font-size:11px;line-height:1;color:#5f6f66;cursor:pointer;opacity:.85}
.tr-day-num{cursor:pointer}
.tr-n-date{font-size:13px;color:var(--tr-mut);margin:-4px 0 12px;font-weight:600}
.tr-n-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tr-ink);margin:10px 0 14px;cursor:pointer}
.tr-n-check input{width:16px;height:16px;accent-color:var(--tr-accent);cursor:pointer}
/* Settings tag pills (v4) — colorful, stable hue per tag, ×-delete */
.tr-set-tags{display:flex;flex-wrap:wrap;gap:6px;margin:6px 0 10px;max-width:230px}
.tr-tagpill{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:1;white-space:nowrap;border:1px solid transparent}

.tr-tagpill-x{border:0;background:rgba(255,255,255,.35);color:inherit;width:15px;height:15px;border-radius:50%;font-size:11px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.tr-tagpill-x:hover{background:rgba(255,255,255,.6)}
.tr-set-tagadd{display:flex;gap:6px}
.tr-set-tagadd input{flex:1;min-width:0;border:1px solid var(--tr-line);border-radius:8px;padding:6px 9px;font-size:12.5px}
.tr-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--tr-ink);margin:2px 0 10px;cursor:pointer}
.tr-check input{width:16px;height:16px;accent-color:var(--tr-accent);cursor:pointer}
/* ==== end tracker ==== */

/* Day-note strips (v6) — saved note text visible on date cells in day/week/month views */
.tr-note-strip{display:flex;align-items:flex-start;gap:4px;width:calc(100% - 12px);margin:2px 6px 3px;padding:3px 7px;background:#fffbeb;border:1px solid #fde68a;border-radius:7px;font:inherit;font-size:11px;font-weight:600;color:#92400e;line-height:1.25;text-align:left;cursor:pointer;overflow:hidden}
.tr-note-strip span{display:block;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow-wrap:anywhere}
.tr-note-strip:hover{background:#fef3c7;border-color:#fcd34d}
.tr-note-strip .tr-note-star{margin-right:1px}
/* Inline day-note text (v7) — note text beside day number, click to edit; no pencil icon */
.tr-day-head{display:flex;align-items:center;gap:4px;min-width:0;width:100%}
.tr-day-head .tr-day-num{flex:none}
.tr-day-head .tr-note-inline{flex:1 1 auto;min-width:0;margin-left:0}
.tr-day-head .tr-day-total{margin-left:auto}
.tr-wcol-title{display:flex;align-items:center;gap:4px;min-width:0;width:100%}
.tr-wcol-title .tr-note-inline{flex:1 1 auto;min-width:0;margin-left:0}
.tr-wcol-title .tr-wcol-total{margin-left:auto}
.tr-note-inline{display:inline-flex;align-items:center;gap:3px;background:none;border:0;padding:0;margin-left:5px;max-width:none;font:inherit;font-size:10.5px;font-weight:600;color:#92400e;line-height:1.2;text-align:left;cursor:pointer;white-space:nowrap;overflow:hidden}
.tr-note-inline span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.tr-note-inline:hover span{text-decoration:underline;text-underline-offset:2px}
.tr-note-inline .tr-note-star{font-style:normal;font-size:10px;line-height:1;flex:0 0 auto}
.tr-note-inline.is-special{color:#b45309}
.tr-note-strip-day{width:100%;margin:0 0 8px;padding:6px 10px;font-size:12px;border-radius:8px}

/* Tracker All-projects flyout clamp (v6) — flip left when near right viewport edge */
.projects-back-wrap .recent-proj-row.flyout-left .recent-boards-flyout{left:auto;right:calc(100% + 10px)}

/* ==== v11 mobile tracker fixes ==== */
@media (max-width:768px){
  /* Fix 3: month view = readable cells + horizontal scroll instead of shrink-to-fit */
  .tr-dow,.tr-grid,.tr-week-row{min-width:840px}
  .tr-dow,.tr-grid{display:grid;grid-template-columns:repeat(7,minmax(114px,1fr));gap:5px}
  .tr-week-row{grid-template-columns:repeat(7,minmax(114px,1fr)) 74px}
  .tr-cal-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;padding-bottom:6px}
  .tr-day{min-height:78px;padding:6px}
  .tr-day-num{font-size:13px}
  .tr-day-entry{font-size:11px;max-width:100%}
  .tr-day-total{font-size:10px}
  .tr-note-inline{max-width:none}
  /* Fix 4: entry modal + date field stay inside the viewport */
  .tr-modal{padding:10px;align-items:flex-end}
  .tr-modal-card{width:100%;max-width:100%;max-height:86vh;overflow-y:auto;padding:16px 14px}
  .tr-fld input,.tr-fld select{width:100%;min-width:0;box-sizing:border-box;font-size:16px}
  .tr-fld-row{display:flex;flex-wrap:wrap;gap:8px}
  .tr-fld-row>.tr-fld{flex:1 1 130px;min-width:0}
}

/* ==== v12 board tag manager ==== */
.tags-modal-card{width:min(100%,460px)}
.tags-modal-card h3{font-size:22px;margin-bottom:6px}
.tags-modal-card .tm-sub{color:#718078;font-size:12.5px;line-height:1.5;margin:0 0 16px}
.tags-modal-card .tm-list{display:flex;flex-direction:column;gap:8px;max-height:46vh;overflow-y:auto;padding-right:2px;margin-bottom:18px}
.tags-modal-card .tm-row{display:flex;align-items:center;gap:10px;border:1px solid #e2e8e2;border-radius:10px;padding:9px 12px;background:#fbfcfb}
.tags-modal-card .tm-row.editing{border-color:#5b806e;background:#f4f8f5}
.tags-modal-card .tm-tag-name{font-size:13px;font-weight:600;color:#243b30;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tags-modal-card .tm-tag-chip{display:inline-block;font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:190px}
.tags-modal-card .tm-count{margin-left:auto;font-size:11.5px;font-weight:700;color:#718078;background:#eef2ee;border-radius:999px;padding:2px 9px;white-space:nowrap}
.tags-modal-card .tm-actions{display:flex;gap:4px}
.tags-modal-card .icon-btn{height:28px;width:28px;min-width:28px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:7px;background:transparent;color:#5a6b62;cursor:pointer}
.tags-modal-card .icon-btn:hover{background:#eef2ee;color:#243b30}
.tags-modal-card .icon-btn.danger:hover{background:#fbeaea;color:#b3413c}
.tags-modal-card .icon-btn svg{width:15px;height:15px}
.tags-modal-card .tm-empty{color:#8a968e;font-size:12.5px;padding:14px 4px;text-align:center}
.tags-modal-card .tm-foot{display:flex;justify-content:flex-end;gap:10px}
.tags-modal-card #tag-edit-input{margin-bottom:0;flex:1;min-width:0}
@media(max-width:768px){
  .tags-modal-card .tm-tag-chip{max-width:130px}
  .tags-modal-card .tm-count{padding:2px 7px}
  .tags-modal-card .tm-actions{gap:2px}
}
.tr-btn.danger{background:#fff;border-color:rgba(220,38,38,.4);color:#dc2626}
.tr-btn.danger:hover{background:rgba(220,38,38,.07);border-color:#dc2626}
/* ==== v14 entry modal: spacing + equal-width actions ==== */
.tr-entry-form{display:flex;flex-direction:column;gap:14px}
#tr-entry-form{display:flex;flex-direction:column;gap:14px}
.tr-entry-form .tr-fld{display:flex;flex-direction:column;gap:6px}
.tr-entry-form .tr-fld-label{font-size:12px;font-weight:700;color:#5a6b62;letter-spacing:.02em}
.tr-entry-form .tr-fld-row{display:flex;gap:10px}
.tr-entry-form .tr-fld-row>.tr-fld{flex:1 1 0;min-width:0}
.tr-e-actions{display:flex;gap:8px;margin-top:2px}
.tr-e-actions .tr-btn{flex:1 1 0;min-width:0;justify-content:center}
.tr-e-actions .tr-btn.danger:hover{background:#dc2626;color:#fff;border-color:#dc2626}

/* v15: note textarea styled + 16px on mobile (iOS zoom fix) */
#tr-n-desc{width:100%;min-width:0;box-sizing:border-box;border:1px solid var(--tr-line);border-radius:10px;padding:9px 11px;font-size:13px;font-weight:500;color:var(--tr-ink);background:#fff;resize:vertical;min-height:84px;font-family:inherit}
@media (max-width:768px){
  #tr-n-desc{font-size:16px;padding:8px 10px}
  .tr-fld input,.tr-fld select,.tr-modal-card input,.tr-modal-card select{font-size:16px}
  .tr-modal{align-items:flex-start;padding:66px 10px 10px}
  .tr-modal-card{max-height:calc(100dvh - 76px);max-width:100%}
}

/* v15: selected tag chips — check badge + ring, unmistakable state */
.tr-tag-chip{display:inline-flex;align-items:center;gap:5px;transition:box-shadow .12s,transform .12s}
.tr-tag-chip.on{box-shadow:0 0 0 2px rgba(255,255,255,.55) inset,0 2px 8px rgba(0,0,0,.14)}
.tr-tag-chip.on:active{transform:scale(.96)}
.tr-tag-check{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;background:rgba(255,255,255,.28);color:#fff;font-size:10px;font-weight:800;line-height:1;flex:0 0 auto;text-shadow:0 1px 1px rgba(0,0,0,.18)}
/* v16: iOS date input intrinsic-width fix — force 100% like siblings */
.tr-fld input[type=date]{-webkit-appearance:none;appearance:none;min-height:41px;min-width:0;width:100%}

/* v17: weekly view — hide tags on entry rows (tight space; tags stay in add/edit UI) */
.tr-wcol .tr-row .tr-row-tags{display:none}
/* v17: drag-to-copy affordances */
.tr-day-entry,.tr-row{cursor:grab}
.tr-day-entry.tr-dragging,.tr-row.tr-dragging{opacity:.45;cursor:grabbing}
.tr-day.tr-drop-ok,.tr-wcol.tr-drop-ok{outline:2px dashed var(--tr-accent);outline-offset:-3px;background:rgba(39,94,80,.08)}
/* v20: removed .tr-day-entry{touch-action:auto} — it defeated the v19 touch guard (auto re-enabled iOS scroll claiming → pointercancel mid-drag) */

/* v17: mobile — special-date gold reads stronger on small screens (hover glow does not exist on touch) */
@media(max-width:768px){
  .tr-day.has-special{background:linear-gradient(150deg,#fdf3d0,#f6e7ba);border-color:#e3c76f;box-shadow:0 1px 6px rgba(217,165,32,.28)}
  .tr-day.has-special .tr-day-num,.tr-day.has-special .tr-note-star{color:#8a6508;font-weight:800}
  .tr-day.has-special.today{background:linear-gradient(160deg,#fbe8a8 0%,#fdf3d0 60%);border-color:#d9a520}
}

/* v18: pointer-drag affordances */
/* v20: removed .tr-day-entry,.tr-row{-webkit-user-drag:element} — stylesheet twin of draggable=true; armed native drag which hijacked the pointer gesture (pointercancel) → drag worked, drop never did */
.tr-pointer-drop { outline: 2px dashed #275e50; outline-offset: -2px; background: #e7f2df; }
body.tr-dragging { -webkit-user-select: none; user-select: none; }
body.tr-dragging .tr-day-entry, body.tr-dragging .tr-row { cursor: grabbing; }
#tr-drag-ghost { pointer-events: none; }

/* v18 T153: iOS force-zooms when a focused input is <16px — the +Tag inline input was 10px. 16px on mobile kills the zoom; the pill grows to a comfortable tap target and the suggestions popover clamps to the viewport. */
@media (max-width: 768px) {
  .at-tag-inline-input {
    font-size: 16px !important;
    height: 34px !important;
    width: 140px !important;
    padding: 0 10px !important;
  }
  .at-tag-suggestions-pop {
    max-width: calc(100vw - 20px);
    min-width: 180px;
  }
}

/* v19: pie legend strike-off — click a tag to exclude/include it in the pie */
.tr-legend li[data-pie-tag]{cursor:pointer;user-select:none;-webkit-user-select:none;transition:opacity .15s ease}
.tr-legend li[data-pie-tag]:hover span{text-decoration-color:#275e50}
.tr-legend li.is-off{opacity:.55}
.tr-legend li.is-off span{text-decoration:line-through;text-decoration-thickness:2px;color:#8a968e}
.tr-legend li.is-off b{text-decoration:line-through;color:#8a968e}
.tr-legend li.is-off i{background:#c9d4cd!important;filter:grayscale(1)}

/* v19: chips own their gesture on touch (prevents iOS scroll claiming the pointer drag) */
.tr-day-entry,.tr-row{touch-action:none}

/* v19: current tracker pill = same green pill as task boards */
.tr-pill-wrap .tr-pill.active{background:linear-gradient(135deg,#275e50,#173d35);color:#fff;border-color:#b9d969;box-shadow:inset 0 0 0 1.5px rgba(185,217,105,.55),0 1px 4px rgba(23,61,53,.25)}
.tr-pill-wrap .tr-pill.active .tr-pill-star{color:#b9d969}
.tr-pill-wrap .tr-pill.active:hover{background:linear-gradient(135deg,#2d6a5a,#1d4a3e);border-color:#b9d969}


/* v20 mobile: task-modal footer stacks; buttons form clean 2-col grid (T152 followup: note was sharing the row with the grid, squeezing it) */
@media (max-width: 768px) {
  #task-modal-card .tm-footer { display: block; }
  #task-modal-card .tm-footer .tm-footer-note { display: flex; margin: 0 0 10px 0; }
}

/* v20 (T163b): tracker name pill fills its FULL capsule like task-board pills. Root cause: active state was styled on the inner .tr-pill (padding:0) while the visible capsule is the wrapper .tr-pill-wrap (white bg + 4px padding) — the green hugged only the text. Mirror .board-tab.active on the wrapper via :has(). */
.tr-pill-wrap:has(.tr-pill.active){background:linear-gradient(135deg,#275e50,#173d35);border-color:#b9d969;box-shadow:inset 0 0 0 1.5px rgba(185,217,105,.55),0 1px 4px rgba(23,61,53,.25);padding:4px 13px 4px 13px}
.tr-pill-wrap:has(.tr-pill.active) .tr-pill{color:#fff}
.tr-pill-wrap:has(.tr-pill.active) .tr-pill-count{background:rgba(255,255,255,.16);color:#e8f3e4}
.tr-pill-wrap:has(.tr-pill.active):hover{background:linear-gradient(135deg,#2d6a5a,#1d4a3e);border-color:#b9d969}
.tr-pill-wrap:has(.tr-pill.active) .tr-pill-unarch{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.35);color:#e8f3e4}
.tr-pill-wrap:has(.tr-pill.active) .tr-pill.active{background:none;border:0;box-shadow:none}
.tr-pill-wrap:has(.tr-pill.active):hover .tr-pill.active{background:none}

/* v22: iOS touch-drag gesture-claim guards — the 260ms long-press arm can trigger iOS
   text-selection/callout UI, which claims the gesture and fires pointercancel mid-drag.
   user-select/touch-callout off on chips (and the whole tracker grid during a drag) so
   WebKit never contests the pointer stream. The JS engine also completes the drop on
   pointercancel as a second line of defense. */
.tr-day-entry, .tr-row {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
body.tr-dragging, body.tr-dragging * {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* ---- v24 T187: tracker toast (#tr-toast) — was an unstyled div rendering as plain
   body text. Now a floating capsule matching the app toast (.toast): fixed top-center,
   dark green, slide-fade via .show (JS toggles only the class — no JS changes). */
#tr-toast {
  position: fixed;
  top: 92px;
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  z-index: 100200 !important;
  background: #173d35;
  color: #eef4ec;
  font: 600 12.5px 'DM Sans', sans-serif;
  padding: 10px 16px;
  border-radius: 11px;
  box-shadow: 0 10px 30px rgba(10,30,25,.28), 0 0 0 1px rgba(255,255,255,.06) inset;
  max-width: min(92vw, 560px);
  text-align: center;
  overflow-wrap: anywhere;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .24s ease, transform .24s cubic-bezier(.34,1.4,.64,1), visibility 0s linear .24s;
}
#tr-toast.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
  transition: opacity .24s ease, transform .24s cubic-bezier(.34,1.4,.64,1);
}
@media (max-width: 768px) {
  #tr-toast { top: 66px; font-size: 12px; max-width: 90vw; }
}

/* ---- v24 T190: mobile empty date/time placeholders. Desktop Chromium shows native
   mm/dd/yyyy + --:-- for empty inputs; iOS Safari shows blank. Overlay the same
   placeholders on mobile only; removed as soon as a value is picked (JS toggles class). */
@media (max-width: 768px) {
  .task-modal-card input[type="date"].tm-empty-date::before,
  .task-modal-card input[type="time"].tm-empty-time::before {
    content: attr(data-ph);
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #8a968e;
    font-size: 14px;
    pointer-events: none;
  }
  .task-modal-card input[type="date"].tm-empty-date,
  .task-modal-card input[type="time"].tm-empty-time {
    position: relative;
    color: transparent;
  }
  .task-modal-card input[type="date"]:focus.tm-empty-date,
  .task-modal-card input[type="time"]:focus.tm-empty-time {
    color: transparent;
  }
}

/* T36: pie legend swatch tick (include-mode) */
.tr-legend li i{position:relative;cursor:pointer}
.tr-legend li i::after{content:"";position:absolute;inset:-2px;border-radius:4px;opacity:0;transform:scale(.5);transition:opacity .15s,transform .15s}
.tr-legend li i.is-sel{box-shadow:0 0 0 2px #275e50}
.tr-legend li i.is-sel::after{content:"\2713";opacity:1;transform:scale(1);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.55)}
.tr-legend li.is-idle{opacity:.55}
.tr-legend li.is-idle span,.tr-legend li.is-idle b{color:#8a968e}
.tr-legend li:hover i{transform:scale(1.15)}
.tr-legend li i{transition:transform .15s,box-shadow .15s}

/* T38: calendar icon visible on maximized task modal due-date field (parity with card) */
#task-modal .tm-due-row .due-input{flex:0 0 auto;width:auto;max-width:none;padding:4px 2px 4px 6px}
#task-modal .tm-due-row .due-input::-webkit-calendar-picker-indicator{flex:0 0 auto;margin-left:2px}

/* T-PIEFILTER: calendar tag-filter indicator chip (pie include-mode) */
.tr-inc-chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;background:#dbead3;border:1px solid #275e50;color:#173d35;font-size:12px;font-weight:600;cursor:pointer;white-space:nowrap;max-width:46vw;overflow:hidden;text-overflow:ellipsis}
.tr-inc-chip:hover{background:#cfdacf}
.tr-inc-chip .x{font-size:11px;opacity:.75}

/* ---- T33: boot loaders (tracker first-paint + task board overlay) — v33 ---- */
.tr-boot{min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#5f6f66;font-size:14px}
.tr-boot-logo{width:56px;height:56px;border-radius:16px;background:#173d35;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;animation:bootPulse 1.6s ease-in-out infinite}
.tm-boot-overlay{position:fixed;inset:0;z-index:100120;background:#f8f9f6;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;color:#5f6f66;font-size:14px;letter-spacing:.2px}
.tm-boot-logo{width:56px;height:56px;border-radius:16px;background:#173d35;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;animation:bootPulse 1.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.tr-boot-logo,.tm-boot-logo{animation:none}}


/* ===== v37: tracker main-category star + bold tags ===== */
.tr-tagpill-star{border:0;background:rgba(255,255,255,.35);color:inherit;width:15px;height:15px;border-radius:50%;font-size:9px;line-height:1;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:0;transition:background .15s ease, transform .1s ease}
.tr-tagpill-star:hover{background:rgba(255,255,255,.6)}
.tr-tagpill-star:active{transform:scale(.88)}
.tr-tagpill-star.on{background:#fff;color:#b8860b;box-shadow:0 1px 3px rgba(23,61,53,.35)}
.tr-tagpill.tr-main-pill{box-shadow:0 0 0 2px #b8860b55;font-weight:800}
.tr-row-tag.tr-main-tag{font-weight:800;text-decoration:underline;text-decoration-color:currentColor33;text-underline-offset:2px}
.tr-legend span.tr-legend-main{font-weight:800;text-decoration:underline;text-decoration-color:#b8860b66;text-underline-offset:2px}
.tr-tag-chip.tr-main-tag{font-weight:800}
.tr-tag-chip.tr-main-tag:not(.on){border-width:2px}


/* ===== v38: refined main-category star + starred pill styling ===== */
.tr-tagpill-star{width:17px;height:17px;font-size:10.5px;border-radius:50%;transition:background .16s ease, color .16s ease, transform .12s ease, box-shadow .16s ease}
.tr-tagpill-star:hover{background:rgba(255,255,255,.72);transform:scale(1.08)}
.tr-tagpill-star:active{transform:scale(.86)}
.tr-tagpill-star.on{
  background:linear-gradient(135deg,#f5d26b,#d99b1d);
  color:#fff;
  text-shadow:0 1px 1px rgba(122,84,9,.5);
  box-shadow:0 1px 3px rgba(23,61,53,.3), inset 0 0 0 1px rgba(255,255,255,.55), inset 0 -1px 2px rgba(146,100,10,.35);
}
.tr-tagpill-star.on:hover{transform:scale(1.1);box-shadow:0 2px 5px rgba(23,61,53,.35), inset 0 0 0 1px rgba(255,255,255,.6), inset 0 -1px 2px rgba(146,100,10,.35)}
.tr-tagpill.tr-main-pill{
  border-color:#b8860b;
  box-shadow:0 0 0 2px #ffffffcc, 0 0 0 3.5px #b8860b66, 0 3px 8px rgba(23,61,53,.16);
  font-weight:800;
  transition:box-shadow .18s ease, transform .18s ease;
}
.tr-tagpill.tr-main-pill:hover{transform:translateY(-1px);box-shadow:0 0 0 2px #ffffffcc, 0 0 0 3.5px #b8860b99, 0 5px 12px rgba(23,61,53,.2)}
.tr-tagpill{transition:box-shadow .18s ease, transform .18s ease}

/* mobile: bigger hit targets */
@media(max-width:768px){
  .tr-tagpill-star{width:19px;height:19px;font-size:12px}
  .tr-tagpill{padding:5px 9px;font-size:12.5px}
}

/* ===== v39: week/day/year theme sync (T55) ===== */
/* WEEK: green washes, today/weekend/special tints, header typography for .tr-wcol-title (template emits span+b) */
.tr-wcol{position:relative;background:linear-gradient(170deg,#f4f8f1 0%,#ffffff 55%);transition:border-color .15s,box-shadow .15s}
.tr-wcol::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;border-radius:3px 0 0 3px;background:linear-gradient(180deg,#9bc4b4,rgba(155,196,180,0));opacity:0;transition:opacity .15s;pointer-events:none}
.tr-wcol.has-entries{border-color:#cfdacf}
.tr-wcol.has-entries::before{opacity:.5}
.tr-wcol.has-entries:hover{box-shadow:0 4px 14px rgba(39,94,80,.10)}
.tr-wcol.weekend{background:linear-gradient(170deg,#f4f6f1 0%,#ffffff 60%)}
.tr-wcol.today{background:linear-gradient(170deg,#dbead3 0%,#e7f2df 65%);border-color:var(--tr-accent);box-shadow:0 0 0 1px var(--tr-accent)}
.tr-wcol.today::before{opacity:.9;background:linear-gradient(180deg,var(--tr-accent),rgba(39,94,80,0))}
.tr-wcol.has-special{background:linear-gradient(170deg,#fdf9e8 0%,#f8efd6 100%);border-color:#ecd9a0}
.tr-wcol.has-special::before{background:linear-gradient(180deg,#d9b64a,rgba(217,182,74,0))}
.tr-wcol.has-special .tr-wcol-title>span:first-child{color:#b8860b}
.tr-wcol.has-special .tr-wcol-title>b{color:#8a6508}
.tr-wcol.has-special.today{background:linear-gradient(170deg,#fdf3d0 0%,#f8efd6 60%);border-color:#d9b64a;box-shadow:0 0 0 1px #d9b64a}
.tr-wcol-title{display:flex;align-items:center;gap:6px;flex-wrap:wrap;min-width:0}
.tr-wcol-title>span:first-child{font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--tr-mut)}
.tr-wcol-title>b{font-size:15px;font-weight:800;color:var(--tr-ink);line-height:1}
.tr-wcol.today .tr-wcol-title>b{color:var(--tr-accent)}
/* DAY: card wash + lift matching month chips */
.tr-dayview .tr-row{background:linear-gradient(170deg,#f8faf7 0%,#ffffff 60%);border-color:#e2e8e0;border-radius:12px;transition:border-color .15s,box-shadow .15s,transform .15s}
.tr-dayview .tr-row:hover{border-color:#9bc4b4;box-shadow:0 4px 14px rgba(39,94,80,.13);transform:translateY(-1px)}
.tr-dayview .tr-row:active{transform:translateY(0);box-shadow:none}
/* YEAR: style emitted classes, current-month ring, green proportional bars */
.tr-mcard-name{font-size:13.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--tr-ink)}
.tr-mcard.has-entries{border-color:#cfdacf}
.tr-mcard.cur{border-color:var(--tr-accent);background:linear-gradient(170deg,#e7f2df 0%,#ffffff 70%);box-shadow:0 0 0 1px var(--tr-accent)}
.tr-mcard.cur .tr-mcard-name{color:var(--tr-accent)}
.tr-mcard-bar{margin-top:2px}
.tr-mcard-bar i{background:linear-gradient(90deg,#275e50,#9bc4b4)}

/* T-EDIT v40: pencil inline tag edit in tracker settings */
.tr-tagpill-edit{border:0;background:rgba(255,255,255,.35);color:inherit;width:15px;height:15px;border-radius:50%;font-size:9px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto;transition:background .15s ease,transform .12s ease}
.tr-tagpill-edit:hover{background:rgba(255,255,255,.7);transform:scale(1.12)}
.tr-tagpill-edit:active{transform:scale(.86)}
.tr-tagpill-edit-inp{width:110px;min-width:0;font:inherit;font-size:13px;font-weight:600;color:#17221e;background:#fff;border:1.5px solid #275e50;border-radius:8px;padding:3px 8px;outline:none}
.tr-tagpill-edit-inp:focus{border-color:#1d4a3e;box-shadow:0 0 0 3px rgba(39,94,80,.15)}
.tr-tagpill-edit-ok,.tr-tagpill-edit-no{border:0;width:17px;height:17px;border-radius:50%;font-size:10px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0;flex:0 0 auto}
.tr-tagpill-edit-ok{background:#275e50;color:#fff}
.tr-tagpill-edit-ok:hover{background:#1d4a3e}
.tr-tagpill-edit-no{background:rgba(23,34,30,.12);color:#5f6f66}
.tr-tagpill-edit-no:hover{background:rgba(23,34,30,.22)}
@media (max-width:768px){
  .tr-tagpill-edit{width:19px;height:19px;font-size:11px}
  .tr-tagpill-edit-inp{width:130px;font-size:16px}
  .tr-tagpill-edit-ok,.tr-tagpill-edit-no{width:21px;height:21px;font-size:12px}
}


/* ===== v41: kanban column resize ===== */
.kanban-column{position:relative}
.kb-col-resizer{position:absolute;top:10px;bottom:10px;right:-8px;width:14px;cursor:col-resize;z-index:6}
.kb-col-resizer::after{content:'';position:absolute;top:50%;right:5px;transform:translateY(-50%);width:4px;height:36px;border-radius:3px;background:transparent;transition:background .15s}
.kb-col-resizer:hover::after,.kanban-column.kb-resizing .kb-col-resizer::after{background:#275e50}
.kanban-column.kb-resizing{box-shadow:0 6px 18px rgba(23,61,53,.16);border-color:#275e50}
body.kb-col-resizing{cursor:col-resize !important;user-select:none !important}
body.kb-col-resizing *{cursor:col-resize !important}
.kanban.kb-resized{scrollbar-width:thin}
.kanban.kb-resized::-webkit-scrollbar{height:10px}
.kanban.kb-resized::-webkit-scrollbar-thumb{background:#c3cfc2;border-radius:6px}
.kanban.kb-resized::-webkit-scrollbar-track{background:transparent}
@media(max-width:768px){
  .kb-col-resizer{display:none !important}
}


/* ===== v42: subtask color palette + all-good ===== */
/* li background already inline via style attr; text ink adapt on colored bg */
li.subtask.has-color .subtask-edit-input,
li.subtask.has-color .subtask-title { color: #17221e; }

/* --- all-good button: task-card pill design (ALWAYS visible, all surfaces) --- */
.sub-ag-btn {
  border: 1px solid #e0e7de;
  background: #fff;
  color: #8a968e;
  min-width: 22px;
  height: 20px;
  border-radius: 999px;
  padding: 0 6px;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.sub-ag-btn .icon { width: 11px; height: 11px; stroke-width: 2.6; display: block; pointer-events: none; }
.sub-ag-btn:hover { border-color: #b9d969; color: #275e50; }
.sub-ag-btn.on {
  background: #e7f2df;
  border-color: #7fb069;
  color: #173d35;
  box-shadow: 0 1px 3px rgba(127, 176, 105, 0.28);
}
.sub-ag-btn.on .icon { stroke: #173d35; }

/* --- color button (hover-gated, sits with delete inside .subtask-actions) --- */
.sub-color-btn {
  border: 0;
  background: none;
  width: 18px;
  height: 18px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.sub-color-btn:hover { background: rgba(39, 94, 80, 0.08); }

/* ===== v48: subtask notes button + hover-open notes editor ===== */
.sub-notes-btn {
  border: 0;
  background: none;
  width: 18px;
  height: 18px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}
.sub-notes-btn:hover { background: rgba(39, 94, 80, 0.08); }
.sub-notes-btn .icon { width: 13px; height: 13px; }
.sub-notes-btn[data-notes-open="1"] { background: rgba(39, 94, 80, 0.14); }
.at-sub-notes {
  border: 0;
  background: none;
  width: 18px;
  height: 18px;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.at-sub-notes .icon { width: 13px; height: 13px; }
.at-sub-notes:hover { background: rgba(39, 94, 80, 0.08); }
.at-sub-notes[data-notes-open="1"] { background: rgba(39, 94, 80, 0.14); }
.sub-notes-pop {
  position: fixed;
  z-index: 100200;
  width: 320px;
  background: #ffffff;
  border: 1px solid #d8e0dc;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(23, 34, 30, 0.16);
  padding: 10px;
  font-family: inherit;
}
.sub-notes-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #52645d;
  margin: 0 2px 6px;
}
.sub-notes-ta {
  width: 100%;
  box-sizing: border-box;
  min-height: 84px;
  resize: vertical;
  border: 1px solid #cfd9d4;
  border-radius: 7px;
  padding: 8px;
  font-size: 13px;
  line-height: 1.45;
  font-family: inherit;
  color: #173d35;
  background: #fbfdfc;
}
.sub-notes-ta:focus { outline: none; border-color: #7fb069; box-shadow: 0 0 0 2px rgba(127, 176, 105, 0.18); }
.sub-notes-foot {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 10.5px;
  color: #7c8b84;
}
/* notes button hover-gating: mirror subtask delete/color contract */
.sub-notes-btn { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.subtask:hover .sub-notes-btn,
.subtask:focus-within .sub-notes-btn { opacity: 1; pointer-events: auto; }
.tm-list .subtask:hover .sub-notes-btn,
.tm-list .subtask:focus-within .sub-notes-btn { opacity: 1; pointer-events: auto; }
.at-sub-notes { opacity: 0; pointer-events: none; transition: opacity 0.15s ease; }
.at-sub-item:hover .at-sub-notes,
.at-sub-item:focus-within .at-sub-notes { opacity: 1; pointer-events: auto; }
@media (max-width: 768px) {
  .sub-notes-btn, .at-sub-notes { opacity: 0.8; pointer-events: auto; }
}
.sub-color-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(23, 34, 30, 0.25);
  display: block;
  transition: transform .12s ease;
}
.sub-color-btn:hover .sub-color-dot { transform: scale(1.25); }

/* --- palette pop (elevated, shared by all surfaces) --- */
.sub-color-pop {
  position: fixed;
  z-index: 100210;
  background: #fff;
  border: 1px solid #e2e8e0;
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(23, 34, 30, 0.18);
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(4, 26px);
  gap: 6px;
}
.sub-color-pop .sub-sw {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .1s ease, border-color .1s ease;
}
.sub-color-pop .sub-sw:hover { transform: scale(1.14); }
.sub-color-pop .sub-sw.on {
  border-color: #275e50;
  box-shadow: inset 0 0 0 2px #fff;
}
.sub-color-pop .sub-sw.none {
  background: #fff;
  border: 2px dashed #cfd8cf;
  font-size: 9px;
  color: #8a968e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.sub-color-pop .sub-close {
  grid-column: 1 / -1;
  border: 0;
  background: none;
  color: #5f6f66;
  font-size: 11px;
  cursor: pointer;
  padding: 2px 0 0;
}

/* --- table popover surface: all-good always visible, color+delete on hover --- */
.at-sub-item .at-sub-allgood-box {
  border: 1px solid #e0e7de;
  background: #fff;
  color: #8a968e;
  min-width: 22px;
  height: 20px;
  border-radius: 999px;
  padding: 0 6px;
  cursor: pointer;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.at-sub-item .at-sub-allgood-box .icon { width: 11px; height: 11px; stroke-width: 2.6; display: block; pointer-events: none; }
.at-sub-item .at-sub-allgood-box:hover { border-color: #b9d969; color: #275e50; }
.at-sub-item .at-sub-allgood-box.on {
  background: #e7f2df;
  border-color: #7fb069;
  color: #173d35;
  box-shadow: 0 1px 3px rgba(127, 176, 105, 0.28);
}
.at-sub-item .at-sub-allgood-box.on .icon { stroke: #173d35; }
.at-sub-item .at-sub-color {
  opacity: 0;
  transition: opacity .12s ease;
}
.at-sub-item:hover .at-sub-color,
.at-sub-item:focus-within .at-sub-color { opacity: 1; }
.at-sub-item .at-sub-color:hover { transform: scale(1.1); }

/* ===== v42b: subtask palette fixes (class-contract alignment + alignment polish) ===== */
/* 1) Card/modal color button's inner dot - JS emits .sub-swatch-dot; give it size/color */
.sub-swatch-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: repeating-conic-gradient(#cfd8cf 0 25%, #fff 0 50%) 0 0/8px 8px;
  box-shadow: inset 0 0 0 1px #cfd8cf;
}
/* has-color state colors the whole button softly and the dot takes the color via inline style */
.sub-color-btn.has-color .sub-swatch-dot {
  background: inherit;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.15);
}
/* 2) Palette pop swatches - JS emits .sub-color-opt (CSS only had .sub-sw) */
.sub-color-pop .sub-color-opt {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .1s ease, border-color .1s ease;
}
.sub-color-pop .sub-color-opt:hover { transform: scale(1.14); }
.sub-color-pop .sub-color-opt.on {
  border-color: #275e50;
  box-shadow: inset 0 0 0 2px #fff;
}
.sub-color-pop .sub-color-opt.none-opt {
  background: #fff;
  border: 2px dashed #cfd8cf;
  font-size: 9px;
  color: #8a968e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* v43: all-good redesigned as task-card pill (see block above); v42b glyph hack removed */

/* --- v43: color button hover-gated exactly like the delete icon --- */
.sub-color-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, background .14s ease, transform .12s ease;
}
.subtask:hover .sub-color-btn,
.subtask:focus-within .sub-color-btn { opacity: 1; pointer-events: auto; }
.tm-list .sub-color-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, background .14s ease, transform .12s ease;
}
.tm-list .subtask:hover .sub-color-btn,
.tm-list .subtask:focus-within .sub-color-btn { opacity: 1; pointer-events: auto; }

/* ============ v44: unified all-good — same look everywhere, unmistakable checked state ============ */
.allgood.on,
.allgood.at-allgood.on,
.allgood.big.on,
.sub-ag-btn.on,
.at-sub-item .at-sub-allgood-box.on {
  background: #7fb069;
  border-color: #7fb069;
  color: #fff;
  box-shadow: 0 1px 4px rgba(95, 141, 78, 0.4);
}
.allgood.on .icon,
.allgood.at-allgood.on .icon,
.allgood.big.on .icon,
.sub-ag-btn.on .icon,
.at-sub-item .at-sub-allgood-box.on .icon { stroke: #fff; stroke-width: 3; }
.allgood.on:hover,
.allgood.at-allgood.on:hover,
.allgood.big.on:hover,
.sub-ag-btn.on:hover,
.at-sub-item .at-sub-allgood-box.on:hover {
  background: #6da35b;
  border-color: #6da35b;
  color: #fff;
}
.allgood.at-allgood,
.allgood.at-allgood.big {
  border-radius: 999px;
  border-color: #e0e7de;
  background: #fff;
}
.allgood.at-allgood .icon { color: #8a968e; }

/* v44b: identical all-good capsule geometry everywhere (task card = reference: 34x22) */
.allgood.at-allgood,
.sub-ag-btn,
.at-sub-item .at-sub-allgood-box {
  width: auto;
  height: auto;
  min-width: 0;
  padding: 4px 10px;
  border: 1px solid #e0e7de;
  border-radius: 999px;
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.allgood.at-allgood .icon,
.sub-ag-btn .icon,
.at-sub-item .at-sub-allgood-box .icon {
  width: 12px;
  height: 12px;
  color: #8a968e;
}

/* ============ v45: popover sub-action parity + bare-dot color + smaller all-good ============ */
.at-sub-item .at-sub-delete {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease;
}
.at-sub-item:hover .at-sub-delete,
.at-sub-item:focus-within .at-sub-delete { opacity: 1; pointer-events: auto; }
.at-sub-item .at-sub-color {
  border: 0;
  background: none;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}
.at-sub-item .at-sub-color:hover { background: rgba(39, 94, 80, 0.08); }
/* smaller all-good capsule everywhere (was 34x22; icon 12 -> 10) */
.allgood:not(.big),
.allgood.at-allgood:not(.big) { padding: 3px 8px; }
.allgood:not(.big) .icon { width: 10px; height: 10px; }
.sub-ag-btn { padding: 3px 8px; }
.sub-ag-btn .icon { width: 10px; height: 10px; }
.at-sub-item .at-sub-allgood-box { padding: 3px 8px; }
.at-sub-item .at-sub-allgood-box .icon { width: 10px; height: 10px; }

/* v45b: touch devices — popover delete/color follow card-surface touch contract (always on, dimmed) */
@media (max-width: 768px) {
  .at-sub-item .at-sub-delete,
  .at-sub-item .at-sub-color {
    opacity: 0.8 !important;
    pointer-events: auto !important;
  }
}

/* ===== v46: three-state all-good - not-good (red X) ===== */
.allgood.ng, .sub-ag-btn.ng, .at-sub-allgood-box.ng {
  background: #c0564a !important;
  border-color: #a8463c !important;
  color: #fff !important;
  box-shadow: 0 1px 4px rgba(192, 86, 74, 0.35);
}
.allgood.ng:hover, .sub-ag-btn.ng:hover, .at-sub-allgood-box.ng:hover { background: #a8463c !important; }
.allgood, .sub-ag-btn, .at-sub-allgood-box { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
/* ===== v47: v46b task-level all-good square REVERTED per user - v45 capsule rules (7196-7200) apply to all four surfaces again ===== */
/* ===== v47b: subtask all-good shrunk 28x18 -> 24x16 (user: little big now) - task-level pills unchanged ===== */
.sub-ag-btn,
.at-sub-item .at-sub-allgood-box {
  padding: 2px 6px;
}



/* ================================================================ */
/* v49 (v=20261017_tracker51): subtask notes pop — mobile sheet + keyboard clamp */
/* ================================================================ */
.sub-notes-pop .sub-notes-done { display: none; }
@media (hover: none) and (pointer: coarse), (max-width: 768px) {
  .sub-notes-pop .sub-notes-done { display: inline-block; }
}
@media (max-width: 768px) {
  .sub-notes-pop.as-sheet {
    width: calc(100vw - 20px) !important;
    max-width: none;
  }
  .sub-notes-pop.as-sheet .sub-notes-head { font-size: 15px; padding: 8px 12px; }
  .sub-notes-pop.as-sheet .sub-notes-ta {
    width: 100%;
    font-size: 16px;
    line-height: 1.45;
    padding: 10px 12px;
    -webkit-appearance: none;
    appearance: none;
  }
  .sub-notes-pop.as-sheet .sub-notes-foot { padding: 8px 12px 10px; }
  .sub-notes-pop.as-sheet .sub-notes-done {
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid #7fb069;
    background: #e7f2df;
    color: #173d35;
    font-weight: 600;
    }
  .sub-notes-pop.as-sheet .sub-notes-done:active { background: #7fb069; color: #fff; }
}

/* v50: mobile date/time parity in maximized task modal (date was uncapped via L6806, time capped 88px) */
@media (max-width:768px){
  #task-modal .tm-due-row .due-input{width:auto;min-width:96px;max-width:136px;padding:6px 8px;font-size:16px;height:36px}
  #task-modal .tm-due-row .due-input::-webkit-calendar-picker-indicator{margin-left:2px}
  #task-modal .tm-due-row .due-time-input{width:auto;min-width:72px;max-width:110px;padding:6px 8px;font-size:16px;height:36px}
}

/* ===== v56: tiles are TRUE rounded SQUARES (user: "still vertical rectangles") ===== */
/* Root cause: height was content-driven (~131px stack) while grid tracks went down to
   120px (<=1280px) / 104px (mobile) -> taller-than-wide rectangles. aspect-ratio makes
   width drive height; breakpoints + name clamp keep content inside the square. */
.ph-grid.tile-view{grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.ph-tile{aspect-ratio:1/1;min-height:0;overflow:hidden}
/* mid breakpoint: 120px tracks starved the square; 150px keeps content comfortable */
@media(max-width:1280px){.ph-grid.tile-view{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}}
/* edit-mode tiles host a form -> escape the square */
.ph-tile:has(.ph-tile-edit){aspect-ratio:auto;min-height:170px;overflow:visible}
/* mobile: 1-line name so a ~104px square fits its content */
@media(max-width:640px){
  .ph-tile-name{font-size:12px;min-height:0;-webkit-line-clamp:1;line-clamp:1}
  .ph-tile{gap:4px;padding:9px 9px 8px}
}

/* ===== v55: hub tiles + toolbar compact/aligned (user: tiles were rounded square, Select/New too big) ===== */
/* Tiles: restore clearly-rounded square corners (13px read as near-square; match cards 16px) */
.ph-tile{border-radius:16px}
.ph-card{border-radius:16px}
/* Toolbar: Select + New were 39/36px vs 30px icon buttons — normalize to icon-btn scale */
.ph-actions .ph-btn{height:30px;padding:0 14px;font-size:12.5px;gap:6px}
.ph-actions .ph-btn .icon{width:14px;height:14px}
/* Alignment: same visual height for all toolbar controls */
.ph-actions .ph-search{height:30px;padding:0 14px}

/* ===== v57 tile content alignment (v=20261019_tracker57) =====
   Deterministic bands: fixed 22px top row -> name -> [compact badge] -> void -> pinned bottom cluster (stats/date/foot).
   Uniform 6px rhythm; tracker tiles align with task tiles; mobile clamps name to one real line. */
.ph-tile .ph-tile-top{min-height:22px}
.ph-tile .ph-tile-name{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}
.ph-tile .ph-tile-stats{margin-top:auto}
.ph-tile .ph-tile-foot{margin-top:0}
.ph-tile .ph-tile-date{margin-top:0}
.ph-tile .ph-kind-badge{margin-top:0;align-self:flex-start;display:inline-flex;align-items:center;gap:3px;padding:2px 6px;font-size:9px;line-height:1;border-radius:999px}
.ph-tile .ph-kind-badge .ph-kind-ico .icon{width:10px;height:10px}
@media (max-width:768px){
  .ph-tile .ph-tile-name{display:block;-webkit-line-clamp:unset;line-clamp:unset;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-height:none}
  /* bottom-anchored cluster: identical position regardless of badge/name height */
  .ph-tile .ph-tile-stats{position:absolute;left:11px;right:11px;bottom:56px;margin-top:0}
  .ph-tile .ph-tile-date{position:absolute;left:11px;right:11px;bottom:39px;margin-top:0}
  .ph-tile .ph-tile-foot{position:absolute;left:11px;right:11px;bottom:10px;margin-top:0}
  .ph-tile .ph-kind-badge{position:absolute;left:11px;bottom:102px;padding:2px 6px;font-size:9px}
  .ph-tile .ph-kind-badge .ph-kind-ico .icon{width:9px;height:9px}
}

/* ===== v58a hover bridge + timing (v=20261019_tracker59) ===== */
.sub-color-pop[data-via-hover="1"]::before,
.sub-notes-pop[data-via-hover="1"]::before {
  content: "";
  position: absolute;
  top: -14px;
  left: -10px;
  width: 72px;
  height: 14px;
  background: transparent;
  pointer-events: auto;
}
.sub-color-pop[data-via-hover="1"]::after {
  content: "";
  position: absolute;
  top: -14px;
  right: -10px;
  width: 26px;
  height: 14px;
  background: transparent;
  pointer-events: auto;
}
/* ===== v58a end ===== */
/* ===== v59b: not-good X icon white (user: x should be in white color but it is black) — explicit gray .icon color on child beats button inheritance; mirror the ON-state whitening for ng ===== */
.allgood.ng .icon, .sub-ag-btn.ng .icon, .at-sub-allgood-box.ng .icon, .allgood.at-allgood.ng .icon { color:#fff !important; stroke:#fff !important; }
/* ===== v59b end ===== */

/* ===== v61b: mobile compact tiles restore (user: compact tiles impacted on mobile) =====
   Root causes: (1) list-era @768 `.ph-grid` 1fr-force never excluded .tile-view -> 1 tile/row;
   (2) v56 cascade-end aspect-ratio + @1280 150px tracks out-cascaded the old @640 104px compact
   contract -> full-width ~490px clipped squares. Fix = @640-only re-assert of the designed grid.
   Desktop (>=769px) never enters these blocks - web UI untouched. */
@media (max-width:640px){
  .ph-grid.tile-view{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
  .ph-tile{aspect-ratio:1/1;min-height:92px;min-width:0;overflow:hidden;gap:4px;padding:9px 9px 8px;border-radius:16px}
  .ph-tile-name{font-size:12px;-webkit-line-clamp:1;line-clamp:1;max-height:none}
}
/* ===== v61b end ===== */

/* ===== v62: mobile 116px square band re-seat (user: compact tile contents overlapping) =====
   v57 cluster offsets (stats 56 / badge 102) were tuned for ~131px tiles; in v56's 116px square
   they collide: stats Y 39-59 vs name Y 36-51. Re-seat inside @640 only - desktop (>768) and
   tablets (641-768, ~180px tiles) keep the v57 layout, which is collision-free there. */
@media (max-width:640px){
  .ph-tile .ph-tile-top{min-height:18px}
  .ph-tile .ph-kind-badge{bottom:96px;white-space:nowrap;max-width:calc(100% - 22px);overflow:hidden;text-overflow:ellipsis}
  .ph-tile .ph-tile-stats{bottom:42px}
}
/* ===== v62 end ===== */

/* v61b marker: 20261016_tracker67 */

/* v62 marker: 20261020_tracker67 */
/* ===== v63: mobile tile flow-parity (user: contents not aligned like desktop; fit as desktop) =====
   v57 pinned stats/date/foot/badge with absolute bottom offsets (different mechanism from desktop flow).
   This restores the DESKTOP mechanism on phones: bands return to flow; .ph-tile-stats margin-top:auto
   re-creates the desktop void that pins the bottom cluster. Desktop (>768) never enters this block. */
@media (max-width:640px){
  .ph-tile{gap:3px}
  .ph-tile .ph-tile-top{min-height:16px}
  .ph-tile .ph-tile-stats{position:static;margin-top:auto}
  .ph-tile .ph-tile-date{position:static;margin-top:0}
  .ph-tile .ph-tile-foot{position:static;margin-top:0}
  .ph-tile .ph-kind-badge{position:static;align-self:flex-start;padding:2px 6px;font-size:9px}
  .ph-tile .ph-kind-badge .ph-kind-ico .icon{width:9px;height:9px}
}
/* ===== v63 end ===== */
/* v63 marker: 20261021_tracker67 */
/* v63b: tracker-tile text fit — flex boxes can't text-overflow; block+ellipsis clips cleanly */
@media (max-width:640px){
  .ph-tile .ph-kind-badge{display:block;max-width:100%;font-size:8.5px;letter-spacing:.2px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ph-tile .ph-kind-badge .ph-kind-ico{display:inline-block;vertical-align:-1.5px;margin-right:3px}
  .ph-tile .ph-kind-badge .ph-kind-ico .icon{width:8px;height:8px}
  .ph-tile .ph-tile-stats{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.6}
}
/* v63b end */
/* v64: stats gap restore */
@media (max-width:640px){
  .ph-tile .ph-tile-stats{display:flex;align-items:center;gap:5px}
  .ph-tile .ph-tile-stats span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* v64 end */

/* v63 marker: 20261021_tracker67 */

/* v64 marker: 20261022_tracker67 */
/* v65: subtask notes has-content differentiation (always visible when filled) */
.sub-notes-btn.has-notes,
.at-sub-notes.has-notes { opacity: 1 !important; pointer-events: auto !important; }
.sub-notes-btn.has-notes .icon,
.at-sub-notes.has-notes .icon { color: #7fb069 !important; stroke: #7fb069 !important; }
.sub-notes-btn.has-notes,
.at-sub-notes.has-notes { box-shadow: inset 0 0 0 1px rgba(127,176,105,.45); background: rgba(127,176,105,.12); }
/* v65 end — tracker67 */

.dt-w .dt-ph{display:none}
/* v51: mobile due date/time ghost-text parity (marker: 20261018_tracker67) — real overlay elements.
   Root cause: v24's ::before sat ON the <input> (replaced element) — WebKit/iOS never renders it,
   so mobile fields showed blank. v51 wraps each input in span.dt-w via JS and renders <i.dt-ph>. */
@media (max-width: 768px) {
  .dt-w{position:relative;display:inline-flex;align-items:center}
  .dt-w .dt-ph{position:absolute;left:10px;top:50%;transform:translateY(-50%);font-style:normal;color:#8a968e;font-size:13.5px;line-height:1;pointer-events:none;display:none;z-index:2;white-space:nowrap}
  .dt-w.dt-empty .dt-ph.dt-on{display:block !important}
  .dt-w input.tm-empty-date,.dt-w input.tm-empty-time{color:transparent !important}
  .dt-w input.tm-empty-date:focus,.dt-w input.tm-empty-time:focus{color:transparent !important}
  .dt-w input.dt-has-val{color:inherit !important}
}
/* v51 end — tracker67 */

/* v66 income/expense (tracker67): signed bars + category filter */
.tr-bar.neg{background:linear-gradient(180deg,#f8b4b4,#c0392b)}
.tr-bar-col.neg .tr-bar-val{color:#c0392b}
.tr-bar-col:not(.neg) .tr-bar-val{color:#275e50}
select#tr-category-filter{flex:0 0 auto}
/* v66 end — tracker67 */

/* v67 begin — signed colored money + check-row */
.tr-check-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.amt-pos{color:#059669 !important}
.amt-neg{color:#dc2626 !important}
.tr-amt.pos{color:#059669}
.tr-amt.neg{color:#dc2626}
.tr-legend b.pos{color:#059669}
.tr-legend b.neg{color:#dc2626}
.tr-chart-foot b.pos{color:#059669}
.tr-chart-foot b.neg{color:#dc2626}
.tr-cal-sum .pos,.tr-cal-sum .neg{font-weight:800}
.tr-cal-sum .pos{color:#059669}
.tr-cal-sum .neg{color:#dc2626}
.tr-day-total.pos{color:#059669;background:#e7f2df}
.tr-day-total.neg{color:#dc2626;background:#fde8e8}
.tr-wk-total .pos{color:#059669}
.tr-wk-total .neg{color:#dc2626}
.tr-wk-total.neg{background:#fde8e8;color:#dc2626}
.tr-wk-total.pos{background:#e7f2df}
.tr-bar-val.pos{color:#275e50}
.tr-bar-val.neg{color:#c0392b}
/* v67 end */

/* v70: entry notes indicator (task entries with populated notes) */
.tr-enote{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;width:16px;height:16px;border-radius:50%;background:#eef4ff;color:#4f6ef7;margin-left:6px}
.tr-enote .icon{width:10px;stroke-width:2.4}
.tr-day-entry .tr-enote{width:15px;height:15px;margin-left:5px}
.tr-day-entry .tr-enote .icon{width:9px;height:9px}

/* v71: content-adaptive month columns on mobile */
@media (max-width: 768px) {
  .tracker-root.tr-adaptive .tr-week-row {
    grid-template-columns: var(--tr-mcols, repeat(7, minmax(114px, 1fr))) 92px !important;
    min-width: 0 !important;
  }
  .tracker-root.tr-adaptive .tr-dow,
  .tracker-root.tr-adaptive .tr-grid {
    grid-template-columns: var(--tr-mcols, repeat(7, minmax(114px, 1fr))) !important;
  }
  .tracker-root.tr-adaptive .tr-cal-scroll {
    min-width: 0 !important;
  }
  .tracker-root.tr-adaptive .tr-dow,
  .tracker-root.tr-adaptive .tr-grid {
    min-width: 0 !important;
  }
  .tracker-root.tr-adaptive .tr-day-entry {
    max-width: none;
    white-space: nowrap;
  }
  .tracker-root.tr-adaptive .tr-day-total {
    max-width: none;
  }
}

/* v71b: signed colors for day-view + year-card totals */
.tr-wcol-total.neg{color:#dc2626;background:#fde8e8}
.tr-wcol-total.pos{color:#059669;background:#ecfdf5}
.tr-mcard-amt.neg{color:#dc2626}

/* ============================================================
   v74 WOW LAYER — styling-only polish. Scope: body.is-dashboard
   (post-login app; login/auth pages untouched). No geometry,
   logic, or behavior changes. Cascade-end: overrides earlier
   base styling without touching source rules.
   ============================================================ */

/* --- Ambient canvas: fixed light washes, corner glows --- */
body.is-dashboard{
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(185,217,105,.13), transparent 60%),
    radial-gradient(900px 480px at -8% 108%, rgba(127,176,105,.09), transparent 60%),
    #f4f6f1;
}

/* --- Brand text selection --- */
body.is-dashboard ::selection{background:rgba(185,217,105,.45);color:#173d35}

/* --- Accessible lime focus ring (keyboard only, via :focus-visible) --- */
body.is-dashboard :focus-visible{outline:2px solid #7fb069;outline-offset:2px;border-radius:8px;box-shadow:0 0 0 5px rgba(185,217,105,.22)}

/* --- Nav: deep-green glass bar (v75 fix: restore green + legible light text) --- */
.dashboard-nav{
  background:linear-gradient(135deg,#173d35 0%,#1e5245 55%,#173d35 100%) !important;
  box-shadow:0 1px 0 rgba(185,217,105,.14),0 14px 34px -20px rgba(23,61,53,.5) !important;
}
.dashboard-nav::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(90deg,rgba(185,217,105,.10),transparent 40%);
}
body.is-dashboard .dashboard-nav .brand-mark{color:#173d35;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.brand-mark{
  box-shadow:0 0 0 3px rgba(185,217,105,.26),0 0 22px rgba(185,217,105,.5);
}
.dashboard-nav p{color:#a8bdac}

/* --- Buttons: lift + depth (desktop pointer only; no layout shift) --- */
@media (hover:hover) and (pointer:fine){
  body.is-dashboard .primary{box-shadow:0 6px 16px -6px rgba(127,176,105,.55),inset 0 1px 0 rgba(255,255,255,.35);transition:box-shadow .18s ease,transform .18s ease,filter .18s ease}
  body.is-dashboard .primary:hover{transform:translateY(-1px);box-shadow:0 10px 22px -8px rgba(127,176,105,.65),inset 0 1px 0 rgba(255,255,255,.35);filter:saturate(1.06)}
  body.is-dashboard .primary:active{transform:translateY(0);box-shadow:0 4px 10px -5px rgba(127,176,105,.5)}
  body.is-dashboard .secondary:hover,body.is-dashboard .icon-btn:hover,body.is-dashboard .chip-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px -8px rgba(23,61,53,.35)}
  body.is-dashboard .secondary,body.is-dashboard .icon-btn,body.is-dashboard .chip-btn{transition:box-shadow .18s ease,transform .18s ease,border-color .18s ease}
  body.is-dashboard .secondary:hover,body.is-dashboard .chip-btn:hover{border-color:#b9d969}
}

/* --- Task cards: soft resting depth, hover lift (v81: accent line removed) --- */
body.is-dashboard .task-card{
  box-shadow:0 1px 3px rgba(23,61,53,.05),0 6px 16px -12px rgba(23,61,53,.14);
  transition:box-shadow .2s ease,transform .2s ease,border-color .2s ease;
}
@media (hover:hover) and (pointer:fine){
  body.is-dashboard .task-card{position:relative}
  body.is-dashboard .task-card:hover{
    transform:translateY(-4px);
    box-shadow:0 18px 34px -16px rgba(23,61,53,.32),0 6px 14px rgba(23,61,53,.10);
    border-color:rgba(185,217,105,.85);
  }
}

/* --- Kanban columns: softened borders + hover lens --- */
body.is-dashboard .kanban-column{
  transition:border-color .2s ease,box-shadow .2s ease;
  box-shadow:0 1px 2px rgba(23,61,53,.04);
}
@media (hover:hover) and (pointer:fine){
  body.is-dashboard .kanban-column:hover{border-color:rgba(185,217,105,.55);box-shadow:0 10px 26px -18px rgba(23,61,53,.25)}
}

/* --- Table rows: lime inset edge + warm wash on hover (no layout shift) --- */
body.is-dashboard .at-row{transition:background-color .15s ease,box-shadow .15s ease}
body.is-dashboard .at-row:hover{box-shadow:inset 3px 0 0 #b9d969}

/* --- Calendar day cells: hover ring, no geometry change --- */
body.is-dashboard .tr-day-entry{transition:background-color .15s ease,box-shadow .15s ease}
body.is-dashboard .tr-day-entry:hover{box-shadow:inset 0 0 0 1.5px rgba(127,176,105,.55)}

/* --- Tracker/label chips: crisper pill + micro shadow (no size change) --- */
body.is-dashboard .chip{box-shadow:0 1px 2px rgba(23,61,53,.08)}

/* --- Hub tiles: richer light, hover rise --- */
body.is-dashboard .ph-tile{
  transition:box-shadow .22s ease,transform .22s ease,border-color .22s ease;
  box-shadow:0 1px 3px rgba(23,61,53,.05),0 10px 24px -16px rgba(23,61,53,.16);
}
@media (hover:hover) and (pointer:fine){
  body.is-dashboard .ph-tile:hover{
    transform:translateY(-3px);
    border-color:rgba(185,217,105,.75);
    box-shadow:0 22px 44px -20px rgba(23,61,53,.30),0 4px 10px rgba(23,61,53,.05);
  }
  body.is-dashboard .ph-tile:hover .eyebrow{letter-spacing:.14em}
}
body.is-dashboard .eyebrow{transition:letter-spacing .25s ease,color .25s ease}

/* --- Progress bars: lime glow tip --- */
body.is-dashboard .ph-progress i{box-shadow:0 0 8px rgba(185,217,105,.55)}

/* --- Modals: deeper ambient shadow, brighter edge --- */
body.is-dashboard .task-modal-card{
  border-color:rgba(23,61,53,.10);
  box-shadow:0 30px 80px -24px rgba(23,61,53,.38),0 8px 24px -12px rgba(23,61,53,.16);
}

/* --- Slim brand scrollbars (colors only; widths untouched) --- */
body.is-dashboard ::-webkit-scrollbar-thumb{background:rgba(127,176,105,.38);border-radius:999px}
body.is-dashboard ::-webkit-scrollbar-thumb:hover{background:rgba(127,176,105,.6)}

/* --- Mobile: static richness only — no hover lifts, no backdrop cost --- */
@media (max-width:768px){
  .dashboard-nav{
    background:linear-gradient(135deg,#173d35 0%,#1e5245 55%,#173d35 100%) !important;
    box-shadow:0 1px 0 rgba(185,217,105,.14),0 8px 22px -16px rgba(23,61,53,.45) !important;
  }
  .task-card,.ph-tile{box-shadow:0 1px 3px rgba(23,61,53,.07),0 8px 18px -14px rgba(23,61,53,.16)}
  .task-modal-card{box-shadow:0 24px 60px -24px rgba(23,61,53,.35)}
}

/* --- Reduced motion: neutralize wow transitions --- */
@media (prefers-reduced-motion:reduce){
  body.is-dashboard .task-card,
  body.is-dashboard .kanban-column,
  body.is-dashboard .at-row,
  body.is-dashboard .tr-day-entry,
  body.is-dashboard .ph-tile,
  body.is-dashboard .eyebrow,
  body.is-dashboard .primary,
  body.is-dashboard .secondary,
  body.is-dashboard .icon-btn,
  body.is-dashboard .chip-btn{transition:none !important}
  body.is-dashboard .task-card:hover,body.is-dashboard .ph-tile:hover,
  body.is-dashboard .primary:hover,body.is-dashboard .secondary:hover,
  body.is-dashboard .icon-btn:hover,body.is-dashboard .chip-btn:hover{transform:none !important}
}

/* === v75 WOW — theme gradients: columns, date alignment (appended 20261019) === */
body.is-dashboard .kanban-column{--col-tint:23,61,53}
body.is-dashboard .kanban-column[data-status="Backlog"]{--col-tint:192,138,44}
body.is-dashboard .kanban-column[data-status="To Do"]{--col-tint:124,96,191}
body.is-dashboard .kanban-column[data-status="In Progress"]{--col-tint:58,110,189}
body.is-dashboard .kanban-column[data-status="Park or Delegate"]{--col-tint:214,116,60}
body.is-dashboard .kanban-column[data-status="Completed"]{--col-tint:127,176,105}
body.is-dashboard .kanban-column[data-status="Pending"]{--col-tint:192,138,44}
body.is-dashboard .kanban-column[data-status="Blocked"]{--col-tint:220,80,80}
body.is-dashboard .kanban-column:not([data-status=""]){background:linear-gradient(180deg,rgba(var(--col-tint),.085) 0%,rgba(var(--col-tint),.028) 34%,rgba(255,255,255,0) 70%),#fdfefd}
body.is-dashboard .kanban-column:not([data-status=""]):hover{background:linear-gradient(180deg,rgba(var(--col-tint),.13) 0%,rgba(var(--col-tint),.045) 40%,rgba(255,255,255,0) 72%),#fdfefd}
body.is-dashboard .kb-col-head{color:rgba(var(--col-tint),1)}
body.is-dashboard .kb-col-head .column-count{background:rgba(var(--col-tint),.14);color:rgba(var(--col-tint),.95)}
body.is-dashboard .kb-col-resizer{background:linear-gradient(180deg,transparent,rgba(var(--col-tint),.25),transparent)}
@media (hover:hover) and (pointer:fine){
  body.is-dashboard .kanban-column:not([data-status=""]){transition:background .2s ease}
}
/* date/time inputs: centered value, unified padding across all surfaces.
   Moved to cascade-end (file tail) — beats L6806 desktop rule. */
.dt-w .dt-ph{width:max-content}
.dt-w{display:inline-flex;position:relative}
/* === END v75 WOW === */

/* === v75b cascade-end — due date/time alignment (beats all earlier rules) === */
.due-input,
.due-time-input{
  padding:6px 10px !important;
  text-align:center !important;
  box-sizing:border-box;
}
body.is-dashboard .due-input::-webkit-datetime-edit{padding:0}
body.is-dashboard .due-time-input{letter-spacing:.5px}
body.is-dashboard .dt-w .dt-ph{
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:max-content;pointer-events:none;
}
/* card-level due chips: same centered alignment */
.dt-w input[type="date"],.dt-w input[type="time"]{
  padding:4px 8px !important;
  text-align:center !important;
}
/* === END v75b === */
/* === END v74 WOW LAYER === */

/* === v77 WOW - board header light-aurora + tracker modern layer (20261019) === */

/* ---- Board header: aurora washes + light separation (children stay dark-ink/white-chip) ---- */
.board-header{position:relative;isolation:isolate;z-index:9999}
.board-header::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:
    radial-gradient(520px 200px at 12% 0%,rgba(185,217,105,.20),transparent 62%),
    radial-gradient(480px 220px at 88% 100%,rgba(127,176,105,.12),transparent 62%),
    radial-gradient(360px 180px at 92% 8%,rgba(255,255,255,.85),transparent 60%)}
.board-name{transition:letter-spacing .25s ease}
.board-name::selection{background:rgba(185,217,105,.45)}

/* ---- Tracker: page canvas scene ---- */
body:has(.tracker-root){background:radial-gradient(900px 420px at 85% -5%,rgba(185,217,105,.16),transparent 62%),
    radial-gradient(700px 380px at -10% 30%,rgba(127,176,105,.10),transparent 62%),
    radial-gradient(600px 300px at 50% 110%,rgba(23,61,53,.05),transparent 65%),
    linear-gradient(180deg,#f6f9f1 0%,#f0f6ea 45%,#eaf3e2 100%) fixed;}
/* v83: canvas moved to body — full-bleed green, content still centered */
.tracker-root{position:relative;isolation:isolate;background:transparent;position:relative;isolation:isolate;
  
  padding:16px 16px 48px;border-radius:18px;min-height:100vh}
body:has(.tracker-root)::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:repeating-linear-gradient(-45deg,rgba(255,255,255,.30) 0 2px,transparent 2px 26px);opacity:.45}
/* v83: stripe texture now full-bleed on body */
.tracker-root::before{content:none;}

/* ---- Tracker header: frosted sticky bar ---- */
.tr-header{position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(246,249,241,.94),rgba(240,246,234,.88));
  -webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);
  border-radius:0 0 16px 16px;margin:-16px -16px 10px;padding:10px 16px;
  border-bottom:1px solid rgba(226,232,224,.75)}

/* ---- Header action buttons: tactile lift ---- */
.tr-back,.tr-icon-btn{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tr-back:hover,.tr-icon-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px -6px rgba(23,61,53,.25);border-color:#b9d969}
#tr-menu-btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px -6px rgba(23,61,53,.25);border-color:#b9d969}

/* ---- View switch (D/W/M/Y) segmented control ---- */
.tr-view-switch{background:linear-gradient(135deg,#fff,rgba(231,242,223,.6));border:1px solid #d5e4c8;border-radius:999px;padding:3px;box-shadow:inset 0 1px 2px rgba(23,61,53,.06),0 2px 10px -6px rgba(23,61,53,.15)}
.tr-view-btn{border-radius:999px;transition:background .18s ease,color .18s ease,box-shadow .18s ease,transform .18s ease}
.tr-view-btn:hover{color:#173d35;background:rgba(185,217,105,.22)}
.tr-view-btn.active{background:linear-gradient(135deg,#173d35,#2f6e57);color:#f5f5ed;box-shadow:0 3px 10px -3px rgba(23,61,53,.4)}
.tr-view-btn.active:hover{transform:translateY(-1px);box-shadow:0 5px 16px -4px rgba(23,61,53,.45)}

/* ---- Calendar day cells (month view): lift + today ring ---- */
.tr-day{position:relative;border-radius:11px;transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease,background .16s ease}
.tr-day:hover{transform:translateY(-2px);box-shadow:0 8px 18px -10px rgba(23,61,53,.22);border-color:#a9cf96}
/* v83: thick today boundary — inset ring can never paint outside the cell */
.tr-day.today{border:2px solid #7fb069;box-shadow:inset 0 0 0 2px #7fb069, inset 0 0 0 4px rgba(255,255,255,.55)}
/* v83: today dot removed (overflowed cell boundary) */
.tr-day.today::before{content:none;}

/* ---- Week columns + year cards ---- */
.tr-wcol.today{border-color:#7fb069;box-shadow:0 0 0 2px rgba(127,176,105,.3),0 10px 22px -12px rgba(23,61,53,.2)}
.tr-wcol:hover{border-color:#a9cf96;box-shadow:0 8px 18px -10px rgba(23,61,53,.16)}
.tr-mcard{transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.tr-mcard:hover{transform:translateY(-2px);box-shadow:0 10px 22px -12px rgba(23,61,53,.2);border-color:#a9cf96}
.tr-mcard-bar i{background:linear-gradient(90deg,#7fb069,#b9d969)}

/* ---- Charts: soft depth ---- */
.tr-pie{filter:drop-shadow(0 4px 10px rgba(23,61,53,.10))}
.tr-bars{filter:drop-shadow(0 3px 8px rgba(23,61,53,.06))}
.tr-bar{border-radius:6px 6px 2px 2px;transition:filter .15s ease}
.tr-bar-col:hover .tr-bar{filter:brightness(1.08)}
.tr-bar-col:hover .tr-bar-val{color:#173d35}

/* ---- Entry rows: gentle hover ---- */
.tr-row{transition:border-color .15s ease,box-shadow .15s ease,background .15s ease}
.tr-row:hover{border-color:#a9cf96;box-shadow:0 3px 12px -6px rgba(23,61,53,.18)}

/* ---- Entry form + cards: white-glass surfaces ---- */
.tr-entry-form{background:linear-gradient(180deg,rgba(255,255,255,.92),rgba(246,249,241,.88));border:1px solid #d5e4c8;border-radius:14px;padding:16px;box-shadow:0 8px 24px -14px rgba(23,61,53,.18)}
.tr-main-pill{transition:box-shadow .16s ease,border-color .16s ease}
.tr-main-pill:hover{border-color:#b9d969;box-shadow:0 2px 10px -4px rgba(127,176,105,.4)}

/* ---- Motion safety ---- */
@media (prefers-reduced-motion: reduce){
  .board-header,.tracker-root *{transition:none !important;animation:none !important}
}
/* === END v77 WOW === */
/* v83-end: thick today boundary wins over .has-entries.today accent */
body:has(.tracker-root) .tr-day.today,
body:has(.tracker-root) .tr-day.has-entries.today{
  border:2px solid #7fb069;
  box-shadow:inset 0 0 0 2px #7fb069, inset 0 0 0 4px rgba(255,255,255,.55);}
body:has(.tracker-root){background-attachment:fixed,fixed,fixed,fixed;}
/* === v84 time-field overlap fix (user: time icon overlaps time text) === */
/* root cause: 88px max-width - 20px padding = 66px content; '10:30 PM' ~55px
   + clock icon ~17px cannot both fit -> webkit paints indicator over text.
   Widen to 104px and pin the text field (no-shrink, like the date input). */
.due-time-input{max-width:120px !important}
.due-time-input{padding:6px 12px !important}
.due-time-input::-webkit-datetime-edit{flex:0 0 auto;padding:0}
.due-time-input::-webkit-calendar-picker-indicator{margin:0;flex:0 0 auto}
@media (max-width:768px){.due-time-input{max-width:140px !important}}
/* === END v84 time-field === */
/* === v85: 3D depth for board-header dropdowns (priority / eisenhower / due) ===
   Scoping contract: .board-filter-dd is the shared wrapper for the three
   header dropdowns ONLY (table-row matrix-pop is NOT a descendant).
   Hard constraint: no transform on any ANCESTOR of .filter-pop (it is
   position:fixed, z-12000 - ancestor transform would hijack containment,
   breaking the v79/v50 positioning math). All depth lives on the trigger
   and pop elements themselves. */

/* -- 1. Key-cap trigger: inset top highlight, bottom shade, hard bottom edge */
.board-filter-dd > .filter-trigger{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(27,58,47,.14),
    0 1px 0 rgba(27,58,47,.16),
    0 2px 0 rgba(27,58,47,.11),
    0 3px 0 rgba(27,58,47,.07),
    0 4px 6px -2px rgba(27,58,47,.22);
}
.board-filter-dd > .filter-trigger:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.18),
    0 1px 0 rgba(27,58,47,.19),
    0 2px 0 rgba(27,58,47,.14),
    0 3px 0 rgba(27,58,47,.09),
    0 4px 8px -2px rgba(27,58,47,.26);
}
/* Pressed/open state: key sinks - bottom edges collapse to 1px, face darkens,
   highlight line drops inward like a real key being pressed down. */
.board-filter-dd.open > .filter-trigger,
.board-filter-dd.is-open > .filter-trigger{
  box-shadow:
    inset 0 2px 4px rgba(27,58,47,.18),
    inset 0 -1px 0 rgba(255,255,255,.55),
    0 1px 0 rgba(27,58,47,.12);
}
.board-filter-dd.open > .filter-trigger:active,
.board-filter-dd.is-open > .filter-trigger:active{
  transform:translateY(1px);
  box-shadow:inset 0 2px 5px rgba(27,58,47,.24), 0 0 0 rgba(27,58,47,0);
}

/* -- 2. Floating-slab panel: layered drop shadow reads as lifted glass */
.board-filter-dd > .filter-pop{
  box-shadow:
    0 1px 2px rgba(27,58,47,.08),
    0 4px 10px -2px rgba(27,58,47,.12),
    0 12px 28px -6px rgba(27,58,47,.20),
    0 24px 48px -12px rgba(27,58,47,.14),
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.06);
}
/* Bottom edge "thickness" of the slab */
.board-filter-dd > .filter-pop::after{
  content:'';
  position:absolute;
  left:8px; right:8px; bottom:-3px;
  height:3px;
  border-radius:0 0 12px 12px;
  background:linear-gradient(to bottom, rgba(27,58,47,.12), rgba(27,58,47,0));
  pointer-events:none;
}
/* Lid-opening entrance: the slab tilts toward the viewer as it rises */
@keyframes trpop3d{
  0%  {opacity:0; transform:perspective(600px) rotateX(24deg) translateY(-8px) scale(.96)}
  100%{opacity:1; transform:perspective(600px) rotateX(0deg) translateY(0) scale(1)}
}
.board-filter-dd > .filter-pop{animation:trpop3d .18s cubic-bezier(.2,.9,.3,1.15)}
/* Caret edge gets a subtle bevel so it reads as folded, not painted */
.board-filter-dd > .filter-pop::before{
  background:linear-gradient(to bottom, rgba(27,58,47,.05), transparent);
  height:12px;
}

/* -- 3. Tactile option rows: mini key-caps with press feedback */
.board-filter-dd .filter-opt,
.board-filter-dd .matrix-opt{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7), inset 0 -1px 0 rgba(27,58,47,.07);
}
.board-filter-dd .filter-opt:hover,
.board-filter-dd .matrix-opt:hover{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(27,58,47,.1), 0 1px 2px rgba(27,58,47,.08);
}
.board-filter-dd .filter-opt:active,
.board-filter-dd .matrix-opt:active{
  transform:translateY(1px);
  box-shadow:inset 0 1px 3px rgba(27,58,47,.16);
}
/* Selected option: checked key glows slightly raised */
.board-filter-dd .filter-opt.on,
.board-filter-dd .matrix-opt.on{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5), 0 1px 2px rgba(27,58,47,.1);
}

/* -- 4. Reduced motion: kill the 3D entrance + presses, keep static depth */
@media(prefers-reduced-motion:reduce){
  .board-filter-dd > .filter-pop{animation:none}
  .board-filter-dd .filter-opt:active,
  .board-filter-dd .matrix-opt:active,
  .board-filter-dd.open > .filter-trigger:active,
  .board-filter-dd.is-open > .filter-trigger:active{transform:none}
}
/* === END v85 === */
/* === v85b: hover/active 3D consistency on filter triggers ===
   Root cause: L595 :hover + L596 .active swap the bevel box-shadow for flat
   rings and (active) a flat pale grey-green face -> grey wash flattens the
   key-caps. These rules are (0,3,0)+ so they win the cascade at every state. */

/* Hover: face brightens (key lifting toward light), bevel deepens — no flat ring */
.board-filter-dd > .filter-trigger:hover{
  background:linear-gradient(to bottom, #ffffff, #f4f8ee);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,58,47,.18),
    0 1px 0 rgba(27,58,47,.19),
    0 2px 0 rgba(27,58,47,.14),
    0 3px 0 rgba(27,58,47,.09),
    0 5px 9px -2px rgba(27,58,47,.30);
}

/* Filter-applied (.active): tinted key-cap — green face WITH bevel, not flat */
.board-filter-dd > .filter-trigger.active{
  background:linear-gradient(to bottom, #f2f9ea, #e2efd6);
  border-color:#7fb069;
  color:#173d35;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.16),
    0 1px 0 rgba(27,58,47,.17),
    0 2px 0 rgba(27,58,47,.12),
    0 3px 0 rgba(27,58,47,.08),
    0 4px 7px -2px rgba(27,58,47,.25);
}
/* Active + hover: face lightens further (still raised) */
.board-filter-dd > .filter-trigger.active:hover{
  background:linear-gradient(to bottom, #f7fcf1, #eaf5de);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,58,47,.18),
    0 1px 0 rgba(27,58,47,.19),
    0 2px 0 rgba(27,58,47,.14),
    0 3px 0 rgba(27,58,47,.09),
    0 5px 9px -2px rgba(27,58,47,.30);
}
/* Active + open (pressed): inset sink keeps depth */
.board-filter-dd.open > .filter-trigger.active,
.board-filter-dd.is-open > .filter-trigger.active{
  box-shadow:
    inset 0 2px 4px rgba(27,58,47,.18),
    inset 0 -1px 0 rgba(255,255,255,.55),
    0 1px 0 rgba(27,58,47,.12);
}
/* === END v85b === */




/* === v86: blend the popup shadow (user: "on top of that popup UI there is
   something like shadow which is not looking good or blended") ===
   v85 painted ::before (the transparent 12px hover-bridge above the panel,
   base contract L605) with a dark gradient band and ::after with a 3px
   dark slab sliver - both sat ON the popup like an unblended shadow - and
   gave the panel a 5-layer shadow with a 48px-blur halo. This block
   restores both pseudos to transparent bridges and swaps the slab for a
   soft 3-layer ambient elevation. */
.board-filter-dd > .filter-pop::before,
.board-filter-dd > .filter-pop::after{background:transparent;background-image:none;box-shadow:none;pointer-events:auto}
/* soft ambient elevation: tight contact + mid depth + wide whisper */
.board-filter-dd > .filter-pop{
  box-shadow:
    0 1px 2px rgba(27,58,47,.06),
    0 4px 10px -2px rgba(27,58,47,.08),
    0 12px 28px -8px rgba(27,58,47,.10);
  border-color:rgba(27,58,47,.10);
}
/* retune the entrance: shorter travel, gentler settle (same name, JS-free) */
@keyframes trpop3d{
  from{opacity:0;transform:perspective(900px) rotateX(4deg) translateY(-5px) scale(.985)}
  60%{opacity:1}
  to{opacity:1;transform:perspective(900px) rotateX(0) translateY(0) scale(1)}
}
/* === END v86 === */

/* === v86b: option-row texture blend (vision pass: faint dark lines on
   every row = v85 key-cap inset bevels reading as slivers on white panel).
   Single soft hairline + gentle hover lift, consistent with v86 ambient. */
.board-filter-dd .filter-opt,
.board-filter-dd .matrix-opt{
  box-shadow:none;
}
.board-filter-dd .filter-opt:hover,
.board-filter-dd .matrix-opt:hover{
  box-shadow:0 1px 3px rgba(27,58,47,.07);
}
.board-filter-dd .filter-opt:active,
.board-filter-dd .matrix-opt:active{
  box-shadow:inset 0 1px 2px rgba(27,58,47,.08);
}
/* === END v86b === */

/* === v87: 3D key-cap depth on the five board-header stat pills
   (Pending / Total Tasks / Completed / All Good / Subtasks Done — all
   render as .metric). v85 key-cap language, v86 restraint: whisper
   alphas, no murk. */
/* base: raised key — inset top highlight + hairline bottom step + tiny ambient */
.board-metrics .metric{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(27,58,47,.06),
    0 1px 0 rgba(27,58,47,.05),
    0 2px 0 rgba(27,58,47,.04),
    0 3px 6px -2px rgba(27,58,47,.10);
}
/* hover: ambient deepens a touch + 1px lift (v87b: NO background change — user "it should not change background colors") */
.board-metrics .metric:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,58,47,.08),
    0 1px 0 rgba(27,58,47,.07),
    0 2px 0 rgba(27,58,47,.06),
    0 5px 12px -4px rgba(27,58,47,.14);
}
/* All Good pill: harmonize its own hover (higher specificity rule at L75
   would otherwise keep the old flat shadow) */
.board-metrics .metric[data-toggle-allgood-filter]:hover{
  border-color:#a8ce9f;
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,58,47,.08),
    0 1px 0 rgba(27,58,47,.07),
    0 2px 0 rgba(27,58,47,.06),
    0 5px 12px -4px rgba(27,58,47,.14);
}
/* pressed: key sinks */
.board-metrics .metric:active,
.board-metrics .metric[data-toggle-allgood-filter]:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 1px 3px rgba(27,58,47,.14),
    inset 0 -1px 0 rgba(255,255,255,.5),
    0 0 0 rgba(27,58,47,0);
}
/* filter-on state: keep the dark-green tinted key + lime ring, restore the
   bevel stack (the base rule at L77 wins by !important; this cascade-end
   !important lands after it) */
.board-metrics .metric.good.active,
.board-metrics .metric.good.is-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.25),
    0 1px 0 rgba(23,61,53,.5),
    0 2px 0 rgba(23,61,53,.4),
    0 0 0 2px rgba(185,217,105,.4),
    0 5px 12px -4px rgba(23,61,53,.35) !important;
}
/* === END v87 === */

/* ===================== v88: card matrix-pop containment fix =====================
   Root cause: body.is-dashboard .task-card:hover{transform:translateY(-4px)} (v81)
   makes the hovered card the containing block for the inline position:fixed
   .matrix-pop (CSS spec: transformed ancestor = containing block for fixed
   descendants). positionMatrixPop() computes VIEWPORT coords; under the transform
   they are reinterpreted card-relative -> pop lands clipped below (.task-list
   overflow). The pop only exists in DOM while state.matrixPopover is set, so the
   :has() gate below is exactly co-extensive with the bug: card keeps its v81 lift
   in every other moment; while its matrix menu is open it holds still.
   NOTE: fibonacci pop is a native <select> (immune); table-row matrix pop lives in
   .at-row whose hover adds only a box-shadow (no transform) - both untouched. */
body.is-dashboard .task-card:has(.matrix-pop){
  transform:none !important;
}
/* Belt-and-braces: non-dashboard surfaces (harness/legacy) never got the lift,
   but if any surface ever gains one, the open pop still forces stillness. */
.task-card:has(.matrix-pop){
  transform:none !important;
}
/* === END v88 === */

/* ===================== v89: timeline dock 3D key-caps =====================
   Board header timeline dock (right of the hour bars): [Live pill][sliders][gear].
   Same visual language as v87 header stat pills: raised key-cap (inset top
   highlight, stepped bottom edges, whisper ambient), hover lift + deeper bevel
   (NO background change - v87b contract), pressed inset sink on :active.
   The Live pill keeps its dark-green identity; depth reads via bevel, not color. */
.tl-bar-live-btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 1px 0 rgba(9,46,36,.9),
    0 2px 0 rgba(9,46,36,.45),
    0 1px 3px rgba(23,61,53,.22) !important;
}
.tl-bar-live-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 0 rgba(9,46,36,.95),
    0 2px 0 rgba(9,46,36,.5),
    0 2px 5px rgba(23,61,53,.3) !important;
}
.tl-bar-live-btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 3px rgba(9,46,36,.5),
    0 1px 2px rgba(23,61,53,.2) !important;
}
.tl-bar-settings-btn,
.tl-settings-btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.07),
    0 1px 2px rgba(27,58,47,.14),
    0 2px 3px rgba(27,58,47,.07) !important;
}
.tl-bar-settings-btn:hover,
.tl-settings-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,58,47,.17),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(27,58,47,.17),
    0 2px 4px rgba(27,58,47,.1) !important;
}
.tl-bar-settings-btn:active,
.tl-settings-btn:active{
  transform:translateY(1px);
  box-shadow:
    inset 0 2px 3px rgba(27,58,47,.22),
    0 1px 2px rgba(27,58,47,.12) !important;
}
@media (prefers-reduced-motion: reduce){
  .tl-bar-live-btn:hover,.tl-bar-live-btn:active,
  .tl-bar-settings-btn:hover,.tl-bar-settings-btn:active,
  .tl-settings-btn:hover,.tl-settings-btn:active{transform:none}
}
/* === END v89 === */
/* === v90: board-tools key-cap 3D + wording (Switch to Table View) === */
/* Applies the v87/v89 3D key-cap language to the whole board-tools cluster:
   view toggle, favorite, board settings, archived, archive, delete, open-tab, maximize. */
.board-tools .icon-btn{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(27,58,47,.08),
    inset 0 -2px 0 rgba(27,58,47,.05),
    0 1px 2px rgba(27,58,47,.10),
    0 2px 5px rgba(27,58,47,.06);
}
.board-tools .icon-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(27,58,47,.12),
    inset 0 -2px 0 rgba(27,58,47,.07),
    0 2px 4px rgba(27,58,47,.13),
    0 3px 8px rgba(27,58,47,.08);
}
.board-tools .icon-btn:active{
  transform:translateY(0);
  box-shadow:
    inset 0 2px 3px rgba(27,58,47,.16),
    inset 0 1px 2px rgba(27,58,47,.10),
    0 1px 1px rgba(27,58,47,.05);
}
/* active view (Table) and starred (fav .on) keep their designed tint, but stay 3D */
.board-tools .icon-btn.is-active{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 1px 2px rgba(27,58,47,.18),
    0 2px 5px rgba(27,58,47,.10);
}
.board-tools .icon-btn.is-active:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.38),
    inset 0 -1px 0 rgba(0,0,0,.16),
    0 2px 4px rgba(27,58,47,.20),
    0 3px 8px rgba(27,58,47,.12);
}
.board-tools .icon-btn.is-active:active{
  box-shadow:
    inset 0 2px 3px rgba(0,0,0,.22),
    inset 0 1px 2px rgba(0,0,0,.14),
    0 1px 1px rgba(27,58,47,.08);
}
.board-tools .icon-btn.on{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.14),
    0 1px 2px rgba(27,58,47,.18),
    0 2px 5px rgba(27,58,47,.10);
}
.board-tools .icon-btn.danger:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(160,45,45,.14),
    inset 0 -2px 0 rgba(160,45,45,.08),
    0 2px 4px rgba(160,45,45,.14),
    0 3px 8px rgba(160,45,45,.09);
}
body.is-dashboard .board-tools .icon-btn:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    inset 0 -1px 0 rgba(27,58,47,.12),
    inset 0 -2px 0 rgba(27,58,47,.07),
    0 2px 4px rgba(27,58,47,.13),
    0 3px 8px rgba(27,58,47,.08);
}
body.is-dashboard .board-tools .icon-btn:active{
  transform:translateY(0);
  box-shadow:
    inset 0 2px 3px rgba(27,58,47,.16),
    inset 0 1px 2px rgba(27,58,47,.10),
    0 1px 1px rgba(27,58,47,.05);
}
@media (prefers-reduced-motion: reduce){
  .board-tools .icon-btn:hover{transform:none}
  .board-tools .icon-btn:active{transform:none}
}

/* === v91: timeline time-pill + time-bar key-cap 3D (board header) ===
   Scope: .tl-pill (hour capsules) + .tl-hour-bar (15m interval bars).
   Same key-cap language as v87/v89/v90: inset top highlight, stepped
   bottom edges, whisper ambient. Dark states get dark-tuned bevels at
   MATCHING specificity (they declare their own shadows); ring states
   (bar-selected/range/has-block) keep their ring, gain inset bevel.
   .tl-drag-over (transient glow) + checkPulse (transform anim) untouched.
   v91 base shadows win over L1548 base (equal spec, later position);
   state twins beat L1548 state shadows only because they come later —
   hover twins carry >=1 extra class to win the hover cascade. */
.tl-pill{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(27,58,47,.12),
    inset 0 -2px 0 rgba(27,58,47,.07),
    0 1px 2px rgba(23,61,53,.10),
    0 2px 4px rgba(23,61,53,.07),
    0 4px 10px rgba(23,61,53,.05);
}
.tl-pill.tl-past{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(27,58,47,.12),
    inset 0 -2px 0 rgba(27,58,47,.07),
    0 1px 2px rgba(23,61,53,.10),
    0 2px 4px rgba(23,61,53,.07),
    0 4px 10px rgba(23,61,53,.05);
}
.tl-pill.tl-now{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(9,34,26,.30),
    0 2px 5px rgba(9,34,26,.22),
    0 4px 10px rgba(9,34,26,.16);
}
.tl-pill.tl-utilized{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(9,34,26,.30),
    0 2px 5px rgba(9,34,26,.22),
    0 4px 10px rgba(9,34,26,.16);
}
.tl-pill.tl-now.tl-utilized{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(9,34,26,.30),
    0 2px 5px rgba(9,34,26,.22),
    0 4px 10px rgba(9,34,26,.16);
}
.tl-pill.tl-past.tl-utilized{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(9,34,26,.30),
    0 2px 5px rgba(9,34,26,.22),
    0 4px 10px rgba(9,34,26,.16);
}
/* Amber finish family: amber-tinted bevels preserving identity */
.tl-pill.tl-finish{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(180,110,20,.16),
    inset 0 -2px 0 rgba(180,110,20,.10),
    0 1px 3px rgba(245,158,11,.20),
    0 2px 5px rgba(245,158,11,.14),
    0 4px 10px rgba(245,158,11,.10);
}
.tl-pill.tl-finish.tl-past{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(180,110,20,.18),
    inset 0 -2px 0 rgba(180,110,20,.12),
    0 1px 3px rgba(217,119,6,.22),
    0 2px 5px rgba(217,119,6,.16),
    0 4px 10px rgba(217,119,6,.11);
}
.tl-pill.tl-finish.tl-now{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.30),
    inset 0 -2px 0 rgba(0,0,0,.20),
    0 0 0 2px rgba(245,158,11,.35),
    0 1px 3px rgba(9,34,26,.30),
    0 2px 6px rgba(9,34,26,.22),
    0 4px 12px rgba(9,34,26,.16);
}
.tl-hour-bar{
  filter:none; /* replace base drop-shadow: box-shadow stack replaces it */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(27,58,47,.12),
    inset 0 -2px 0 rgba(27,58,47,.07),
    0 1px 2px rgba(23,61,53,.10),
    0 2px 4px rgba(23,61,53,.07),
    0 4px 10px rgba(23,61,53,.05);
}
.tl-hour-bar.is-checked{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(0,0,0,.28),
    inset 0 -2px 0 rgba(0,0,0,.18),
    0 1px 2px rgba(9,34,26,.30),
    0 2px 5px rgba(9,34,26,.22),
    0 4px 10px rgba(9,34,26,.16);
}
.tl-pill.tl-finish.tl-now:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.32),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 0 0 2px rgba(245,158,11,.42),
    0 2px 4px rgba(9,34,26,.34),
    0 3px 7px rgba(9,34,26,.26),
    0 5px 13px rgba(9,34,26,.20);
}
/* --- v91 hover: lift + deepen (state-matched, each beats its rest twin) --- */
.tl-pill:hover{
  transform:translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 2px 3px rgba(23,61,53,.14),
    0 3px 6px rgba(23,61,53,.10),
    0 5px 12px rgba(23,61,53,.07);
}
.tl-pill.tl-past:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,58,47,.16),
    inset 0 -2px 0 rgba(27,58,47,.10),
    0 2px 3px rgba(23,61,53,.18),
    0 3px 6px rgba(23,61,53,.13),
    0 5px 12px rgba(23,61,53,.09);
}
.tl-pill.tl-now:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.34),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 2px 4px rgba(9,34,26,.34),
    0 3px 7px rgba(9,34,26,.26),
    0 5px 13px rgba(9,34,26,.20);
}
.tl-pill.tl-utilized:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.34),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 2px 4px rgba(9,34,26,.36),
    0 3px 7px rgba(9,34,26,.28),
    0 5px 13px rgba(9,34,26,.22);
}
.tl-pill.tl-now.tl-utilized:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -1px 0 rgba(0,0,0,.36),
    inset 0 -2px 0 rgba(0,0,0,.24),
    0 2px 4px rgba(9,34,26,.40),
    0 3px 8px rgba(9,34,26,.30),
    0 5px 14px rgba(9,34,26,.24);
}
.tl-hour-bar:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 2px 3px rgba(23,61,53,.16),
    0 3px 6px rgba(23,61,53,.12),
    0 5px 12px rgba(23,61,53,.08);
}
.tl-hour-bar.is-checked:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(0,0,0,.34),
    inset 0 -2px 0 rgba(0,0,0,.22),
    0 2px 4px rgba(9,34,26,.36),
    0 3px 7px rgba(9,34,26,.28),
    0 5px 13px rgba(9,34,26,.22);
}
/* --- v91 pressed: inset sink; :hover:active winners beat state-hover
    shadows at (0,3,1)/(0,4,1) (existing utilized:hover + our twins) --- */
.tl-pill:active,
.tl-pill.tl-past:active,
.tl-pill.tl-now:active,
.tl-pill.tl-utilized:active,
.tl-pill.tl-now.tl-utilized:active,
.tl-hour-bar:active,
.tl-hour-bar.is-checked:active,
.tl-pill.tl-utilized:hover:active,
.tl-pill.tl-now.tl-utilized:hover:active,
.tl-pill.tl-finish:active,
.tl-pill.tl-finish.tl-past:active,
.tl-pill.tl-finish.tl-now:active{
  box-shadow:
    inset 0 2px 4px rgba(9,34,26,.22),
    inset 0 -1px 0 rgba(255,255,255,.55),
    0 1px 2px rgba(23,61,53,.10);
}
/* --- v91 ring keepers: pill-only (template truth: bars emit only
    is-checked/is-full/is-active; tl-bar-selected/has-block live on pills).
    tl-bar-selected family carries !important rings = designed selection
    identity, preserved untouched. .tl-has-block gains inset bevel (v87). --- */
.tl-pill.tl-has-block{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(27,58,47,.10),
    0 0 0 2px rgba(185,217,105,.35),
    0 1px 3px rgba(23,61,53,.12);
}
/* === END v91 === */


/* === v92: task-card container key-cap 3D (kanban card shell only) ===
   Container-only depth per user ("card first, contents later"). Card is a fixed-pop
   ancestor: NO transform on the card itself — hover lift expressed purely via
   shadow translation (v81's translateY lift RETIRED for the card). Drag-above/
   below green indicators + all-good ring kept: state-matched bevel twins.
   No background declarations by design. */

/* Rest: light key-cap (wins wow-layer (0,2,1) rest at (0,4,0)) */
body.is-dashboard .task-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(27,58,47,.07),
    0 1px 0 rgba(27,58,47,.03),
    0 2px 0 rgba(27,58,47,.02),
    0 2px 3px rgba(23,61,53,.07),
    0 6px 14px rgba(23,61,53,.06),
    0 10px 22px rgba(23,61,53,.045) !important;
}

/* Hover: lift expressed in shadow space only (no transform — pop ancestor) */
body.is-dashboard .task-card:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.07),
    0 2px 0 rgba(27,58,47,.04),
    0 3px 0 rgba(27,58,47,.03),
    0 5px 6px rgba(23,61,53,.09),
    0 12px 24px rgba(23,61,53,.08),
    0 18px 36px rgba(23,61,53,.06) !important;
}

/* Pressed: inset sink (v90c lesson: grouped winners incl. hover+active) */


/* All-good: keep green ring + green-tinted bevel (fixes pre-existing mask) */
body.is-dashboard .task-card.all-good,
body.is-dashboard .task-card.all-good:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(27,58,47,.07),
    0 1px 0 rgba(127,176,105,.35),
    0 2px 0 rgba(127,176,105,.25),
    0 4px 14px rgba(127,176,105,.25),
    0 9px 22px rgba(23,61,53,.06) !important;
}

/* Editing: keep violet identity + tinted bevel (fixes pre-existing mask) */
body.is-dashboard .task-card.is-editing,
body.is-dashboard .task-card.is-editing:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(27,58,47,.07),
    0 1px 0 rgba(124,96,191,.35),
    0 2px 0 rgba(124,96,191,.22),
    0 4px 14px rgba(124,96,191,.22),
    0 9px 22px rgba(23,61,53,.06) !important;
}

/* Completed: muted stacked-edge bevel (was mask-winner) */
body.is-dashboard .task-card.completed{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    inset 0 -1px 0 rgba(27,58,47,.06),
    0 1px 0 rgba(27,58,47,.03),
    0 2px 0 rgba(27,58,47,.02),
    0 3px 6px rgba(23,61,53,.05),
    0 7px 16px rgba(23,61,53,.04) !important;
}

/* Drag indicators: green bevel preserves the arrow direction (key-cap form) */
body.is-dashboard .task-card.drag-above,
body.is-dashboard .task-card.drag-below{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 3px 0 0 #7fb069,
    0 5px 10px rgba(127,176,105,.25),
    0 8px 18px rgba(23,61,53,.06) !important;
}
body.is-dashboard .task-card.drag-above{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.8),
    0 -3px 0 0 #7fb069,
    0 -5px 10px rgba(127,176,105,.22),
    0 6px 14px rgba(23,61,53,.05) !important;
}

/* Retire the v81 transform lift for the card (fixed-pop ancestor safety);
   depth now = shadow translation. Do NOT gate via :has(.matrix-pop) anymore. */
body.is-dashboard .task-card:hover{transform:none}
body.is-dashboard .task-card:active{transform:none}
body.is-dashboard .task-card{transition:box-shadow .16s ease}

@media (prefers-reduced-motion:reduce){
  body.is-dashboard .task-card{transition:none !important}
}
body.is-dashboard .task-card:active,
body.is-dashboard .task-card:hover:active{
  box-shadow:
    inset 0 1px 0 rgba(27,58,47,.06),
    inset 0 1px 4px rgba(27,58,47,.10),
    0 1px 0 rgba(27,58,47,.04) !important;
}
body.is-dashboard .task-card:hover:active{
  box-shadow:
    inset 0 1px 0 rgba(27,58,47,.06),
    inset 0 1px 4px rgba(27,58,47,.10),
    0 1px 0 rgba(27,58,47,.04) !important;
}

/* === END v92 === */

/* === v93: tag/chip family key-cap 3D ===
   Scope (user: "create 3d effect to the tags ... any tag like things, general tag,
   a tag with project and board name, in today: duration tag, overdue tag and so on").
   Interactive families: .tag-chip(+16 pb colors, .mini, .active ring,
   .origin-tag-chip variant), .tag-suggestion-pill, .ab-chip, .tm-tag-chip,
   .tr-tag-chip(+.on ring), .at-tag-chip(rest only - its !important table
   hover/active states are ring keepers, left untouched).
   Static labels: .due-chip(+5 urgency states inherit via base), .today-age,
   .tr-row-tag, .tr-inc-chip, .tl-chip-inline; micro: .bm-fav-tag/.bm-arch-tag.
   Orphans skipped (.origin-chip, .at-age-chip, .ph-today-tag - zero emission, v39).
   Recipe (v91-consistent): inset top highlight + stepped bottom edges + whisper
   ambient. Hover deepens in shadow space (existing chip transform lift stays).
   Pressed = inset sink at BLOCK END (v90c: winners last). Ring keepers keep
   rings - twins append bevel AROUND the ring, and pressed ring keepers at the
   tail stop the sink from erasing selection identity. The 16 pb-* colored
   hover glows survive via per-color bevel+glow twins (v87 lesson).
   No background/border/color changes anywhere - pure depth. */

/* --- light bevel base: interactive chip families (cascade end wins ties) --- */
.tag-chip, button.tag-chip,
.tag-suggestion-pill,
.origin-tag-chip,
.ab-chip,
.tm-tag-chip,
.tr-tag-chip,
.at-tag-chip {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(27,58,47,.12),
    inset 0 -2px 0 rgba(27,58,47,.07),
    0 1px 2px rgba(23,61,53,.10),
    0 2px 4px rgba(23,61,53,.07),
    0 4px 10px rgba(23,61,53,.05);
}

/* --- static chip labels: rest-only bevel (urgency state bgs keep working) --- */
.due-chip,
.today-age,
.tr-row-tag,
.tr-inc-chip,
.tl-chip-inline {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.85),
    inset 0 -1px 0 rgba(27,58,47,.12),
    0 1px 2px rgba(23,61,53,.10),
    0 2px 5px rgba(23,61,53,.06);
}

/* --- micro labels: proportional whisper bevel --- */
.bm-fav-tag, .bm-arch-tag {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.7),
    inset 0 -1px 0 rgba(27,58,47,.08),
    0 1px 2px rgba(23,61,53,.08);
}

/* --- pb-* per-color hover twins: bevel + colored glow (16 identities) --- */
.tag-chip.pb-amber:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(217,119,6,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-ruby:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(225,29,72,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-emerald:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(5,150,105,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-purple:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(147,51,234,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-sky:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(2,132,199,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-teal:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(13,148,136,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-orange:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(234,88,12,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-violet:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(124,58,237,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-indigo:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(79,70,229,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-fuchsia:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(192,38,211,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-cyan:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(8,145,178,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-lime:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(101,163,13,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-rose:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(190,24,93,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-slate:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(71,85,105,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-warm:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(120,83,50,.18),
    0 5px 12px rgba(23,61,53,.07);
}

.tag-chip.pb-sage:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 8px rgba(45,80,50,.18),
    0 5px 12px rgba(23,61,53,.07);
}

/* --- generic hover deepen (uncolored chips); at-tag-chip excluded: its
       !important table states are designed identity --- */
.tag-chip:hover, button.tag-chip:hover,
.tag-suggestion-pill:hover,
.ab-chip:hover,
.tm-tag-chip:hover,
.tr-tag-chip:hover {
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 -1px 0 rgba(27,58,47,.14),
    inset 0 -2px 0 rgba(27,58,47,.09),
    0 1px 2px rgba(23,61,53,.14),
    0 2px 6px rgba(23,61,53,.10),
    0 5px 12px rgba(23,61,53,.07);
}

/* --- selected ring keeper twin (tag picker): ring + bevel, hover included --- */
.tag-chip.active,
.tag-chip.active:hover {
  box-shadow:
    0 0 0 2px #173d35,
    inset 0 1px 0 rgba(255,255,255,.6),
    inset 0 -1px 0 rgba(27,58,47,.14),
    0 1px 3px rgba(23,61,53,.16);
}

/* --- tracker selected .on twin: ring + dark-tuned bevel (accent bg) --- */
.tr-tag-chip.on,
.tr-tag-chip.on:hover {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.55) inset,0 2px 8px rgba(0,0,0,.14),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(0,0,0,.20);
}

/* --- shadow transitions only where none exist (never clobber bg fades) --- */
.ab-chip,
.tm-tag-chip{transition:box-shadow .14s ease}

/* --- pressed sink: block-end winners (v90c) --- */
.tag-chip:active, button.tag-chip:active,
.tag-suggestion-pill:active,
.ab-chip:active,
.tm-tag-chip:active,
.tr-tag-chip:active,
.tag-chip:hover:active, button.tag-chip:hover:active,
.tag-suggestion-pill:hover:active,
.ab-chip:hover:active,
.tm-tag-chip:hover:active,
.tr-tag-chip:hover:active {
  box-shadow:
    inset 0 2px 4px rgba(23,61,53,.22),
    inset 0 1px 0 rgba(255,255,255,.35),
    0 1px 1px rgba(23,61,53,.08);
}

/* --- pressed ring keepers (sink must not erase selection identity) --- */
.tag-chip.active:active,
.tag-chip.active:hover:active {
  box-shadow:
    0 0 0 2px #173d35,
    inset 0 2px 4px rgba(23,61,53,.25);
}
.tr-tag-chip.on:active {
  box-shadow:
    0 0 0 2px rgba(255,255,255,.55) inset,0 2px 8px rgba(0,0,0,.14),
    inset 0 2px 4px rgba(0,0,0,.30);
}

/* === END v93 === */

/* ============ v94: all-good pill 3D key-cap — 4 surfaces x 3 states ============ */
/* rest: default — light bevel (inset white top highlight, stepped bottom, whisper ambient) */
.allgood, .sub-ag-btn, .at-sub-allgood-box {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(23, 61, 53, 0.07),
    inset 0 -2px 0 rgba(23, 61, 53, 0.04),
    0 1px 2px rgba(23, 61, 53, 0.10);
}
/* rest: ON (solid green) — keycap highlight on green + stepped dark-green bottom + designed green glow kept */
.allgood.on, .sub-ag-btn.on, .at-sub-allgood-box.on, .allgood.at-allgood.on {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(23, 61, 53, 0.22),
    inset 0 -2px 0 rgba(23, 61, 53, 0.12),
    0 1px 4px rgba(95, 141, 78, 0.40),
    0 1px 2px rgba(23, 61, 53, 0.08);
}
/* rest: NG (solid red, long-press) — same construction, red identity + designed red glow kept */
.allgood.ng, .sub-ag-btn.ng, .at-sub-allgood-box.ng {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(90, 30, 25, 0.25),
    inset 0 -2px 0 rgba(90, 30, 25, 0.13),
    0 1px 4px rgba(192, 86, 74, 0.35),
    0 1px 2px rgba(23, 61, 53, 0.08);
}
/* hover: deepen in shadow space — no background/color changes; state identity preserved */
.allgood:hover:not(.on):not(.ng), .sub-ag-btn:hover:not(.on):not(.ng), .at-sub-allgood-box:hover:not(.on):not(.ng) {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.85),
    inset 0 -1px 0 rgba(23, 61, 53, 0.07),
    inset 0 -2px 0 rgba(23, 61, 53, 0.04),
    0 2px 6px rgba(23, 61, 53, 0.16);
}
.allgood.on:hover, .sub-ag-btn.on:hover, .at-sub-allgood-box.on:hover, .allgood.at-allgood.on:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.38),
    inset 0 -1px 0 rgba(23, 61, 53, 0.22),
    inset 0 -2px 0 rgba(23, 61, 53, 0.12),
    0 2px 7px rgba(95, 141, 78, 0.50),
    0 1px 2px rgba(23, 61, 53, 0.08);
}
.allgood.ng:hover, .sub-ag-btn.ng:hover, .at-sub-allgood-box.ng:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    inset 0 -1px 0 rgba(90, 30, 25, 0.25),
    inset 0 -2px 0 rgba(90, 30, 25, 0.13),
    0 2px 7px rgba(192, 86, 74, 0.45),
    0 1px 2px rgba(23, 61, 53, 0.08);
}
/* pressed: inset sink — block end + !important beats state and hover twins; bg color untouched */
.allgood:active, .sub-ag-btn:active, .at-sub-allgood-box:active {
  box-shadow:
    inset 0 2px 3px rgba(23, 61, 53, 0.30),
    inset 0 1px 0 rgba(23, 61, 53, 0.12) !important;
}
/* === END v94 === */







/* ==========================================================================
   v95 Teams & Sharing UI — appended component styles
   ========================================================================== */

/* ---------- profile dropdown Teams item ---------- */
.profile-dropdown-item#profile-teams .profile-dropdown-ico { font-size: 15px; line-height: 1; }

/* ---------- teams page shell ---------- */
/* --tm-* tokens live on :root so modals appended to document.body resolve them too */
:root {
  --tm-line: rgba(23, 61, 53, 0.12);
  --tm-ink: #173d35;
  --tm-mut: #5a6b66;
}
.teams-page {
  max-width: 1160px;
  margin: 0 auto;
  padding: 28px 22px 80px;
}
.teams-topbar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.teams-title {
  font-size: 24px;
  font-weight: 700;
  color: var(--tm-ink);
  margin: 0 auto 0 0;
}
.tsel-label { font-size: 12px; color: var(--tm-mut); margin-right: 6px; }
#team-select {
  height: 30px;
  border: 1px solid var(--tm-line);
  border-radius: 8px;
  background: #fff;
  padding: 0 10px;
  font-size: 13px;
  color: var(--tm-ink);
}
.btn-primary {
  height: 32px;
  padding: 0 14px;
  border: none;
  border-radius: 9px;
  background: #173d35;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.btn-primary:disabled { opacity: 0.55; cursor: default; }
.btn-primary:hover:not(:disabled) { background: #1e5247; }

/* ---------- toolbar ---------- */
.teams-toolbar { display: flex; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.teams-toolbar input[type="search"] {
  flex: 1 1 220px;
  min-width: 180px;
  height: 32px;
  border: 1px solid var(--tm-line);
  border-radius: 9px;
  padding: 0 12px;
  font-size: 13px;
}
.teams-toolbar select {
  height: 32px;
  border: 1px solid var(--tm-line);
  border-radius: 9px;
  background: #fff;
  padding: 0 10px;
  font-size: 13px;
}

/* ---------- table ---------- */
.teams-table-wrap {
  border: 1px solid var(--tm-line);
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
}
.teams-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.teams-table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--tm-mut);
  padding: 10px 12px;
  border-bottom: 1px solid var(--tm-line);
  background: #f6f8f7;
  white-space: nowrap;
}
.teams-table td { padding: 9px 12px; border-bottom: 1px solid rgba(23,61,53,0.06); vertical-align: middle; }
.teams-table tr:last-child td { border-bottom: none; }
.tm-email { color: var(--tm-mut); }
.tm-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.tm-action {
  height: 26px;
  padding: 0 10px;
  border: 1px solid var(--tm-line);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  color: var(--tm-ink);
  cursor: pointer;
}
.tm-action:hover { background: #f0f4f2; }
.tm-action.danger { color: #b3372f; border-color: rgba(179, 55, 47, 0.3); }
.tm-action.danger:hover { background: #fdf1f0; }
.tm-action.sm { height: 24px; padding: 0 8px; font-size: 11px; }

/* pills */
.perm-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}
.perm-pill.p-read { background: #eef2f1; color: #40514c; border-color: #dde5e2; }
.perm-pill.p-edit { background: #e7f0fa; color: #2a5c8f; border-color: #d3e3f5; }
.perm-pill.p-admin { background: #f3ecfa; color: #6d3fa0; border-color: #e5d8f4; }
.status-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
}
.st-active { background: #e7f2df; color: #35682d; border-color: #d3e7c8; }
.st-invited { background: #fdf3e0; color: #8a6116; border-color: #f5e3bd; }
.st-deactivated { background: #f0f0f0; color: #666; border-color: #e0e0e0; }

/* summaries */
.tm-sum { white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.tm-name { font-weight: 500; }
.sum-count { font-weight: 700; color: var(--tm-ink); margin-right: 4px; }
.sum-zero { color: #b7c2be; }
.sum-pill {
  display: inline-block;
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
  background: #f0f4f2;
  border: 1px solid #e0e8e5;
  border-radius: 999px;
  font-size: 11px;
  padding: 1px 7px;
  margin-right: 4px;
  color: #40514c;
}
.sum-more { font-size: 11px; color: var(--tm-mut); }

/* pager + states */
.teams-pager { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-top: 1px solid var(--tm-line); }
.teams-pager button {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--tm-line);
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
}
.teams-pager button:disabled { opacity: 0.45; cursor: default; }
#tm-pageinfo { font-size: 12px; color: var(--tm-mut); }
.teams-state { padding: 22px 12px; text-align: center; color: var(--tm-mut); font-size: 13px; }
.teams-state.is-error { color: #b3372f; }
.teams-state.is-empty { color: var(--tm-mut); }
.teams-state.is-ok { color: #35682d; }

/* ---------- modals & panels ---------- */
.teams-modal-ov {
  position: fixed;
  inset: 0;
  background: rgba(12, 28, 24, 0.42);
  z-index: 100100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 6vh 16px 16px;
  overflow: auto;
}
.teams-modal, .sh-modal {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(9, 26, 22, 0.35);
  width: 100%;
  max-width: 440px;
  padding: 20px;
}
.sh-modal { max-width: 520px; }
.teams-modal h3 { margin: 0 0 14px; color: var(--tm-ink); font-size: 17px; }
.teams-modal label { display: block; font-size: 12px; color: var(--tm-mut); margin-bottom: 10px; }
.teams-modal input, .teams-modal select {
  display: block;
  width: 100%;
  height: 34px;
  margin-top: 4px;
  border: 1px solid var(--tm-line);
  border-radius: 9px;
  padding: 0 10px;
  font-size: 13px;
  background: #fff;
  color: var(--tm-ink);
  box-shadow: 0 1px 2px rgba(23, 61, 53, 0.05);
}
.teams-modal input:focus, .teams-modal select:focus {
  outline: none;
  border-color: #173d35;
  box-shadow: 0 0 0 3px rgba(23, 61, 53, 0.10);
}
.teams-modal input::placeholder { color: #9aa8a3; }
.am-note { font-size: 12px; color: var(--tm-mut); background: #f4f8f6; border-radius: 8px; padding: 8px 10px; margin: 8px 0; }
.am-err { color: #b3372f; font-size: 12px; min-height: 16px; }
.teams-modal-actions, .sh-actions, .invite-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.invite-actions { justify-content: center; }
/* footer buttons share one size — Cancel must match Send (user: cancel looked tiny) */
.teams-modal-actions .tm-action, .sh-actions .tm-action, .invite-actions .tm-action {
  height: 32px;
  padding: 0 14px;
  font-size: 13px;
  min-width: 92px;
}
.teams-modal-actions .btn-primary, .sh-actions .btn-primary, .invite-actions .btn-primary {
  min-width: 92px;
}

/* ---------- access panel ---------- */
.ap-ov { justify-content: flex-end; padding: 0; align-items: stretch; }
.ap-panel {
  background: #fff;
  width: min(480px, 100%);
  height: 100%;
  box-shadow: -18px 0 60px rgba(9, 26, 22, 0.28);
  display: flex;
  flex-direction: column;
}
.ap-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 18px 18px 8px; }
.ap-title { font-size: 17px; font-weight: 700; color: var(--tm-ink); }
.ap-sub { font-size: 12px; color: var(--tm-mut); margin-top: 2px; }
.ap-tabs { display: flex; gap: 4px; padding: 8px 18px 0; border-bottom: 1px solid var(--tm-line); }
.ap-tab {
  border: none;
  background: none;
  padding: 8px 12px;
  font-size: 13px;
  color: var(--tm-mut);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.ap-tab.is-active { color: var(--tm-ink); font-weight: 600; border-bottom-color: #173d35; }
.ap-search { padding: 10px 18px 4px; }
.ap-search input {
  width: 100%;
  height: 32px;
  border: 1px solid var(--tm-line);
  border-radius: 9px;
  padding: 0 10px;
  font-size: 13px;
}
.ap-body { flex: 1; overflow: auto; padding: 8px 18px 20px; }
.ap-group { margin-bottom: 14px; }
.ap-group-title { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--tm-mut); margin: 10px 0 6px; }
.ap-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid rgba(23,61,53,0.08);
  border-radius: 10px;
  margin-bottom: 6px;
  background: #fff;
}
.ap-row[draggable="true"] { cursor: grab; }
.ap-row-main { min-width: 0; }
.ap-row-name { font-weight: 600; color: var(--tm-ink); font-size: 13px; display: block; }
.ap-row-meta { font-size: 11px; color: var(--tm-mut); display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ap-row-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.ap-perm {
  height: 26px;
  border: 1px solid var(--tm-line);
  border-radius: 8px;
  font-size: 12px;
  background: #fff;
}
.ap-perm.is-pending { opacity: 0.5; }
.ap-foot { padding: 10px 18px 14px; font-size: 11px; color: var(--tm-mut); border-top: 1px solid var(--tm-line); }
.ap-group.drop-target { outline: 2px dashed #7fb069; outline-offset: 2px; border-radius: 10px; }

/* ---------- share dialog ---------- */
.sh-scope {
  font-size: 12px;
  color: var(--tm-mut);
  background: #f4f8f6;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 12px;
}
.sh-picker { margin-bottom: 8px; }
#sh-q {
  width: 100%;
  height: 32px;
  border: 1px solid var(--tm-line);
  border-radius: 9px;
  padding: 0 10px;
  font-size: 13px;
}
.sh-results { max-height: 180px; overflow: auto; margin-top: 6px; border: 1px solid rgba(23,61,53,0.08); border-radius: 10px; }
.sh-results:empty { display: none; }
.sh-opt {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 10px;
  border: none;
  border-bottom: 1px solid rgba(23,61,53,0.05);
  background: #fff;
  font-size: 13px;
  color: var(--tm-ink);
  cursor: pointer;
  text-align: left;
}
.sh-opt:hover:not(:disabled) { background: #f0f4f2; }
.sh-opt:disabled { opacity: 0.45; cursor: default; }
.sh-opt-email { font-size: 11px; color: var(--tm-mut); }
.sh-more { width: 100%; padding: 7px; border: none; background: #f6f8f7; font-size: 12px; color: var(--tm-mut); cursor: pointer; }
.sh-selected { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 10px; min-height: 24px; }
.sh-sel-empty { font-size: 12px; color: #b7c2be; }
.sh-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: #eef4f1;
  border: 1px solid #d9e5e0;
  color: #29524a;
  border-radius: 999px;
  padding: 3px 9px;
  font-size: 12px;
}
.sh-chip-x { border: none; background: none; cursor: pointer; font-size: 13px; color: #52706a; padding: 0 1px; }
.sh-perm { margin: 6px 0 4px; }
.sh-perm-label { font-size: 12px; color: var(--tm-mut); display: block; margin-bottom: 4px; }
.sh-radio { display: flex; gap: 14px; flex-wrap: wrap; }
.sh-radio-opt { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--tm-ink); cursor: pointer; }
.sh-note { font-size: 11px; color: var(--tm-mut); margin-top: 6px; }
.sh-people-head { font-size: 12px; font-weight: 600; color: var(--tm-ink); margin: 14px 0 6px; border-top: 1px solid var(--tm-line); padding-top: 12px; }
.sh-people { max-height: 240px; overflow: auto; }
.sh-person {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 7px 2px;
  border-bottom: 1px solid rgba(23,61,53,0.05);
}
.sh-person-main { min-width: 0; }
.sh-person-name { font-size: 13px; font-weight: 600; color: var(--tm-ink); display: block; }
.sh-person-email { font-size: 11px; color: var(--tm-mut); display: block; }
.sh-person-side { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.src-pill {
  font-size: 10px;
  background: #f0f4f2;
  border: 1px solid #e0e8e5;
  color: #5a6b66;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
}

/* ---------- invite page ---------- */
.invite-wrap { min-height: 70vh; display: flex; align-items: center; justify-content: center; }
.invite-card {
  background: #fff;
  border: 1px solid var(--tm-line);
  border-radius: 16px;
  box-shadow: 0 16px 50px rgba(9, 26, 22, 0.12);
  padding: 30px;
  max-width: 420px;
  width: 100%;
  text-align: center;
}
.invite-card h2 { color: var(--tm-ink); margin: 0 0 12px; }

/* ---------- board more popover ---------- */
.board-more-wrap { position: relative; display: inline-block; }
.board-more-pop {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  background: #fff;
  border: 1px solid var(--tm-line);
  border-radius: 12px;
  box-shadow: 0 14px 44px rgba(9, 26, 22, 0.18);
  min-width: 180px;
  z-index: 100060;
  overflow: hidden;
}
.board-more-pop .tr-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 9px 12px;
  border: none;
  background: #fff;
  font-size: 13px;
  color: var(--tm-ink);
  cursor: pointer;
}
.board-more-pop .tr-menu-item:hover { background: #f0f4f2; }

/* ---------- responsive ---------- */
@media (max-width: 768px) {
  .teams-page { padding: 18px 12px 70px; }
  .teams-table-wrap { overflow-x: auto; }
  .teams-table { min-width: 760px; }
  .ap-ov { padding: 0; }
  .sh-modal, .teams-modal { max-width: 100%; }
}
@media (max-width: 640px) {
  .tm-actions .tm-action { height: 24px; padding: 0 7px; font-size: 11px; }
}