/* UX overhaul (October 2026). Sections are added per feature below. */

/* New Project task rows share the project window's task card look: coloured left edge by who does the task, soft tint, rounded corners. */
#projectForm .builder-row{border:0;border-left:5px solid var(--task-identity,#29bea0);border-radius:11px;box-shadow:0 3px 8px rgba(20,45,60,.08);background:linear-gradient(105deg,#ddf5f0,#e5f7f3)}
#projectForm .builder-row.assignee-team{--task-identity:#8a78e9;background:linear-gradient(105deg,#ece9fb,#f1effc)}
#projectForm .builder-row.assignee-external{--task-identity:#e7ac43;background:linear-gradient(105deg,#fbf2e1,#fcf5e8)}
html[data-theme=dark] #projectForm .builder-row{background:linear-gradient(105deg,#143c3e,#133639)}
html[data-theme=dark] #projectForm .builder-row.assignee-team{background:linear-gradient(105deg,#243049,#1f2d42)}
html[data-theme=dark] #projectForm .builder-row.assignee-external{background:linear-gradient(105deg,#3a3020,#33291b)}

/* Calendar cards: a smaller picture and tighter padding give the title room, so it wraps between words and never splits one. */
.calendar-task{grid-template-columns:32px minmax(0,1fr)!important;gap:6px!important;padding:8px 7px!important}
.calendar-task .project-image-shell{width:32px!important;height:32px!important;min-width:32px!important;border-radius:9px!important;font-size:10px!important}
.calendar-task-context strong,.calendar-task-context span,.calendar-task-context small{overflow-wrap:break-word!important;word-break:normal!important}

