/* Shared component contract. Every grid and control consumes the same semantic
   sizing tokens; layout dimensions and printable documents stay separate. */

button, input, select, textarea { font-family: var(--font-sans); }
button { font-size: var(--text-sm); }
button:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 2px; }
button:disabled { cursor: not-allowed; opacity: .45; }
.btn, .board-toolbar > .btn, .dd-toggle, .dp-toggle, .toolbar-select, .toolbar-search { min-height: var(--control-md); height: var(--control-md); padding: 0 var(--space-3); font-size: var(--text-sm); font-weight: 500; line-height: 1; border-radius: var(--radius-control); box-shadow: none; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); border: 1px solid transparent; transform: none; }
.btn-primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.btn-primary:hover { background: color-mix(in srgb,var(--ink) 88%,var(--surface)); }
.btn-secondary { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.btn-secondary:hover { border-color: var(--line-strong); background: var(--surface-2); }
.btn-ghost { background: transparent; color: var(--ink-2); }
.btn-sm, .input-sm, .dd-sm .dd-toggle { min-height: var(--control-sm); height: var(--control-sm); font-size: var(--text-sm); }
.btn-icon, .icon-btn, .col-reset, .addcol-btn, .btn-trash { display: inline-flex; align-items: center; justify-content: center; width: var(--control-sm); height: var(--control-sm); min-height: var(--control-sm); padding: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink-2); border: 0; }
.btn-icon:hover, .icon-btn:hover, .col-reset:hover, .addcol-btn:hover { background: var(--surface-hover); color: var(--ink); }
.btn svg, .btn-icon svg, .icon-btn svg, .task-timer svg { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }
.input, .field input, .field select, .field textarea, .dd-toggle, .dp-toggle, .toolbar-search { background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-control); font-size: var(--text-sm); color: var(--ink); min-height: var(--control-md); padding: var(--space-2) var(--space-3); box-sizing: border-box; }
textarea.input, .field textarea { height: auto; min-height: 96px; line-height: 1.5; }
.input:focus, .field input:focus, .field textarea:focus, .dd-toggle:focus-visible, .dp-toggle:focus-visible { outline: none; border-color: var(--accent-ring); box-shadow: 0 0 0 3px var(--primary-soft); }
.field { gap: var(--space-2); }
.field-label, .field > label { font-size: var(--text-xs); font-weight: 500; color: var(--ink-2); }
.content { padding: var(--page-inset); gap: var(--space-6); }
.card { border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); box-shadow: none; }
.card-header { padding: var(--space-5); gap: var(--space-3); }
.card-title { font-size: var(--text-lg); font-weight: 600; letter-spacing: -.02em; }
.card-sub { margin-top: var(--space-1); font-size: var(--text-xs); line-height: 1.5; }
.card-actions, .table-toolbar, .board-toolbar { gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.card-body, .settings-body { padding: var(--space-5); }
.drawer-header, .drawer-footer { padding: var(--space-5); gap: var(--space-3); }
.drawer-form { padding: var(--space-5); gap: var(--space-4); }
/* One menu geometry and option treatment for native select enhancements,
   inline grid pickers, filters, columns and account actions. */
.dd-menu, .cell-picker, .cols-menu, .account-menu, .filter-panel, .dp-pop, .dp-cal { padding: var(--menu-padding); border: 1px solid var(--line); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-lg); max-width: calc(100vw - 24px); max-height: min(440px, calc(100dvh - 24px)); overflow-y: auto; }
.dd-menu, .cell-picker { min-width: 180px; }
.dd-option, .cell-picker-option, .account-menu button, .cols-menu label { width: 100%; min-height: var(--menu-row-h); padding: var(--space-2) var(--space-3); display: flex; align-items: center; justify-content: flex-start; gap: var(--space-2); font-size: var(--text-sm); font-weight: 400; line-height: 1.4; color: var(--ink); background: transparent; border: 0; border-radius: var(--radius-control); text-align: left; white-space: normal; }
.dd-option:hover, .cell-picker-option:hover, .cell-picker-option:focus-visible, .dd-option:focus-visible, .account-menu button:hover { background: var(--surface-2); }
.dd-option.selected, .cell-picker-option.selected, .cell-picker-option.on { background: var(--primary-soft); color: var(--accent-ink); }
.cell-picker-option .picker-pill { width: auto; min-height: 24px; padding: 0 var(--space-2); justify-content: center; font-size: var(--text-xs); }
.filter-panel { padding: var(--space-4); width: 304px; gap: var(--space-3); }
.fp-row { gap: var(--space-2); margin-bottom: var(--space-3); }
/* Parent, nested and My Work grids: same row metric, typography, borders,
   alignment and identity actions. A subtable is indented content, not a card. */
.tbl, .sheet-table, .subitem-table { border-collapse: collapse; table-layout: fixed; font-size: var(--cell-font); background: var(--surface); }
.tbl th, .tbl td, .subitem-table th, .subitem-table td { box-sizing: border-box; display: table-cell; vertical-align: middle; text-align: left; padding: 0 var(--cell-pad-x); font-size: var(--cell-font); height: var(--cell-row-h); border: 0; border-bottom: 1px solid var(--line-subtle); border-right: 1px solid var(--line-subtle); overflow: hidden; }
.tbl th, .subitem-table th { height: var(--cell-head-h); font-size: var(--tbl-head-font); font-weight: 500; color: var(--muted); background: var(--surface); }
.tbl td:last-child, .tbl th:last-child, .subitem-table td:last-child, .subitem-table th:last-child { border-right: 0; }
#projectTable th, #projectTable td { height: var(--cell-row-h); padding: 0 var(--cell-pad-x); }
#projectTable th { height: var(--cell-head-h); }
.tbl tbody tr:hover > td, .subitem-row:hover > td { background: var(--surface-hover); }
.sheet-row::before, .subitem-row::before { display: none; }
.sheet-table .item-cell { border-left: 0; }
#projectTable .select-cell { width: 36px; padding: 0 var(--space-2); }
#projectTable .col-select { width: 36px; }
#projectTable .col-addcol { width: 36px; }
.sheet-table .item-inner { display: flex; gap: var(--space-2); align-items: center; overflow: visible; }
.item-open, .sub-name-text { display: block; min-width: 0; flex: 1; overflow: hidden; white-space: nowrap; font-weight: 500; font-size: var(--cell-font); }
.task-count { min-width: 18px; height: 18px; padding: 0 var(--space-1); background: var(--surface-2); color: var(--muted); border: 0; border-radius: var(--radius-control); font-size: var(--text-xs); font-weight: 400; }
.chev { width: 24px; height: 24px; flex: 0 0 24px; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--muted); padding: 0; }
.chev:hover { background: var(--surface-2); color: var(--ink); }
.cell-expand { position: static !important; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; min-width: 24px; padding: 0; border: 0; border-radius: var(--radius-control); color: var(--muted); background: transparent; opacity: 0; pointer-events: auto; box-shadow: none; }
.cell-expand svg { width: 14px; height: 14px; }
.item-cell, .sub-name { position: relative; }
.item-cell > .cell-expand, .sub-name > .cell-expand { position: absolute !important; right: var(--space-2); top: 50%; transform: translateY(-50%); }
.item-cell .item-inner, .sub-name-text { padding-right: var(--space-6); }
.sheet-row:hover .item-cell > .cell-expand, .subitem-row:hover .sub-name > .cell-expand, .item-cell:focus-within > .cell-expand, .sub-name:focus-within > .cell-expand, .mw-task-cell:focus-within > .cell-expand { opacity: 1; }
.cell-expand:hover { color: var(--ink); background: var(--surface-2); }
.cell:not(.item-cell):not(.sub-name):not(.mw-task-cell) > .cell-expand, .sub-cell:not(.sub-name):not(.mw-task-cell) > .cell-expand { display: none; }
.pill, .task-status-pill { width: auto; min-height: 24px; height: 24px; padding: 0 var(--space-2); border-radius: var(--radius-control); font-size: var(--text-xs); font-weight: 400; line-height: 1; }
.task-status-pill { pointer-events: none; }
.due-wrap { display: block; font-size: var(--cell-font); }
.task-rows-row > td.task-cell { padding: 0 0 var(--space-3) 36px !important; background: var(--surface) !important; height: auto !important; border-right: 0; overflow: visible; }
.subitem-wrap { margin: 0; padding: 0; border: 0; border-left: 1px solid var(--line); border-radius: 0; background: var(--surface); overflow-x: auto; }
.subitem-table { min-width: 720px; width: 100%; }
.subitem-table .sub-col-name { width: var(--sub-name-w, 200px); }
.subitem-table .sub-col-date { width: 20%; }
.subitem-table .sub-col-status { width: 18%; }
.subitem-table .sub-col-owner { width: 64px; }
.subitem-table .sub-col-effort { width: 112px; }
.subitem-table .sub-col-del { width: 36px; }
.subitem-table .sub-col-fill { width: 0; }
.subitem-table .sub-fill { padding: 0; background: var(--surface); border: 0; }
.subitem-table .th-ico { display: none; }
.subitem-table .th-label { display: inline !important; }
.subitem-table td.sub-effort, .subitem-table th.sub-effort { display: table-cell; padding: 0 var(--cell-pad-x); text-align: left; }
.effort-content { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.sub-effort-label { font-size: var(--cell-font); color: var(--ink-2); opacity: 1; font-variant-numeric: tabular-nums; }
.task-timer { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex: 0 0 24px; background: transparent; color: var(--muted); border: 0; border-radius: var(--radius-control); padding: 0; }
.task-timer.is-running { background: var(--primary-soft); color: var(--accent-ink); }
.task-del { width: 24px; height: 24px; padding: 0; }
.task-del svg { width: var(--icon-sm); height: var(--icon-sm); }
.subitem-add-row .sub-add-input { height: var(--cell-row-h); min-height: var(--cell-row-h); border: 0; background: transparent; border-radius: 0; padding: 0 var(--cell-pad-x); font-size: var(--cell-font); }
.ic-subitems-body .subitem-table { min-width: 720px; table-layout: fixed; }
.ic-subitems-body { overflow-x: auto; }
.ic-subitems-body .subitem-table .sub-col-name { width: var(--sub-name-w, 200px); }
.ic-subitems-body .subitem-table .sub-col-owner { width: 64px; }
.ic-subitems-body .subitem-table .sub-col-status { width: 130px; }
.ic-subitems-body .subitem-table .sub-col-date { width: 140px; }
.ic-subitems-body .subitem-table .sub-col-del { width: 36px; }
.ic-subitems-body .subitem-table .sub-fill { display: table-cell; }
/* One text-overflow treatment. Only the clipped text is masked; adjacent
   controls, focus indicators and grid borders remain fully visible. */
.is-clipped { text-overflow: clip !important; -webkit-mask-image: linear-gradient(to right,var(--mask-solid) calc(100% - var(--cell-fade-width)),transparent); mask-image: linear-gradient(to right,var(--mask-solid) calc(100% - var(--cell-fade-width)),transparent); }
.cell-editor { width: 100%; height: var(--control-sm); min-height: var(--control-sm); padding: 0 var(--space-2); border: 0; border-radius: 0; font-size: var(--cell-font); background: transparent; color: var(--ink); }
.ic-header, .ic-info-grid, .ic-section { padding: var(--space-5); }
.ic-body { padding: 0; }
.ic-field { padding: var(--space-2) 0; min-height: var(--cell-row-h); }
.ic-field-label { font-size: var(--text-xs); color: var(--muted); font-weight: 400; }
.ic-value-btn { min-height: var(--control-sm); padding: var(--space-2); border-radius: var(--radius-control); font-size: var(--text-sm); }
@media(max-width:820px) {
 :root { --control-sm: var(--touch-target); --control-md: var(--touch-target); --cell-head-h: var(--touch-target); --page-inset: var(--space-4); --cell-row-h: 48px; --menu-row-h: var(--touch-target); }
 .btn, .dd-toggle, .dp-toggle, .input, .toolbar-search { min-height: var(--touch-target); height: var(--touch-target); }
 .btn-icon, .icon-btn, .nav-toggle, .task-timer { width: var(--touch-target); height: var(--touch-target); min-height: var(--touch-target); }
 .task-timer { flex-basis: var(--touch-target); }
 .subitem-table .sub-col-effort { width: 132px; }
 .cell-expand { width: var(--touch-target); height: var(--touch-target); min-width: var(--touch-target); opacity: 1; }
 .item-cell .item-inner, .sub-name-text { padding-right: var(--touch-target); }
 .input, .field input, .field textarea { font-size: var(--text-lg); }
 .task-rows-row > td.task-cell { padding-left: var(--space-4) !important; }
 .subitem-table { min-width: 780px; }
}
.subitem-table .sub-owner, .subitem-table .sub-date { text-align: left; }
.status-cell .pill, .sub-status .task-status-pill { width: auto; max-width: 100%; border-radius: var(--radius-control); justify-content: center; }
.group-toggle-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); color: var(--ink); cursor: pointer; border-radius: var(--radius-control); height: var(--control-md); min-height: var(--control-md); padding: 0 var(--space-3); background: var(--surface); border: 1px solid var(--line-strong); font-size: var(--text-sm); }
.table-toolbar { padding: var(--space-3) 0; }
#workspaceCard .table-toolbar { padding: var(--space-3) 0; }
#workspaceCard .board-toolbar { padding: 0 0 var(--space-3); }
#myWorkCard .mw-task-name { min-width: 0; padding-right: var(--space-6); }
.mw-table .mw-task-cell { position: relative; }
.mw-task-cell > .cell-expand { position: absolute !important; right: var(--space-2); top: 50%; transform: translateY(-50%); }
.mw-table tr:hover .cell-expand { opacity: 1; }
.ic-effort { gap: var(--space-2); }
.ic-task-effort { width: 80px; }
.ic-info-grid { gap: 0; }
.dp-type { min-height: var(--control-md); border: 1px solid var(--line-strong); border-radius: var(--radius-control); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); }
.dp-nav { width: var(--control-sm); height: var(--control-sm); border: 0; border-radius: var(--radius-control); }
.dp-day { width: 100%; min-width: 0; min-height: var(--control-sm); border-radius: var(--radius-control); font-size: var(--text-sm); }
.dp-title { font-size: var(--text-sm); font-weight: 500; }
.dp-head { gap: var(--space-1); padding: var(--space-2); }
.dp-foot { padding: var(--space-2); }
@media(max-width:820px) {
 .group-toggle-btn, .dp-type, .dp-nav, .dp-day { min-height: var(--touch-target); }
 .dp-nav { width: var(--touch-target); }
 .dp-pop, .dp-cal { max-width: calc(100vw - 24px); }
 .mw-task-name { padding-right: var(--touch-target); }
}