/* Statistics: the legend sits under the donut instead of being squeezed beside it (it was about 50 px wide and overlapped its own numbers). */
.lifetime-business-stat{grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
.lifetime-legend{width:100%}

/* Projects page: lifecycle tabs above the search; each card gets a muted "next task, finish date" line. */
.lifecycle-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 14px}
.lifecycle-tabs .ghost-btn{border-radius:999px;padding:7px 16px;font-weight:600}
.lifecycle-tabs .ghost-btn[aria-pressed=true]{background:#0f9d7c;border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(15,157,124,.25)}
.project-next{display:block;margin-top:2px;font-size:11px;line-height:1.35;color:var(--muted,#5d6d65);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ===== Phone (up to 700 px): compact header, slim Today greeting so tasks show first, Calendar as a day-by-day list ===== */
@media (max-width:700px){
 .v10-global-controls{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:6px!important;overflow-x:auto;padding:2px 0 6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .v10-global-controls::-webkit-scrollbar{display:none}
 .v10-global-controls>*{flex:0 0 auto}
 .v10-global-controls .header-text-btn{padding:8px 11px!important;font-size:12px!important;white-space:nowrap}
 .account-control>span:not(.account-head-icon){display:none}
 .account-control{padding:8px 10px!important}
 .premium-workspace-hero{padding:14px 14px 12px!important;border-radius:18px!important;min-height:0!important}
 .premium-workspace-hero .global-head-row{display:grid!important;gap:6px}
 .premium-workspace-hero .global-greeting h2{font-size:22px!important;margin:0}
 .premium-workspace-hero .global-greeting p{font-size:12px!important;margin:2px 0 0!important}
 .premium-workspace-hero .metric-row{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:6px!important;margin-top:8px!important}
 .premium-workspace-hero .metric{display:grid!important;justify-items:center;text-align:center;padding:8px 4px!important;min-height:0!important;gap:0!important}
 .premium-workspace-hero .metric .section-icon,.premium-workspace-hero .metric small{display:none!important}
 .premium-workspace-hero .metric span{font-size:10px!important;line-height:1.15}
 .premium-workspace-hero .metric strong{font-size:20px!important;line-height:1.1}
 .calendar-board{grid-template-columns:minmax(0,1fr)!important;overflow-x:visible!important;gap:8px!important}
 .calendar-day{min-height:0!important}
 .calendar-day h3{display:flex;align-items:baseline;gap:8px}
 .calendar-empty{min-height:0!important;padding:0!important;text-align:left!important;opacity:.55}
 .calendar-task{grid-template-columns:40px minmax(0,1fr)!important}
 .calendar-task .project-image-shell{width:40px!important;height:40px!important;min-width:40px!important}
 .project-modal-head .project-icon-button,.project-modal-head .project-image-shell{width:64px!important;height:64px!important;min-width:64px!important}
 .project-modal-head .project-header-name{font-size:20px!important;line-height:1.15!important}
}
@media (max-width:700px){
 html body .premium-workspace-hero .v10-global-controls.premium-header-controls{display:flex!important;flex-wrap:nowrap!important;justify-content:flex-start!important;gap:6px!important;overflow-x:auto;margin:0!important;padding:0 0 4px!important;scrollbar-width:none}
 html body .premium-workspace-hero .v10-global-controls .header-text-btn{padding:8px 11px!important;font-size:12px!important;min-height:0!important;white-space:nowrap}
 html body .premium-workspace-hero .v10-global-controls .header-icon-btn,html body .premium-workspace-hero .v10-global-controls .account-control{flex:0 0 auto;min-height:0!important}
 .calendar-day h3 span{display:inline!important}
 .calendar-day h3{padding-bottom:0}
 .calendar-day-tasks:has(>.calendar-empty:only-child){display:none}
 .calendar-day:not(:has(.calendar-task)) h3{margin:0;padding:10px 12px}
}

/* ===== Task window: one save bar, hidden per-section save buttons, dependency chips ===== */
.task-section-save{display:none!important}
.task-save-bar{position:sticky;bottom:0;z-index:5;display:flex;align-items:center;justify-content:flex-end;gap:10px;margin:18px -4px 0;padding:12px 4px;background:linear-gradient(to top,var(--panel,#fff) 75%,rgba(255,255,255,0));border-top:1px solid var(--line,rgba(0,0,0,.08))}
.task-save-bar [data-task-save-status]{margin-right:auto;font-size:12px;color:var(--muted,#5d6d65)}
.task-effort-editor input{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--panel);color:var(--text);min-width:120px}
.dep-picker .dependency-choice{display:none!important}
.dep-picker{max-height:none!important;overflow:visible!important}
.dep-chips{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0}
.dep-chip{border:1px solid var(--line);background:color-mix(in srgb,#8a78e9 14%,var(--panel,#fff));border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer;color:var(--text)}
.dep-chip:disabled{opacity:.7;cursor:default}
.dep-none{font-size:12px;color:var(--muted,#5d6d65)}
.dep-search{width:100%;border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--panel);color:var(--text);margin-bottom:6px}
.dep-results{display:grid;gap:2px;max-height:210px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px;background:var(--panel)}
.dep-result{text-align:left;border:0;background:transparent;border-radius:8px;padding:7px 10px;cursor:pointer;color:var(--text);font-size:13px}
.dep-result:hover,.dep-result:focus-visible{background:color-mix(in srgb,#29bea0 14%,var(--panel,#fff))}

/* ===== Project window tabs ===== */
.project-tabs{display:flex;gap:4px;margin:0 0 14px;padding:4px;border-radius:14px;background:color-mix(in srgb,var(--text,#10213e) 6%,var(--panel,#fff));overflow-x:auto;scrollbar-width:none;position:sticky;top:0;z-index:6}
.project-tabs::-webkit-scrollbar{display:none}
.project-tab{flex:1 0 auto;border:0;background:transparent;border-radius:10px;padding:9px 16px;font-weight:650;font-size:14px;color:var(--muted,#5d6d65);cursor:pointer;white-space:nowrap}
.project-tab.active{background:var(--panel,#fff);color:var(--text,#10213e);box-shadow:0 2px 8px rgba(20,45,60,.14)}
.project-tab:focus-visible{outline:2px solid #20835d;outline-offset:2px}
.project-tab-count{margin-left:7px;padding:1px 7px;border-radius:999px;font-size:11px;font-weight:700;background:color-mix(in srgb,#29bea0 18%,var(--panel,#fff));color:var(--text,#10213e)}
.project-tab-panel[hidden]{display:none!important}
.project-tab-note{margin:0 0 12px;font-size:13px;color:var(--muted,#5d6d65)}
.project-view-body .project-actions-zone{position:sticky;bottom:0;z-index:6;background:linear-gradient(to top,var(--panel,#fff) 78%,rgba(255,255,255,0));padding-top:12px}
.project-tab-panel[data-project-panel=schedule] .detail-scroll{min-height:340px;max-height:calc(100dvh - 360px)}
.project-tab-panel[data-project-panel=schedule] .modal-head{padding:0 0 10px;border:0}
#modalRoot .modal-backdrop:has(.project-schedule-maximized){padding:0!important}
.modal.project-schedule-maximized{width:100vw!important;max-width:100vw!important;height:100dvh!important;max-height:100dvh!important;border-radius:0!important;margin:0!important}
.project-schedule-maximized .project-tab-panel[data-project-panel=schedule] .detail-scroll{max-height:calc(100dvh - 250px)}
@media (max-width:700px){.project-tab{padding:9px 12px;font-size:13px}}

/* Task window: sections sit side by side where they are small and span the full width where they are wide (notes, dependencies). */
@media (min-width:900px){
 #modalRoot .modal-body:has(> .task-effort-editor){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start}
 #modalRoot .modal-body:has(> .task-effort-editor) > *{margin-top:0;margin-bottom:0;min-width:0}
 #modalRoot .modal-body:has(> .task-effort-editor) > .task-dependency-panel,
 #modalRoot .modal-body:has(> .task-effort-editor) > .rich-editor,
 #modalRoot .modal-body:has(> .task-effort-editor) > .task-save-bar{grid-column:1/-1}
 #modalRoot .modal-body:has(> .task-effort-editor) > .task-save-bar{order:99}
}

/* Project window task cards: the Pending / Completed button sits beside the task name, so each card is one row tall. */
.project-view-body:not(.structure-editing) .structure-task-v9{grid-template-columns:minmax(0,1fr) auto minmax(110px,auto) auto;min-height:0;padding-top:7px;padding-bottom:7px}
.project-view-body:not(.structure-editing) .structure-task-v9 > .status-slot:empty{display:none}
.project-view-body:not(.structure-editing) .structure-task-v9 > .structure-copy{grid-column:1;grid-row:1}
.project-view-body:not(.structure-editing) .structure-task-v9 > .compact-status-control{grid-column:2;grid-row:1;justify-self:end;margin:0;height:28px}
.project-view-body:not(.structure-editing) .structure-task-v9 > .schedule-display{grid-column:3;grid-row:1;justify-self:end;white-space:nowrap}
.project-view-body:not(.structure-editing) .structure-task-v9 > .task-complete-inline{grid-column:4;grid-row:1}
@media(max-width:700px){
 .project-view-body:not(.structure-editing) .structure-task-v9{grid-template-columns:minmax(0,1fr) auto}
 .project-view-body:not(.structure-editing) .structure-task-v9 > .structure-copy{grid-column:1/-1}
 .project-view-body:not(.structure-editing) .structure-task-v9 > .compact-status-control{grid-column:1;grid-row:2;justify-self:start}
 .project-view-body:not(.structure-editing) .structure-task-v9 > .schedule-display{grid-column:2;grid-row:2}
 .project-view-body:not(.structure-editing) .structure-task-v9 > .task-complete-inline{grid-column:1/-1;grid-row:3}
}
@media(min-width:701px){
 .project-view-body:not(.structure-editing) .structure-task-v9{grid-template-columns:minmax(0,1fr) 104px 156px 112px}
 .project-view-body:not(.structure-editing) .structure-task-v9 > .schedule-display{text-align:right}
 .project-view-body:not(.structure-editing) .structure-task-v9 > .compact-status-control{justify-self:stretch}
 .project-view-body:not(.structure-editing) .structure-task-v9 > .task-complete-inline{justify-self:stretch;text-align:center}
}

/* Overview tab: the information is always shown (no collapse arrow), Save & Close covers saving, and the two lower sections sit side by side. */
.project-info-panel .project-information-toggle.static-heading{cursor:default;pointer-events:none}
.project-info-panel .project-information-toggle.static-heading::after,.project-info-panel .project-information-toggle.static-heading::before{display:none!important}
.project-info-panel .project-information-toggle.static-heading > :last-child:not(strong){font-size:0}
.project-view-body .project-info-actions,.project-view-body #saveProjectInfo{display:none!important}
@media(min-width:900px){
 [data-project-panel=overview] .project-info-panel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 14px;align-items:start}
 [data-project-panel=overview] .project-info-panel > *{grid-column:1/-1;margin-top:0;margin-bottom:0}
 [data-project-panel=overview] .project-info-panel > .initiation-dates,
 [data-project-panel=overview] .project-info-panel > .project-lifecycle-fields{grid-column:auto}
 [data-project-panel=overview] .project-info-panel:not(:has(> .initiation-dates)) > .project-lifecycle-fields{grid-column:1/-1}
}

/* Today: the progress bar shows beside the percentage in Active Projects, and Snooze / Delete / Mark Complete share one line so task cards are shorter. */
details.active-business-group .project-row{display:grid!important;grid-template-columns:minmax(0,1fr) 110px 40px!important;align-items:center;gap:10px;min-height:0}
details.active-business-group .project-row .mini-progress{display:block!important;grid-row:1!important;grid-column:2!important;width:100%!important;height:7px;background:rgba(37,77,101,.1);border-radius:99px;overflow:hidden}
details.active-business-group .project-row .mini-progress i{height:100%}
details.active-business-group .project-row > .tag{grid-column:3;grid-row:1}
.revision-today-task .today-completion-actions{display:flex!important;flex-direction:row;align-items:center;justify-content:flex-end;gap:6px;min-width:0}
.revision-today-task .today-completion-actions .completion-available,.revision-today-task .today-completion-actions .completion-blocked{width:auto;grid-column:auto}
.revision-today-task .task-right{align-items:center}

/* Add Task window: same look as the task window. Task name first, the small fields in one row, dependencies as searchable chips. */
#modalRoot #addTaskForm > .form-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
#modalRoot #addTaskForm > .form-grid > .field.full:has(input[name=name]){grid-column:1/-1;order:-1}
#modalRoot #addTaskForm > .form-grid > .task-dependency-panel,#modalRoot #addTaskForm > .form-grid > .field.full{grid-column:1/-1}
@media(max-width:900px){#modalRoot #addTaskForm > .form-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){#modalRoot #addTaskForm > .form-grid{grid-template-columns:1fr}}
#modalRoot #addTaskForm > .form-grid > .field > :not(label):not(input):not(select):not(textarea):not(.field){font-size:11px;color:var(--muted)}
@media(min-width:901px){#modalRoot #addTaskForm > .form-grid{grid-template-columns:repeat(5,minmax(0,1fr))}#modalRoot #addTaskForm > .form-grid > .field.full:has(input[name=name]){grid-column:1/-1}}
#modalRoot .dependency-columns legend{font-size:12px;font-weight:700;padding:0 6px}

/* Tasks page cards: project image on the left, task name over project / assignee / date, effort tag and status on the right. */
.master-task-card{display:grid!important;grid-template-columns:18px auto minmax(0,1fr) auto;column-gap:10px;row-gap:0;align-items:center;padding:8px 12px!important;min-height:0!important}
.master-task-card > .square-status{grid-column:1}
.master-task-card > .project-image-shell,.master-task-card > .master-task-noicon{grid-column:2;width:38px;height:38px;flex:none}
.master-task-card > .master-task-main{grid-column:3;min-width:0;display:grid;gap:2px}
.master-task-card > .master-task-main > strong{font-size:13px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.master-task-card .master-task-meta{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;min-width:0;font-size:11px;line-height:1.3}
.master-task-card .master-task-meta > span+span::before{content:"·";margin-right:12px;opacity:.5}
.master-task-card .master-task-meta > .date-chip{background:none;border:0;padding:0}
.master-task-card > .master-task-side{grid-column:4;display:grid;justify-items:end;gap:3px}
.master-task-card .master-state{font-size:10px;color:var(--muted)}
.master-task-card .master-task-meta{padding-left:0;margin:0}
/* Today > Active Projects: project images about 30% larger */
details.active-business-group .project-row .project-image-shell,details.active-business-group .project-row .project-image-shell img{width:64px!important;height:64px!important;min-width:64px;border-radius:14px}
details.active-business-group .project-row{min-height:76px}
/* Weekly Priority: the small business dropdowns show the full name (arrow no longer covers the text) */
.weekly-priority-compact select{min-height:34px!important;padding:0 18px 0 7px!important;font-size:11px!important;letter-spacing:-.1px;text-overflow:ellipsis;background-position:right 6px center!important;background-size:9px 6px!important}
.today-task .task-main > .today-video-link{margin:0 0 0 18px!important;align-self:center;padding:5px 12px!important;font-size:12px;min-height:0;border-radius:9px;flex:none}
.today-task .task-main:has(> .today-video-link) > .today-task-copy{flex:0 1 auto!important;min-width:min-content;max-width:calc(100% - 270px)}
.today-task .task-main:has(> .today-video-link) .today-task-title-line strong{overflow:visible;text-overflow:clip;white-space:nowrap}
.today-task .task-main > .today-video-link{margin-left:auto!important;margin-right:14px!important}

/* Today icons: soft tinted tile with a crisp drawn symbol */
.section-icon.kk-icon{width:40px;height:40px;border-radius:13px;color:var(--icon-color);background:color-mix(in srgb,var(--icon-color) 11%,#fff);border:1px solid color-mix(in srgb,var(--icon-color) 20%,transparent);box-shadow:0 5px 12px color-mix(in srgb,var(--icon-color) 14%,transparent);font-size:0;flex:0 0 auto}
.section-icon.kk-icon svg{width:24px;height:24px;display:block;shape-rendering:geometricPrecision}
.metric-v6 .section-icon.kk-icon{width:48px;height:48px;border-radius:15px}
.metric-v6 .section-icon.kk-icon svg{width:28px;height:28px}
.section-icon.kk-icon-calendar{width:34px;height:34px;border-radius:11px;color:#fff;background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.35);box-shadow:none}
.section-icon.kk-icon-calendar svg{width:21px;height:21px}
.section-title .section-icon.kk-icon:not(.kk-icon-calendar),.today-side .section-icon.kk-icon,.card .section-icon.kk-icon:not(.kk-icon-calendar){width:38px!important;height:38px!important;border-radius:12px!important}
.section-title .section-icon.kk-icon svg{width:23px!important;height:23px!important}
.section-icon.kk-icon{aspect-ratio:1/1;padding:0!important;box-sizing:border-box;min-width:0;flex:none}
.section-title .section-icon.kk-icon:not(.kk-icon-calendar){min-width:38px!important;max-width:38px}
html body .today-layout .section-icon.kk-icon:not(.kk-icon-calendar){width:38px!important;height:38px!important;min-width:38px!important;max-width:38px!important;max-height:38px!important;border-radius:12px!important}
html body .today-layout .section-icon.kk-icon:not(.kk-icon-calendar) svg{width:23px!important;height:23px!important}
html body .today-layout .section-icon.kk-icon-calendar{width:30px!important;height:30px!important;min-width:30px!important;max-height:30px!important;border-radius:10px!important}
html body .today-layout .section-icon.kk-icon-calendar svg{width:19px!important;height:19px!important}

/* Engine Settings: grids and lists */
.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:8px 0}
.settings-list{display:grid;gap:8px;margin:8px 0}
.settings-list-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap;justify-content:space-between;padding:8px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel2)}
.settings-list-row > span{flex:1 1 220px;min-width:0}.settings-list-row input:not([type=checkbox]){flex:1 1 160px}
.inline-check{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted)}
.settings-sections .settings-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.settings-sections .settings-row input{flex:1 1 180px}
.settings-remove{border:1px solid var(--line);background:var(--panel);border-radius:9px;width:30px;height:30px;line-height:1;cursor:pointer;color:var(--muted);flex:none}
.settings-remove:hover{background:var(--panel2);color:#d1495b}
.settings-list-row select{min-width:190px;padding-right:32px}.settings-list-row input[type=number]{min-width:90px;width:90px}

/* ===== Schedule batch (shared timeline) ===== */
.v10-grid-day,.v10-grid-fortnight{background-image:repeating-linear-gradient(to right,rgba(84,107,104,.09) 0,rgba(84,107,104,.09) 1px,transparent 1px,transparent var(--dw)),linear-gradient(to right,transparent 0,transparent calc(var(--dw) * 5),rgba(116,128,142,.075) calc(var(--dw) * 5),rgba(116,128,142,.075) 100%);background-size:auto 100%,calc(var(--dw) * 7) 100%;background-position:0 0,calc(var(--dw) * var(--wko) * -1) 0;background-repeat:repeat,repeat-x}
.v10-grid-month,.v10-grid-year,.v10-grid-quarter{background-image:none}
.body-year-start{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:rgba(36,52,66,.30);pointer-events:none}
.v5-header-track .year-line{position:absolute;top:0;bottom:0;width:2px;margin-left:-1px;background:color-mix(in srgb,var(--text) 52%,transparent);pointer-events:none}
.v5-header-track .year-label{position:absolute;top:4px;font-size:11px;font-weight:800;color:var(--text);white-space:nowrap}
.v5-header-track .month-label{position:absolute;top:26px;font-size:10px;font-weight:600;color:var(--muted);overflow:hidden;white-space:nowrap;text-overflow:clip}
.v5-header-track .month-tick{top:22px}
/* Phase column: one continuous band per phase, no arrows and no empty rows */
.v11-phase .detail-row{border-bottom:0}
.v11-phase-cell{border-left:4px solid var(--phase);background:color-mix(in srgb,var(--phase) 10%,var(--panel,#fff))!important;border-bottom:0!important;padding:6px 10px;display:flex;flex-direction:column;justify-content:center;gap:2px;min-width:0}
.v11-phase-name{display:flex;justify-content:space-between;gap:8px;font-size:12px;font-weight:800;color:var(--text)}
.v11-phase-name em{font-style:normal;font-size:10px;color:var(--muted);font-weight:600}
.v11-phase-cell strong{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v11-phase-first{box-shadow:inset 0 2px 0 var(--phase)}
.v11-phase-first .detail-track{box-shadow:inset 0 2px 0 var(--phase)}
.detail-scroll,.team-calendar-wrap,.compound-scroll{isolation:isolate}
/* Days header: month on top, only the day number below */
.v5-header-track .date-tick.day-num{top:26px;height:22px;padding:3px 0 0;text-align:center;font-size:10px;color:var(--muted)}
.v5-header-track .month-band{position:absolute;top:0;height:24px;padding:5px 8px;font-size:11px;font-weight:700;color:var(--text);overflow:hidden;white-space:nowrap;text-align:left}
.v5-header-track.two-tier .period-start.month-tick{top:0}
/* Phase column: narrow, neutral gray, wires pass behind it, collapsible */
.v9-detail-timeline{min-width:calc(var(--phase-gutter,96px) + var(--track))}
.v9-detail-timeline .v8-detail-header,.v9-detail-timeline .v9-detail-row{grid-template-columns:var(--phase-gutter,96px) var(--track)!important}
.v9-detail-timeline .detail-row{isolation:auto}
.v9-detail-timeline .v9-phase-gutter-spacer{z-index:20;white-space:normal;overflow:hidden}
.v11-phase-cell strong{white-space:normal}
.v11-phase-name{flex-direction:column;gap:1px;word-break:break-word}
.v11-phase-first .v11-phase-cell{box-shadow:inset 0 2px 0 var(--phase)}
.v9-detail-timeline .v8-phase-gutter-head{display:flex;align-items:center;gap:6px;padding:8px 6px}
.phase-col-toggle{border:1px solid var(--line);background:var(--panel,#fff);border-radius:7px;width:22px;height:22px;line-height:1;cursor:pointer;color:var(--muted);flex:0 0 auto}
.phase-col-collapsed .v11-phase-cell>*{display:none}
.phase-col-collapsed .v8-phase-gutter-head{padding:8px 0;justify-content:center}
/* Task bars use the legend colors, soft enough to read black text */
.detail-bar,.detail-bar.business-colored-task{background:color-mix(in srgb,var(--bar-tint,#21b88d) 38%,#fff)!important;border:1px solid color-mix(in srgb,var(--bar-tint,#21b88d) 62%,#fff);color:#132033}
.detail-bar.completed,.detail-bar.business-colored-task.completed{background:color-mix(in srgb,var(--bar-tint,#21b88d) 16%,#fff)!important;opacity:.85}
.detail-bar span{color:#132033!important}
/* Main Schedule: business groups collapse, long names stay readable */
.compound-group-row{min-height:38px!important;background:color-mix(in srgb,var(--panel3) 88%,transparent)}
.compound-group-label{gap:8px!important;cursor:default!important;font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);background:color-mix(in srgb,var(--panel3) 96%,var(--panel2))!important}
.compound-group-label em{font-style:normal;margin-left:auto;font-size:10px}
.biz-toggle{border:1px solid var(--line);background:var(--panel,#fff);border-radius:7px;width:22px;height:22px;line-height:1;cursor:pointer;color:var(--muted)}
.business-summary-bar{top:3px;height:26px;opacity:.9}
.business-summary-bar span{color:#fff;font-weight:700}
.compound-bar-outside{position:absolute;top:50%;transform:translateY(-50%);font-size:10px;font-weight:600;color:var(--text);white-space:nowrap;pointer-events:none}
.compound-bar{top:50%;transform:translateY(-50%)}
.compound-bar.business-summary-bar{transform:none;top:6px}
/* Short Description box is clearly visible and invites typing */
.project-information-section textarea,.canonical-location-creation textarea,#infoDescription{background:#fff;border:1px solid color-mix(in srgb,var(--muted) 42%,transparent);border-radius:12px;padding:10px 12px;min-height:130px;width:100%}
/* Task date in the New Project list: wide enough that the calendar icon never covers the year */
.workflow-state-row{grid-template-columns:minmax(0,1fr) 165px 235px}
.workflow-date-display input[type=date]{min-width:150px;font-size:13px;padding-left:10px;padding-right:6px}
@media(max-width:1000px){.workflow-state-row{grid-template-columns:minmax(0,1fr) 140px 200px}}
@media(max-width:700px){.workflow-state-row{grid-template-columns:1fr}}
.phase-col-collapsed .v11-phase-cell{padding:0!important;min-width:0;width:var(--phase-gutter)}
/* Each phase can collapse to one summary bar */
.phase-chevron{border:0;background:transparent;cursor:pointer;color:var(--muted);font-size:13px;line-height:1;padding:0 4px 0 0;align-self:flex-start}
.v11-phase-name{display:block}
.v11-phase-name em{display:block;margin-top:1px}
.phase-summary-bar{top:calc((var(--sched-row,48px) - 28px)/2)}
.phase-col-collapsed .phase-chevron{display:none}
.v9-detail-timeline .v8-phase-gutter-head{font-size:10px;gap:4px;padding:8px 4px}
.phase-col-toggle{width:20px;height:20px;font-size:12px}
/* Maximized Schedule: the whole screen, with a slim header and tabs so the timeline gets the room */
.project-schedule-maximized .project-modal-head{padding:8px 20px!important;min-height:0!important}
.project-schedule-maximized .project-headline{height:auto!important;align-items:center;gap:12px}
.project-schedule-maximized .project-icon-button{display:none!important}
.project-schedule-maximized .project-headline{padding-left:0!important}
.project-schedule-maximized .project-header-name{font-size:20px!important;height:28px!important;min-height:0!important}
.project-schedule-maximized .project-header-status-row p{margin:0}
.project-schedule-maximized .project-tabs{margin:0 0 6px;padding:3px}
.project-schedule-maximized .project-tab{padding:6px 12px}
.project-schedule-maximized .v9-detail-toolbar .hint{display:none}
.project-schedule-maximized .project-tab-panel[data-project-panel=schedule] .schedule-modal-head{padding:0 0 4px}
.project-schedule-maximized .project-tab-panel[data-project-panel=schedule] .detail-scroll{max-height:calc(100dvh - 185px)!important}
.project-schedule-maximized [data-project-panel=schedule] .modal-body{padding:0!important}
.project-schedule-maximized [data-project-panel=schedule] .timeline-toolbar{margin:0 0 4px!important}
.project-schedule-maximized .project-tab-panel[data-project-panel=schedule] .detail-scroll{max-height:calc(100dvh - 165px)!important}
/* Phases are separated by a light band (like the weekend shading) instead of a solid line */
.v11-phase-first,.v11-phase-first .detail-track,.v11-phase-first .v11-phase-cell{box-shadow:none!important}
.v9-detail-timeline .v11-phase:nth-child(even) .detail-row{background:rgba(116,128,142,.075)}
.v9-detail-timeline .v11-phase:nth-child(even) .v11-phase-cell{background:rgba(116,128,142,.12)!important}
/* Stronger owner colors on the bars */
.detail-bar,.detail-bar.business-colored-task{background:color-mix(in srgb,var(--bar-tint,#21b88d) 52%,#fff)!important;border:1px solid color-mix(in srgb,var(--bar-tint,#21b88d) 80%,#fff)}
.detail-bar.completed,.detail-bar.business-colored-task.completed{background:color-mix(in srgb,var(--bar-tint,#21b88d) 22%,#fff)!important}
/* Maximize shows only the schedule: no project header, tabs or footer buttons (Undo, Redo, Exit maximize and the scale buttons stay) */
.project-schedule-maximized .project-modal-head,.project-schedule-maximized .project-tabs,.project-schedule-maximized .project-actions-zone{display:none!important}
.project-schedule-maximized .project-view-body{padding:10px 14px!important;margin:0!important}
.project-schedule-maximized .project-tab-panel[data-project-panel=schedule] .detail-scroll{max-height:calc(100dvh - 118px)!important}
.project-schedule-maximized .v9-detail-toolbar{margin:0 0 4px!important}
/* Main Schedule full screen: also only the schedule */
.schedule-fullscreen .page-head h2,.schedule-fullscreen .page-head p{display:none}
.schedule-fullscreen .page-head{margin-bottom:6px}
.schedule-fullscreen .compound-scroll{max-height:calc(100dvh - 120px)}
/* The task name never blocks the stretch handle; the handle is easy to grab even on one-day cards */
.detail-bar>span{pointer-events:none}
.detail-bar .resize-handle{z-index:5;right:-6px;width:14px;cursor:ew-resize}