/* Settings and view navigation use the same control geometry. */
.settings-tab, .view-tab, .customize-tab, .inbox-tab, .theme-option {
  min-height: var(--control-md); padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-control); font-size: var(--text-sm); gap: var(--space-2);
}
.dd > select { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
@media (max-width: 820px) {
  .settings-tab, .view-tab, .customize-tab, .inbox-tab, .theme-option { min-height: var(--touch-target); }
}

.settings-action { min-height: var(--control-md); padding: var(--space-2) var(--space-3); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface); font-size: var(--text-sm); font-weight: 500; }
#addStatusBtn, #addTypeLibBtn { width: auto; justify-content: flex-start; }
@media (max-width: 820px) {
  .settings-action { min-height: var(--touch-target); }
  #projectTable .col-item { width: 260px !important; }
  #projectTable { min-width: 760px; }
}

.filter-panel { position: fixed; }
.add-row-inline, .cycle-add { min-height: var(--control-md); padding: 0 var(--space-3); border-radius: var(--radius-control); background: transparent; color: var(--muted); font-size: var(--text-sm); font-weight: 400; }
.add-row-inline:hover, .cycle-add:hover { background: var(--surface-2); color: var(--ink); }
.item-card-overlay { --ic-width: 760px; }
.ic-field-value { font-size: var(--text-sm); }
.ic-nav { width: var(--control-sm); height: var(--control-sm); padding: 0; }
@media (max-width: 820px) {
  #workspaceCard .board-toolbar { display: flex; gap: var(--space-2); flex-wrap: wrap; }
  #workspaceCard .board-toolbar > .btn, #workspaceCard .filter-anchor, #workspaceCard .group-toggle-btn { flex: 0 0 auto; width: auto; }
  #workspaceCard .toolbar-spacer { display: none; }
  #workspaceCard .board-toolbar > .btn { padding: 0 var(--space-3); }
  .add-row-inline, .cycle-add { min-height: var(--touch-target); }
  .item-card { width: 100vw; max-width: 100vw; height: 100dvh; }
  .ic-header, .ic-info-grid, .ic-section { padding: var(--space-4); }
  .ic-nav { width: var(--touch-target); height: var(--touch-target); }
}

.input { width: 100%; }
.dd-toggle, .dp-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); width: 100%; text-align: left; cursor: pointer; }
.dd-text, .dp-text { min-width: 0; overflow: hidden; white-space: nowrap; }
.dd-caret { flex-shrink: 0; color: var(--muted); font-size: var(--text-xs); }
.btn-danger { background: var(--danger); border-color: var(--danger); color: var(--document-paper); }
.btn-danger:hover { background: var(--danger-ink); }
.btn-ghost-danger { background: transparent; color: var(--danger-ink); }
.btn-ghost-danger:hover { background: var(--danger-soft); }
.view-switch { border-radius: var(--radius-control); padding: var(--space-1); gap: var(--space-1); background: var(--surface); }
.view-switch .view-tab { border: 0; }
#workspaceCard .card-header, #myWorkCard .card-header { padding: 0 0 var(--space-3); }
#myWorkCard .board-toolbar { padding: 0 0 var(--space-3); }
#myWorkCard .mw-table th { background: var(--surface); }
@media (max-width: 820px) {
  #myWorkCard .board-toolbar { display: flex; }
  #myWorkCard .toolbar-search { flex: 1; width: auto; min-width: 0; }
  #myWorkCard .col-reset { width: var(--touch-target); min-width: var(--touch-target); padding: 0; border: 0; background: transparent; }
}

.sub-name:focus-within > .cell-expand, tr:hover .sub-name > .cell-expand { opacity: 1; }
@media (max-width: 820px) {
  .chev, .task-del, .addcol-btn, .col-reset { width: var(--touch-target); height: var(--touch-target); min-height: var(--touch-target); }
  .chev { flex-basis: var(--touch-target); }
  #projectTable .col-select, #projectTable .col-addcol { width: var(--touch-target); }
  .subitem-table .sub-col-del, .ic-subitems-body .subitem-table .sub-col-del { width: var(--touch-target); }
}

.group-toggle-btn.active, .group-toggle-btn[aria-pressed="true"] { background: var(--primary-soft); border-color: var(--accent-ring); color: var(--accent-ink); }

.ic-field { padding: var(--space-1) 0; align-items: center; }
.ic-field-label { padding-top: 0; }
.ic-field-value, .ic-readonly { min-height: var(--control-md); padding: var(--space-2); font-size: var(--text-sm); line-height: var(--icon-md); }
.ic-field-value { border: 0; }
.ic-type-btn { min-height: var(--control-md); display: inline-flex; align-items: center; padding: 0 var(--space-2); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink); cursor: pointer; }
.ic-type-btn:hover { background: var(--surface-2); }
@media (max-width: 820px) { .ic-field { padding: 0; } }

/* Timeline geometry consumes the same row token as the dependency renderer. */
.gantt-row { height: var(--cell-row-h); }
.gantt-bar-project, .gantt-bar-task { top: var(--space-1); height: calc(var(--cell-row-h) - var(--space-2)); line-height: calc(var(--cell-row-h) - var(--space-2)); }
.gantt-dep-btn { width: var(--control-sm); height: var(--control-sm); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.gantt-dep-btn svg { width: var(--icon-sm); height: var(--icon-sm); }
.gz-levels { border-radius: var(--radius-control); }
.gz-level { min-height: var(--control-md); padding: 0 var(--space-3); font-size: var(--text-sm); font-weight: 500; }
.gz-step, .cal-nav-btn { width: var(--control-sm); height: var(--control-sm); border-radius: var(--radius-control); }
@media (max-width: 820px) {
  .gantt-dep-btn { width: var(--touch-target); height: var(--touch-target); }
}

/* State priority: one cell selection ring; editing and fill preview survive row hover. */
:is(#projectTable, .sheet-table, .subitem-table) td:is(.is-active, .is-fill-source) { outline: 2px solid var(--primary); outline-offset: -2px; box-shadow: none; background: var(--primary-soft) !important; }
:is(#projectTable, .sheet-table, .subitem-table) td.is-editing { outline: 2px solid var(--primary); outline-offset: -2px; box-shadow: none; background: var(--surface-2) !important; padding: 0; }
:is(#projectTable, .sheet-table, .subitem-table) td.is-fill-target { outline: 1px solid var(--primary); outline-offset: -1px; box-shadow: none; background: var(--accent-soft-hover) !important; }
:is(#projectTable, .sheet-table, .subitem-table) .cell-editor, :is(#projectTable, .sheet-table, .subitem-table) .cell-editor:focus { outline: 0; box-shadow: none; border: 0; border-radius: 0; background: transparent; height: var(--cell-row-h); min-height: var(--cell-row-h); padding: 0 var(--cell-pad-x); }
input:focus, textarea:focus, select:focus, .dd-toggle:focus, .dp-toggle:focus { outline: 0; box-shadow: none; border-color: var(--line-strong); }
.search-input:focus, .toolbar-search:focus { outline: 0; box-shadow: none; }
.search-head:has(.search-input:focus-visible) { border-bottom-color: var(--ink); }
.toolbar-search:focus-visible { border-color: var(--ink); }
/* Status and type chips preview the same semantic colors in every surface. */
.pill, .task-status-pill { display: inline-flex; align-items: center; justify-content: center; text-align: center; background: var(--badge-bg, var(--surface-2)) !important; border: 1px solid var(--badge-bd, var(--line)) !important; color: var(--badge-ink, var(--ink-2)) !important; max-width: 100%; }
.sheet-table td.status-cell, .sheet-table td.sub-status, .subitem-table td.sub-status, .mw-table th.mw-status-cell { text-align: center; }
.status-cell .pill, .sub-status .task-status-pill { justify-content: center; min-width: 96px; }
.pill.InProgress, .task-status-pill.InProgress { --badge-bg: var(--st-inprogress-bg); --badge-bd: var(--st-inprogress-bd); --badge-ink: var(--st-inprogress-ink); }
.pill.InReview, .task-status-pill.InReview, .pill.Proposed { --badge-bg: var(--st-proposed-bg); --badge-bd: var(--st-proposed-bd); --badge-ink: var(--st-proposed-ink); }
.pill.Paused, .task-status-pill.Paused { --badge-bg: var(--st-paused-bg); --badge-bd: var(--st-paused-bd); --badge-ink: var(--st-paused-ink); }
.pill.Complete, .task-status-pill.Complete { --badge-bg: var(--st-complete-bg); --badge-bd: var(--st-complete-bd); --badge-ink: var(--st-complete-ink); }
.pill.Billable { --badge-bg: var(--st-billable-bg); --badge-bd: var(--st-billable-bd); --badge-ink: var(--st-billable-ink); }
.pill.Billed { --badge-bg: var(--st-billed-bg); --badge-bd: var(--st-billed-bd); --badge-ink: var(--st-billed-ink); }
.ic-chip-select { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-md); border: 0; border-radius: var(--radius-control); background: transparent; color: var(--ink); padding: 0 var(--space-2); }
.ic-chip-select:hover { background: var(--surface-2); }
.ic-type-btn { width: 100%; justify-content: flex-start; gap: var(--space-2); border: 1px solid var(--line-strong); padding: 0 var(--space-3); }
.ic-type-btn > svg { margin-left: auto; }
.ic-type-btn svg, .ic-chip-select svg { width: var(--icon-sm); height: var(--icon-sm); flex-shrink: 0; }
.ic-money-row, .ic-paired-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-4); }
.ic-paired-field, .ic-money-field { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.ic-paired-field .dp, .ic-paired-field .dp-toggle, .ic-money-field .input { width: 100%; min-width: 0; }
/* The filter's enhanced controls fill their row, including portal toggles. */
.filter-panel .fp-row { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--space-2); margin: 0; width: 100%; }
.filter-panel .fp-row .dd { display: block; min-width: 0; width: 100%; }
.filter-panel .fp-row .dd .dd-toggle { display: flex; width: 100% !important; max-width: none; min-width: 0; height: var(--control-md); padding: 0 var(--space-3); border: 1px solid var(--line-strong) !important; background: var(--surface) !important; border-radius: var(--radius-control); }
.filter-panel .fp-clear { align-self: stretch; min-height: var(--control-sm); border: 1px solid var(--line); background: var(--surface-2); color: var(--ink-2); font-weight: 400; }
/* Task-only data, the same table shell, toolbar, group headers and columns. */
#myWorkCard .board-toolbar { padding: var(--space-3) 0 var(--space-4); }
#myWorkCard .toolbar-search { width: 200px; flex: 0 1 200px; }
.mw-table .mw-col-select, .mw-table .mw-col-fill { width: 36px; }
.mw-table .mw-col-task { width: auto; }
.mw-table .mw-col-date, .mw-table .mw-col-status { width: 18%; }
.mw-table .mw-col-client { width: 24%; }
.mw-table .mw-col-item { width: 160px; }
.mw-table .mw-col-effort { width: 112px; }
.mw-table th.mw-task-cell, .mw-table th.mw-date-cell, .mw-table th.mw-status-cell { width: auto; }
.mw-table .select-cell { padding: 0 var(--space-2); }
.mw-table .sub-name-text { color: var(--ink); }
.mw-table .group-header .group-header-cell { height: auto; padding: 0; }
/* Calendar headings and day cells share exactly seven shrinkable columns. */
.cal-head, .mw-cal-head { display: flex; flex-wrap: wrap; min-width: 0; gap: var(--space-2); }
.cal-title, .mw-cal-title { flex: 1 1 120px; min-width: 0; font-size: var(--text-lg); white-space: normal; overflow-wrap: anywhere; }
.cal-legend { white-space: normal; max-width: 100%; }
.cal-dow, .cal-grid, .mw-cal-grid { grid-template-columns: repeat(7,minmax(0,1fr)); }
.mw-cal-grid { overflow: hidden; }
.mw-cal-day, .mw-cal-dow { min-width: 0; padding: var(--space-2) var(--space-1); }
.mw-cal-task { width: 100%; min-width: 0; }
.cal-dow span { text-align: left; padding: var(--space-2) var(--space-1); }
@media(max-width:820px) {
  #myWorkCard .toolbar-search { flex: 1 1 120px; width: auto; }
  .mw-table .mw-col-select, .mw-table .mw-col-fill { width: var(--touch-target); }
  .mw-table { min-width: 760px; }
  .ic-money-row, .ic-paired-row { gap: var(--space-2); }
  .cal-legend { flex-basis: 100%; }
}

#myWorkBody { padding: 0; gap: var(--space-1); }

.drawer-form .form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--space-3); }

/* Date-picker tracks must shrink independently of square button intrinsic size. */
.dp-pop, .dp-cal { width: 350px; box-sizing: border-box; max-height: calc(100dvh - 24px); overflow-x: hidden; }
.dp-head { display: grid; grid-template-columns: var(--control-sm) var(--control-sm) minmax(0,1fr) var(--control-sm) var(--control-sm); padding: var(--space-2) 0; }
.dp-head .dp-nav { min-width: 0; padding: 0; }
.dp-title { min-width: 0; text-align: center; white-space: nowrap; }
.dp-grid { grid-template-columns: repeat(7,minmax(0,1fr)); gap: 0; }
.dp-grid:not(.dp-days) { border-left: 1px solid transparent; }
.dp-days { grid-auto-rows: var(--touch-target); border-top: 1px solid var(--line-subtle); border-left: 1px solid var(--line-subtle); }
.dp-cell { min-width: 0; height: 100%; aspect-ratio: auto; box-sizing: border-box; border-right: 1px solid var(--line-subtle); border-bottom: 1px solid var(--line-subtle); }
.dp-day { display: flex; align-items: center; justify-content: center; border-radius: 0; height: 100%; aspect-ratio: auto; }
.dp-dow { padding: var(--space-2) 0; }
.range-pop { width: 700px; box-sizing: border-box; max-width: calc(100vw - 24px); max-height: calc(100dvh - 24px); overflow: auto; }
.rp-months { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
.rp-month { min-width: 0; }
.cal-week { min-height: max(88px,calc(28px + var(--lanes,0) * var(--cal-lane) + 6px)); }
.cal-week, .cal-cell, .mw-cal-day, .mw-cal-dow { border-color: var(--line-subtle); }
@media(max-width:600px) { .rp-months { grid-template-columns: minmax(0,1fr); } }
@media(max-width:360px) { .dp-head { grid-template-columns: repeat(2,36px) minmax(0,1fr) repeat(2,36px); } .dp-head .dp-nav { width: 36px; } .dp-title { font-size: var(--text-xs); } }

/* Keep preview context visible without covering calendar footer actions. */
.demo-banner { position: fixed; left: 50%; bottom: var(--space-3); transform: translateX(-50%); z-index: 500; background: var(--ink); color: var(--surface); font: 600 var(--text-xs)/1 var(--font-sans); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); box-shadow: var(--shadow-lg); border: 1px solid var(--line); pointer-events: none; white-space: nowrap; }

/* Frozen identity columns share the actual touch-sized selection track. */
@media (max-width: 820px) {
  .sheet-table thead th:nth-child(2), .sheet-table .item-cell, .mw-table td.sub-name { position: sticky; left: var(--touch-target); }
  #projectTable .select-cell, #projectTable thead th:nth-child(1) { position: sticky; left: 0; }
  #projectTable .item-cell, #projectTable thead th:nth-child(2) { position: sticky; left: var(--touch-target); box-shadow: var(--shadow-sticky); }
  .mw-table td.sub-name { z-index: 3; background: var(--surface); box-shadow: var(--shadow-sticky); }
  .mw-table .mw-row:hover > td.sub-name { background: var(--surface-hover); }
  .mw-table .mw-row.is-selected > td.sub-name { background: var(--accent-soft); }
  .status-tabs { flex-wrap: wrap; overflow-x: visible; margin: 0 0 var(--space-1); }
}
@media (max-width: 600px) {
  #projectTable .col-item, .mw-table .mw-col-task { width: var(--cell-identity-mobile) !important; }
  #projectTable .col-client { width: auto !important; }
  #projectTable.hide-col-client .col-addcol { width: auto !important; }
  .mw-table .mw-col-client { width: auto; }
  .mw-table:has(.mw-col-item) { min-width: 920px; }
  .mw-table:has(.mw-col-effort) { min-width: 872px; }
  .mw-table:has(.mw-col-item):has(.mw-col-effort) { min-width: 1032px; }
}
@media (max-width: 360px) { :root { --cell-identity-mobile: 128px; } }