/* =====================================================================
   A2+ Design — PROJECT TIMELINE
   Sibling to the Planning Board: same wordmark, same Inter, same
   light/dark discipline. Its own accent, and its own way of showing
   work — bars against dates rather than task cards.

   The rule this file follows: one job, one device. Status is a dot,
   progress is a bar, structure is a hairline. Nothing says the same
   thing twice.
   ===================================================================== */

:root {
  --bg:        #D1CCC5;   /* slightly lighter mushroom / taupe-grey app ground */
  --surface:   #FAF8F5;
  --surface-2: #EFEBE4;
  --option-panel: #F2F0EC;
  --action-panel: #E5E1DB;   /* softly darker roll-down surface inside very light-grey sheets */
  --line:      #E8E3DC;
  --line-2:    #CCC5BB;
  --divider:   #D8D1C8;
  --ink:       #1D1815;
  --ink-2:     #5F564C;
  --ink-3:     #948A7D;

  --accent:      #0E6E70;
  --accent-ink:  #FFFFFF;
  --accent-soft: #D8EAE9;
  --today-cyan:  #18BFD1;

  --gold:      #A2761A;
  --gold-soft: #F3E7CD;
  --coral:     #C24429;
  --coral-soft:#F8E1DB;
  --green:     #3F8B33;
  --green-soft:#E2EFD8;
  --slate:     #A79D8F;
  --rest:      rgba(29,24,21,.030);   /* Sunday tint on the chart */
  --labw:      152px;                 /* Gantt label column; JS reads this */
  --magenta:   #E8368F;   /* sampled from the A2+DESIGN artwork */

  /* project header bands: the two trades */
  --band-int:  #6C5A50;   /* interior / renovation: muted espresso brown with a grey undertone */
  --band-lan:  #435E55;   /* landscape */
  --band-non:  #7E7468;   /* the undated list, which spans sites */

  /* one colour per status, none of them a near-neighbour of another */
  --st-not:  #9A948B;  --st-not-s:  #EFEDE8;   /* same grey as Canceled: in both, nothing is happening */
  --st-pen:  #A2761A;  --st-pen-s:  #F5E9CE;
  --st-run:  #0E6E70;  --st-run-s:  #D6EAE9;
  --st-hold: #4A453E;  --st-hold-s: #E2DED7;  --st-hold-bar: #B3ACA1;
  --st-done: #3F8B33;  --st-done-s: #E1EFD9;
  --st-can:  #9A948B;  --st-can-s:  #EFEDE8;
  /* urgent takes the red, so overdue takes the orange */
  --urgent:   #C42A21;  --urgent-s:  #FBE3E0;
  --overdue:  #D97316;  --overdue-s: #FBEAD8;
  --chip:      rgba(29,24,21,.075);   /* neutral chip, e.g. Not Started */
  --fade-w:    34px;      /* how long the soft end of a long line is */

  --font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --tap: 44px;
  --radius: 14px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:        #0C0B0B;   /* slightly deeper dark background */
    --surface:   #1E1B18;
    --surface-2: #26221F;
    --option-panel: #292622;
    --action-panel: #302D29;
    --line:      #302B26;
    --line-2:    #463F38;
    --divider:   #403933;
    --ink:       #F2EDE7;
    --ink-2:     #B6ABA0;
    --ink-3:     #857B70;

    --accent:      #3FBFBB;
    --accent-ink:  #0E1F1F;
    --accent-soft: #123634;
    --today-cyan:  #4AD7E5;

    --gold:      #DDB367;
    --gold-soft: #372C18;
    --coral:     #EE8168;
    --coral-soft:#3A1F17;
    --green:     #7BC96A;
    --green-soft:#1E3018;
    --slate:     #6D6459;
    --rest:      rgba(255,255,255,.030);

    --band-int:  #4B403A;
    --band-lan:  #344B43;
    --band-non:  #403A34;
    --chip:      rgba(255,255,255,.085);

    --st-not:  #817D76;  --st-not-s:  #242320;
    --st-pen:  #DDB367;  --st-pen-s:  #372C18;
    --st-run:  #3FBFBB;  --st-run-s:  #123634;
    --st-hold: #C6C1B9;  --st-hold-s: #35322D;  --st-hold-bar: #6F6A62;
    --st-done: #7BC96A;  --st-done-s: #1E3018;
    --st-can:  #817D76;  --st-can-s:  #242320;
    --urgent:   #F0705F;  --urgent-s:  #3A1C18;
    --overdue:  #F0A040;  --overdue-s: #3A2A15;
  }
}

:root[data-theme="dark"] {
  --bg:        #0C0B0B;   /* slightly deeper dark background */
  --surface:   #1E1B18;
  --surface-2: #26221F;
  --option-panel: #292622;
  --action-panel: #302D29;
  --line:      #302B26;
  --line-2:    #463F38;
  --divider:   #403933;
  --ink:       #F2EDE7;
  --ink-2:     #B6ABA0;
  --ink-3:     #857B70;

  --accent:      #3FBFBB;
  --accent-ink:  #0E1F1F;
  --accent-soft: #123634;
  --today-cyan:  #4AD7E5;

  --gold:      #DDB367;
  --gold-soft: #372C18;
  --coral:     #EE8168;
  --coral-soft:#3A1F17;
  --green:     #7BC96A;
  --green-soft:#1E3018;
  --slate:     #6D6459;
  --rest:      rgba(255,255,255,.030);

  --band-int:  #4B403A;
  --band-lan:  #344B43;
  --band-non:  #403A34;
  --chip:      rgba(255,255,255,.085);

  --st-not:  #817D76;  --st-not-s:  #242320;
  --st-pen:  #DDB367;  --st-pen-s:  #372C18;
  --st-run:  #3FBFBB;  --st-run-s:  #123634;
  --st-hold: #C6C1B9;  --st-hold-s: #35322D;  --st-hold-bar: #6F6A62;
  --st-done: #7BC96A;  --st-done-s: #1E3018;
  --st-can:  #817D76;  --st-can-s:  #242320;
  --urgent:   #F0705F;  --urgent-s:  #3A1C18;
  --overdue:  #F0A040;  --overdue-s: #3A2A15;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: #806B60; }
html, body { height: 100%; width: 100%; max-width: 100%; overflow-x: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

.screen { width: 100%; max-width: 100%; overflow-x: hidden; }
.hidden { display: none !important; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.sheet button:focus:not(:focus-visible) { outline: none; }
/* a tapped control keeps its own outline, not a second one on top */
.pick:focus, .pick:focus-visible, .statuses button:focus, .sw:focus,
.who-pick button:focus, .segment .seg:focus { outline: none; }

/* ---------------------------------------------------------- wordmark
   Rebuilt from the A2+DESIGN artwork. Measured against it: A2 stem
   0.089 of cap height (artwork 0.095), DESIGN stem 0.195 (0.202), the +
   at 0.390 cap height (0.392) sitting 0.228 above the cap line (0.244),
   and a 0.496 gap before the D (0.496). The letterforms take --ink so
   the mark inverts with the theme; the + keeps its magenta on both.  */
.wordmark { font-size: 13px; line-height: 1; white-space: nowrap; color: var(--ink); }
.wordmark .lite { font-weight: 300; letter-spacing: .03em; }
.wordmark .plus {
  color: var(--magenta); font-weight: 700; font-size: .592em;
  position: relative; top: -1.005em; margin-left: .03em;
}
.wordmark .bold { font-weight: 700; letter-spacing: .005em; margin-left: .247em; }
.wordmark.lg { font-size: 18px; }

/* ============================================================== LOGIN */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: 24px; }
.login-card {
  width: 100%; max-width: 340px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 18px; padding: 32px 26px 28px;
}
.app-name { font-size: 27px; font-weight: 700; letter-spacing: -.022em; margin: 24px 0 0; }
.app-name.stacked { display:flex; flex-direction:column; gap:4px; white-space:normal; }
.app-name.stacked .brand-line { font-size:.62em; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); }
.app-name.stacked .product-line { display:block; line-height:1.02; }
.app-sub { margin: -1px 0 28px; color: var(--ink-3); font-size: 15px; line-height: 1.25; }


.field { display: block; margin-bottom: 22px; }
.field > span {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 11px; font-weight: 700; letter-spacing: .09em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 7px;
}
.pct-val { font-size: 14px; letter-spacing: 0; color: var(--accent); font-variant-numeric: tabular-nums; }
.field input, .field select {
  width: 100%; height: var(--tap); padding: 0 14px;
  font-size: 16px;
  background: transparent; border: 1px solid var(--line-2);
  border-radius: 11px; outline: none;
}
.err { color: var(--coral); font-size: 13.5px; min-height: 20px; margin: 12px 0 0; }

/* =============================================================== BTNS */
.btn {
  height: var(--tap); padding: 0 18px; border-radius: 11px;
  border: 1px solid var(--line-2); background: var(--surface);
  font-weight: 600; cursor: pointer;
}
.btn.block { width: 100%; margin-top: 10px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.btn.primary:disabled { opacity: .5; }
.btn.ghost { background: transparent; }

.icon-btn {
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; background: transparent; border-radius: 9px; cursor: pointer; color: var(--ink-2);
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn { -webkit-tap-highlight-color: transparent; }
.icon-btn:hover, .icon-btn:active, .icon-btn:focus { background: transparent; color: var(--ink); }

/* ============================================================== SHELL */
#scApp { display: flex; flex-direction: column; height: 100dvh; width: 100%; max-width: 100%; overflow: hidden; }

.mast {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 10px; padding: 12px 14px;
  padding-top: calc(12px + env(safe-area-inset-top));
  background: var(--bg);
}
.mast-title {
  font-weight: 700; font-size: 12.5px; text-align: center;
  text-transform: uppercase; letter-spacing: .1em; color: var(--ink);
  white-space: nowrap;
}
.mast-right { display: flex; justify-content: flex-end; gap: 2px; }

.view { flex: 1; min-height: 0; min-width: 0; width: 100%; max-width: 100%; display: flex; flex-direction: column; overflow: hidden; }

/* ------------------------------------------------------------ controls
   One quiet strip. The segmented control is a single object rather than
   two loose buttons, and the filters sit as text, not as boxes.      */
.segbar { display: flex; align-items: center; gap: 10px; padding: 4px 14px 14px; }
.segbar.wrap { flex-wrap: wrap; gap: 8px 10px; }
.seg-spacer { flex: 1; }

.segment {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--surface-2); border-radius: 999px;
}
.segment .seg {
  height: 30px; padding: 0 16px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-3);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.segment .seg.on { background: var(--surface); color: var(--ink); }

.chip {
  height: 30px; padding: 0 4px; border: 0; background: transparent;
  font-size: 13px; font-weight: 500; color: var(--ink-3); cursor: pointer;
}
.chip[aria-pressed="true"] { color: var(--accent); font-weight: 600; }

.mini { display: inline-flex; align-items: center; gap: 5px; font-size: 13px; color: var(--ink-3); }
.mini select {
  height: 30px; padding: 0 22px 0 8px; border: 0; border-radius: 8px;
  background: var(--surface-2); color: var(--ink); font-weight: 600; font-size: 13px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 13px) 13px, calc(100% - 8px) 13px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

/* ------------------------------------------------ animated option menus
   Native selects are kept underneath for state/change events, while the
   visible control rolls a quiet option panel down and folds it back up
   after a choice. */
.roll-select { position: relative; display: inline-block; max-width: 100%; z-index: 12; }
.roll-select.pick-roll { max-width: 60%; }
.roll-native {
  position: absolute !important; width: 1px !important; height: 1px !important;
  opacity: 0 !important; pointer-events: none !important; overflow: hidden !important;
}
.roll-trigger {
  border: 0; cursor: pointer; font: inherit; color: inherit;
  display: inline-flex; align-items: center; justify-content: space-between; gap: 10px;
  white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}
.roll-trigger::after {
  content: ''; width: 7px; height: 7px; flex: 0 0 7px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .16s ease;
}
.roll-select.open .roll-trigger::after { transform: rotate(225deg) translate(-1px,-1px); }
.roll-select.pick-roll .roll-trigger {
  height: 36px; border: 1px solid var(--accent); border-radius: 999px;
  padding: 0 14px 0 15px; background: transparent; color: var(--accent);
  font-size: 14px; font-weight: 600;
}
.roll-select.mini-roll .roll-trigger {
  height: 30px; padding: 0 9px 0 10px; border-radius: 999px;
  background: var(--surface-2); color: var(--ink); font-size: 13px; font-weight: 600;
}
.roll-menu {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 80;
  min-width: max(210px, 100%); max-width: min(330px, 90vw); max-height: min(68dvh, 420px); overflow-y: auto;
  padding: 12px; border: 1px solid var(--line-2); border-radius: 14px;
  background: var(--option-panel); box-shadow: 0 12px 30px rgba(29,24,21,.16);
  transform-origin: top; animation: rollDown .17s cubic-bezier(.2,.8,.3,1);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
.roll-menu.closing { animation: rollUp .13s ease forwards; pointer-events: none; }
.roll-group + .roll-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--divider); }
.roll-group-label {
  display: block; padding: 7px 12px 6px; color: var(--ink-3); font-size: 10.5px;
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.roll-option {
  display: block; width: 100%; min-height: 46px; padding: 11px 14px; border: 0;
  border-radius: 999px; background: transparent; color: var(--ink); text-align: left;
  font: inherit; font-size: 13.5px; cursor: pointer;
  touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.roll-option + .roll-option { margin-top: 2px; }
/* The main All Status menu is intentionally a little denser than the
   action menus used inside settings sheets. */
.roll-select.pick-roll .roll-option { min-height: 42px; padding: 8px 13px; }
.roll-select.pick-roll .roll-option + .roll-option { margin-top: 0; }
.roll-select.pick-roll .roll-group + .roll-group { margin-top: 8px; padding-top: 8px; }
.roll-select.pick-roll .roll-group-label { padding-top: 5px; padding-bottom: 5px; }
/* Keep the main filter menu at a consistent full panel height even when all
   accordion sections are folded, so the menu does not jump shorter/taller. */
.roll-select.pick-roll .roll-menu {
  height: min(68dvh, 420px);
  overscroll-behavior: contain;
}

/* All Status is an accordion: Status is open by default while Supervisors
   and Workers stay folded. Open/Close All controls project cards without
   becoming filter values themselves. */
.roll-project-controls {
  display: grid; grid-template-columns: 1fr 1fr; gap: 7px;
  padding: 1px 0 10px; margin-bottom: 2px; border-bottom: 1px solid var(--divider);
}
.roll-project-control {
  min-height: 38px; padding: 7px 9px; border: 0; border-radius: 999px;
  background: rgba(29,24,21,.055); color: var(--ink); font: inherit;
  font-size: 12.5px; font-weight: 650; cursor: pointer;
}
.roll-project-control:active { background: rgba(29,24,21,.10); }
.roll-group.accordion { margin-top: 0; padding-top: 0; border-top: 0; }
.roll-group.accordion + .roll-group.accordion {
  margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--divider);
}
.roll-group-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; min-height: 38px; padding: 0 9px; border: 0; border-radius: 999px;
  background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer;
}
.roll-group-toggle:active { background: rgba(29,24,21,.045); }
.roll-group-toggle .roll-group-label { padding: 0 3px; }
.roll-group-chevron {
  flex: 0 0 7px; width: 7px; height: 7px; margin-right: 3px;
  border-right: 1.2px solid var(--ink-3); border-bottom: 1.2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .18s ease;
}
.roll-group.open .roll-group-chevron { transform: rotate(225deg); }
.roll-group-body {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .2s cubic-bezier(.2,.8,.3,1);
}
.roll-group.open .roll-group-body { grid-template-rows: 1fr; }
.roll-group-options { min-height: 0; overflow: hidden; padding: 0 0 3px; }
/* When another accordion section opens, hide the previous section's rows immediately.
   This prevents the selected All Status pill from showing through during the roll-up. */
.roll-group.accordion:not(.open) .roll-group-options { opacity: 0; visibility: hidden; }
.roll-group.accordion.open .roll-group-options { opacity: 1; visibility: visible; }

.roll-option:active { background: #DDD9D3; }
@media (hover: hover) and (pointer: fine) {
  .roll-option:hover { background: #DDD9D3; }
}
/* On touch devices, scrolling a menu must never paint a temporary grey
   option under the finger. Selection is shown only by the persistent .on
   state after a deliberate tap. */
@media (hover: none), (pointer: coarse) {
  .roll-option:active { background: transparent; }
  .roll-option.on:active { background: #E0DCD6; }
  .roll-group-toggle:active { background: transparent; }
}
.roll-option.on { background: #E0DCD6; color: var(--accent); font-weight: 650; }
/* Selected filter rows finish as a soft pill rather than a square-ended band. */
.roll-select.pick-roll .roll-option.on { border-radius: 999px; }
@keyframes rollDown { from { opacity: 0; transform: scaleY(.82) translateY(-5px); } to { opacity: 1; transform: scaleY(1) translateY(0); } }
@keyframes rollUp { from { opacity: 1; transform: scaleY(1) translateY(0); } to { opacity: 0; transform: scaleY(.82) translateY(-5px); } }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .roll-menu { background: #292622; }
  :root:not([data-theme="light"]) .roll-option:active { background: #35312D; }
  @media (hover: hover) and (pointer: fine) {
    :root:not([data-theme="light"]) .roll-option:hover { background: #35312D; }
  }
  :root:not([data-theme="light"]) .roll-option.on { background: #332F2B; }
  :root:not([data-theme="light"]) .roll-project-control { background: rgba(255,255,255,.055); color: var(--ink); }
  :root:not([data-theme="light"]) .roll-project-control:active,
  :root:not([data-theme="light"]) .roll-group-toggle:active { background: rgba(255,255,255,.09); }
}
:root[data-theme="dark"] .roll-menu { background: #292622; }
:root[data-theme="dark"] .roll-option:active { background: #35312D; }
@media (hover: hover) and (pointer: fine) {
  :root[data-theme="dark"] .roll-option:hover { background: #35312D; }
}
:root[data-theme="dark"] .roll-option.on { background: #332F2B; }
@media (hover: none), (pointer: coarse) {
  :root[data-theme="dark"] .roll-option.on:active { background: #332F2B; }
  :root:not([data-theme="light"]) .roll-option.on:active { background: #332F2B; }
}
:root[data-theme="dark"] .roll-project-control { background: rgba(255,255,255,.055); color: var(--ink); }
:root[data-theme="dark"] .roll-project-control:active,
:root[data-theme="dark"] .roll-group-toggle:active { background: rgba(255,255,255,.09); }

/* Final touch override comes after light/dark theme rules so iOS cannot
   leave a pressed row painted while the user is only scrolling. */
@media (hover: none), (pointer: coarse) {
  .roll-option:not(.on):active,
  .roll-group-toggle:active { background: transparent !important; }
}

/* ========================================================= TASK LIST
   Each site is one card. Inside it, tasks are rows split by a hairline —
   so the page has one border per project instead of one per task.    */
.list {
  flex: 1; width: 100%; min-width: 0; max-width: 100%;
  overflow-x: hidden; overflow-y: auto; padding: 10px 14px 28px;
  -webkit-overflow-scrolling: touch;
}
.list > .group + .group { margin-top: 22px; }

/* Each site is a coloured band with its card of tasks sitting inside it:
   brown for interior work, green for landscape. Keep the project card
   clean, without an outline, and use compact corner rounding. */
.group {
  --band: var(--band-int);
  width: 100%; min-width: 0; max-width: 100%;
  background: var(--band);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
}
.group[data-kind="landscape"] { --band: var(--band-lan); }
.group[data-kind="none"]      { --band: var(--band-non); }

.group-head {
  display: flex; align-items: center; gap: 8px;
  padding: 0 10px 0 0;
  min-height: 52px;
  font-size: 16.5px; font-weight: 700; line-height: 1.2;
  color: #FFFFFF;
}
.group-head .group-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.group-head .count { display: none; }

/* The coloured header is now a true disclosure row. The title side rolls
   the project's task list open/closed; the three dots are reserved for
   project actions and Area filtering. */
.project-toggle {
  flex: 1; min-width: 0; min-height: 52px; padding: 0 4px 0 13px;
  display: flex; align-items: center; gap: 11px;
  border: 0; background: transparent; color: inherit; font: inherit;
  text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
}
.project-toggle .group-title,
.project-toggle .project-fold-mark {
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.project-toggle:active { opacity: .82; }
.project-fold-mark {
  flex: 0 0 8px; width: 8px; height: 8px; margin: 0;
  align-self: center;
  border-right: 1.35px solid rgba(255,255,255,.62);
  border-bottom: 1.35px solid rgba(255,255,255,.62);
  transform: rotate(45deg); transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.group.collapsed .project-fold-mark { transform: rotate(-45deg); }

/* Smooth project roll-up/roll-down. Grid rows animate to the actual task
   content height, so projects can contain a few tasks or hundreds. */
.project-task-wrap {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows .24s cubic-bezier(.2,.78,.25,1);
}
.project-task-inner { min-height: 0; overflow: hidden; }
.group.collapsed .project-task-wrap { grid-template-rows: 0fr; }

/* Project ordering. Reorder mode uses the whole project header as the drag
   surface. The six dots are only a visual cue. After a deliberate long press,
   the active project compresses and darkens so it reads as firmly held rather
   than lifted or floating. */
.group.drag-collapsed .project-task-wrap { grid-template-rows: 0fr !important; transition: none; }
.group.project-reordering {
  position: relative; z-index: 120; opacity: 1;
  transform: scale(.95);
  transform-origin: center center;
  filter: brightness(.75) saturate(.97);
  box-shadow: none;
  animation: projectPress .15s cubic-bezier(.2,.8,.3,1) both;
}
.group.project-reordering .group-head { cursor: grabbing; }
.group.project-drop-settle { animation: projectRelease .18s cubic-bezier(.2,.8,.3,1) both; }
@keyframes projectPress {
  from { transform: scale(1); filter: brightness(1) saturate(1); }
  to   { transform: scale(.95); filter: brightness(.75) saturate(.97); }
}
@keyframes projectRelease {
  from { transform: scale(.95); filter: brightness(.75) saturate(.97); }
  to   { transform: scale(1); filter: brightness(1) saturate(1); }
}
body.project-reorder-mode { user-select: none; -webkit-user-select: none; }

.project-reorder-toolbar {
  position: sticky; top: 0; z-index: 180;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin: 0 0 24px; padding: 9px 11px 9px 17px;
  border: 1px solid var(--divider); border-radius: 13px;
  background: var(--surface-2); box-shadow: none;
}
.project-reorder-copy { min-width: 0; display: flex; align-items: center; padding-left: 8px; }
.project-reorder-copy span { font-size: 13px; line-height: 1.3; color: var(--ink-2); font-weight: 600; }
.project-reorder-done {
  flex: 0 0 auto; min-height: 36px; padding: 7px 13px; border: 0; border-radius: 999px;
  background: var(--accent); color: #fff; font: inherit; font-size: 12.5px; font-weight: 700;
}
.reorder-session-card { border-radius: 999px; }
.reorder-session-card .group-head {
  border-radius: inherit;
  cursor: grab;
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
.reorder-session-card .project-toggle { cursor: grab; padding-left: 20px; }
.reorder-session-card .group-title { font-weight: 600; color: rgba(255,255,255,.90); }
.reorder-session-card .project-toggle:active { opacity: 1; }

/* Six-dot reorder cue: no button, no circular plate, no shadow. */
.project-reorder-grip {
  flex: 0 0 28px; width: 28px; height: 38px; margin-left: 3px; margin-right: 2px;
  display: grid; place-items: center;
  color: rgba(255,255,255,.80);
  pointer-events: none;
  -webkit-user-select: none; user-select: none;
}
.project-grip-dots {
  font-size: 25px; line-height: 1; transform: translateY(-1px);
  letter-spacing: .2px;
}
body.project-reorder-session .group { transition: transform .18s ease, filter .18s ease; }

/* Floating project menu trigger: a subtle horizontal ellipsis at the far
   right. It takes very little title space and never changes card height. */
.project-area-filter { flex: 0 0 28px; width: 28px; min-width: 28px; }
.project-area-trigger {
  display: grid; place-items: center; width: 28px; height: 34px; padding: 0;
  border: 0; border-radius: 8px; background: transparent;
  color: rgba(255,255,255,.58); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.project-more-dots {
  display: block; font-size: 20px; font-weight: 600; line-height: 1;
  letter-spacing: 1px; transform: translateY(-2px);
}
.project-area-trigger[aria-expanded="true"] { color: rgba(255,255,255,.92); }
.project-area-trigger:active { background: rgba(255,255,255,.08); }
.project-area-menu {
  position: fixed; z-index: 950; box-sizing: border-box;
  max-height: 320px;
  max-height: min(320px, calc(100dvh - 24px)); overflow-y: auto;
  padding: 9px 10px 10px;
  background: var(--option-panel);
  border: 1px solid rgba(29,24,21,.11); border-radius: 12px;
  box-shadow: 0 9px 26px rgba(32,27,23,.18), 0 2px 7px rgba(32,27,23,.10);
  animation: rollDown .17s cubic-bezier(.2,.8,.3,1); transform-origin: top right;
  -webkit-overflow-scrolling: touch;
}
.project-area-menu.closing { animation: rollUp .13s ease forwards; pointer-events: none; }
.project-area-option {
  display: block; width: 100%; min-height: 39px; padding: 8px 12px;
  border: 0; border-radius: 8px; background: transparent; color: #2A2521;
  font: inherit; font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer;
}
.project-area-option + .project-area-option { margin-top: 1px; }
.project-area-option:active { background: #DDD9D3; }
.project-area-option.on { background: #E0DCD6; color: var(--accent); font-weight: 650; }
.project-menu-action {
  display: flex; align-items: center; gap: 8px;
  width: 100%; min-height: 40px; padding: 8px 12px;
  border: 0; border-radius: 8px; background: transparent; color: #2A2521;
  font: inherit; font-size: 12.5px; font-weight: 650; text-align: left; cursor: pointer;
}
.project-menu-action:active { background: #DDD9D3; }
.project-menu-plus, .project-menu-spacer { width: 14px; flex: 0 0 14px; text-align: center; }
.project-menu-plus { font-size: 17px; font-weight: 500; line-height: 1; }
.project-menu-divider { height: 1px; margin: 6px 4px; background: rgba(42,37,33,.14); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .project-area-menu {
    background: #292622; border-color: rgba(255,255,255,.10);
    box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.24);
  }
  :root:not([data-theme="light"]) .project-area-option,
  :root:not([data-theme="light"]) .project-menu-action { color: #F1ECE6; }
  :root:not([data-theme="light"]) .project-area-option:active,
  :root:not([data-theme="light"]) .project-menu-action:active { background: #35312D; }
  :root:not([data-theme="light"]) .project-area-option.on { background: #332F2B; }
  :root:not([data-theme="light"]) .project-menu-divider { background: rgba(255,255,255,.13); }
}
:root[data-theme="dark"] .project-area-menu {
  background: #292622; border-color: rgba(255,255,255,.10);
  box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 2px 8px rgba(0,0,0,.24);
}
:root[data-theme="dark"] .project-area-option,
:root[data-theme="dark"] .project-menu-action { color: #F1ECE6; }
:root[data-theme="dark"] .project-area-option:active,
:root[data-theme="dark"] .project-menu-action:active { background: #35312D; }
:root[data-theme="dark"] .project-area-option.on { background: #332F2B; }
:root[data-theme="dark"] .project-menu-divider { background: rgba(255,255,255,.13); }

.card { background: var(--surface); border: 0; border-radius: 0 0 14px 14px; overflow: hidden; }


.project-backlog-head {
  padding: 14px 18px 8px 54px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .045em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.task {
  position: relative; display: grid;
  grid-template-columns: 8px 1fr; align-items: start; gap: 0 11px;
  padding: 11px 14px 14px 13px; cursor: pointer;
}
.task + .task { border-top: 1px solid var(--divider); }
.task:active { background: var(--surface-2); }
.task .body { min-width: 0; }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--slate); margin-top: 4px; }
.task.s-notstarted .dot { background: var(--st-not); }
.task.s-pending    .dot { background: var(--st-pen); }
.task.s-inprogress .dot { background: var(--st-run); }
.task.s-onhold     .dot { background: var(--st-hold); }
.task.s-completed  .dot { background: var(--st-done); }
.task.s-canceled   .dot { background: var(--st-can); }
.task.overdue      .dot { background: var(--overdue); }

/* Work area, then the job itself. The arrow carries the hierarchy so
   neither half has to be shouted. */
.task .name { font-size: 14.5px; font-weight: 600; line-height: 1.25; letter-spacing: -.005em; }
.task .name .arw, .sheet h2 .arw { color: var(--ink-3); font-weight: 500; margin: 0 7px 0 5px; }
.task.s-canceled .name, .task.s-completed .name { color: var(--ink-2); }
/* finished and abandoned work fades by its title alone — the row keeps
   its weight so the list does not go patchy */
.task.s-completed .name, .task.s-canceled .name { opacity: .45; }
.task.urgent .name { color: var(--urgent); }

/* Status is the chip; everything after it is the quiet detail. It is
   trimmed plainly — the soft end is for the task description only. */
.task .meta { display: flex; align-items: center; gap: 8px; margin-top: 5px; }
.task .mtext {
  flex: 1; min-width: 0; font-size: 11.5px; color: var(--ink-3);
  font-variant-numeric: tabular-nums; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.task .mtext .sep { opacity: .5; margin: 0 5px; }
.task .mtext .late { color: var(--overdue); font-weight: 700; }
.task .mtext .strong { color: var(--ink); font-weight: 600; }

.tag {
  flex: none; padding: 2.5px 9px; border-radius: 999px;
  font-size: 10.5px; font-weight: 600; line-height: 1.4;
  background: var(--st-not-s); color: var(--st-not);
}
.task.s-notstarted .tag { background: var(--st-not-s);  color: var(--st-not); }
.task.s-pending    .tag { background: var(--st-pen-s);  color: var(--st-pen); }
.task.s-inprogress .tag { background: var(--st-run-s);  color: var(--st-run); }
.task.s-onhold     .tag { background: var(--st-hold-s); color: var(--st-hold); }
.task.s-completed  .tag { background: var(--st-done-s); color: var(--st-done); }
.task.s-completed  .tag::before { content: '\2713'; margin-right: 4px; font-weight: 700; }
.task.s-canceled   .tag { background: var(--st-can-s);  color: var(--st-can); }
.task.overdue      .tag { background: var(--overdue-s); color: var(--overdue); }

/* The measure runs the width of the row with the number at its end. */
/* The number's line box sets the height, so the rule below a row that
   shows no percentage sits exactly where the others do. */
.task .foot { display: flex; align-items: center; gap: 11px; margin-top: 8px; min-height: 17px; }
.prog { flex: 1; display: flex; height: 3px; border-radius: 2px; background: var(--line); overflow: hidden; }
.prog i { display: block; height: 100%; background: var(--st-run); }
.prog i.h { background: var(--st-hold-bar); }   /* the stretch spent on hold — lighter
   than the pill's grey on purpose: dark grey between dark teal had no contrast */
.prog i.r { background: transparent; }      /* still to come */
/* only the worked stretch takes the status colour — the held stretch
   keeps its own, so a stoppage is visible inside the run */
.task.s-completed .prog i.w { background: var(--st-done); }
.task.s-pending .prog i.w   { background: var(--st-pen); }
.task.s-canceled .prog i.w  { background: var(--st-can); }
.prog i.l { background: var(--overdue); }  /* the overrun, drawn at the same
   scale as the plan — six days over a four-day plan is a longer band than
   the work itself, which is the point */

.task .pct {
  flex: none; min-width: 32px; text-align: right; line-height: 17px;
  font-size: 12px; font-weight: 700; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* A line too long for the row fades out and can be pushed sideways with
   a finger. The fade sits on whichever side still has something to read. */
.slide {
  display: block; white-space: nowrap; text-overflow: clip;
  overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain;
  touch-action: pan-x;              /* the phone gives this the sideways swipe */
  scrollbar-width: none; -ms-overflow-style: none;
}
.slide::-webkit-scrollbar { display: none; }
.task .mtext.slide {
  overflow-x: auto; overflow-y: hidden; text-overflow: clip;
  touch-action: pan-x;
}
.slide.fade-r {
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade-w)), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg, #000 calc(100% - var(--fade-w)), rgba(0,0,0,0) 100%);
}
.slide.fade-l {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 var(--fade-w));
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 var(--fade-w));
}
.slide.fade-l.fade-r {
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 var(--fade-w),
                        #000 calc(100% - var(--fade-w)), rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0, #000 var(--fade-w),
                        #000 calc(100% - var(--fade-w)), rgba(0,0,0,0) 100%);
}

/* ------------------------------------------------------ empty project */
.empty-card { margin: 0; padding: 14px 14px 15px 32px; font-size: 12.5px; color: var(--ink-3); }

.btn.danger {
  display: block; width: auto; margin: 30px auto 0;
  padding: 12px 30px; border-radius: 999px;
  background: var(--urgent); border-color: var(--urgent); color: #FFFFFF;
}
.btn.danger:active { opacity: .85; }
.where.small { font-size: 11.5px; margin-top: 0; }
.rest-field { margin-top: 26px; }
.rest-field .who-pick { margin-bottom: 14px; }
.rest-field .who-pick button { font-variant-numeric: tabular-nums; }

/* language, in the menu sheet */
.menu-lang { padding: 12px 2px 4px; }
.menu-lang > span { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 9px; }
.lang-row { display: flex; flex-wrap: wrap; gap: 7px; }
.lang-row button {
  padding: 8px 13px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink-2);
}
.lang-row button.on { background: var(--accent-soft); border-color: var(--accent);
  color: var(--accent); font-weight: 600; }

/* urgent and on hold sit beside the status, not inside it */
.switches { display: flex; gap: 8px; margin: 14px 0 22px; }
.sw {
  flex: 1; padding: 11px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface);
  font: inherit; font-size: 13px; font-weight: 600; color: var(--ink-2);
}
.sw.urgent.on { background: var(--urgent-s); border-color: var(--urgent); color: var(--urgent); }
.sw.client.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }
.sw.hold.on   { background: var(--st-hold-s); border-color: var(--st-hold); color: var(--st-hold); }
/* Opening the hold dates changes nothing on the button itself — a button
   that changes colour looks applied, and that mistake has been made. */

/* the app's own confirm, over whatever is already open */
.confirm-scrim { position: fixed; inset: 0; background: rgba(19,17,16,.5); z-index: 60; }
.confirm-card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(330px, 86vw); z-index: 61;
  background: var(--surface); border-radius: 20px; padding: 24px 20px 18px;
  box-shadow: 0 20px 50px rgba(0,0,0,.25);
}
.confirm-text { margin: 0 0 4px; font-size: 15.5px; font-weight: 600; color: var(--ink); line-height: 1.35; }
.confirm-card .sheet-actions { margin-top: 20px; }
.btn.danger-solid { background: var(--urgent); border-color: var(--urgent); color: #FFFFFF; }

.btn.small { height: 40px; font-size: 13.5px; }

/* expandable task-setting panels: Complete and Put On Hold both roll
   down from their trigger, using one quiet light-grey surface. */
.roll-section {
  max-height: 0; opacity: 0; overflow: hidden; pointer-events: none;
  margin-top: 0; margin-bottom: 0; padding: 0 18px;
  border: 0 solid transparent; border-radius: 16px;
  background: var(--action-panel);
  transform: translateY(-8px);
  transition:
    max-height .32s cubic-bezier(.2,.8,.3,1),
    opacity .20s ease, transform .28s cubic-bezier(.2,.8,.3,1),
    margin .28s ease, padding .28s ease, border-width .28s ease;
}
.roll-section.open {
  max-height: 620px; opacity: 1; overflow: hidden; pointer-events: auto;
  margin-top: 14px; margin-bottom: 24px; padding: 20px;
  border-width: 1px; border-color: var(--line);
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .roll-section { transition: none; transform: none; }
}

/* the hold, with its own dates — a stop can be entered after the fact */
.hold-box .field { margin-bottom: 20px; }
.hold-box .two-up { gap: 14px; }
.hold-box .hold-list { margin-top: 10px; }

/* every stop this task has had, each one removable */
.hold-list { margin-top: 4px; margin-bottom: 20px; }
.hold-row {
  display: flex; align-items: center; gap: 10px;
  min-height: 40px; padding: 0 4px 0 13px;
  border: 1px solid var(--line); border-radius: 12px;
  margin-bottom: 7px;
}
.hold-when {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.hold-x {
  flex: 0 0 auto;
  width: 32px; height: 32px; border: 0; border-radius: 50%;
  background: transparent; color: var(--urgent);
  font-size: 21px; line-height: 1; cursor: pointer;
  outline: none; -webkit-tap-highlight-color: transparent;
}
.hold-x:focus, .hold-x:focus-visible { outline: none; }
.hold-x:active { background: rgba(196, 42, 33, .12); }
.hold-x:disabled { opacity: .4; }

/* start and end, side by side */
.two-up { display: flex; gap: 11px; }
.two-up > .field { flex: 1 1 0; min-width: 0; }
/* Date labels sit just inside the calendar field edge rather than hard
   against its left edge. Applies to Start / End and On hold from / Until. */
.two-up > .field > span { padding-left: 6px; }
.two-up input { width: 100%; min-width: 0; }

/* Hold-date calendars now use the same neutral grey as dropdown panels,
   keeping white reserved for cards and buttons. */
.sheet .hold-box input[type="date"] {
  background: var(--option-panel);
  color: var(--ink);
  -webkit-text-fill-color: var(--ink);
  color-scheme: normal;
}

/* iOS gives a date input its own intrinsic width, which pushes the
   sheet out of shape; this holds it to the column it is in. */
.sheet input[type="date"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; min-width: 0; min-height: 44px;
  font-size: 15px; line-height: 1.2;
  color: var(--ink); -webkit-text-fill-color: var(--ink);
}
.sheet .statuses, .sheet .who-pick { flex-wrap: wrap; }
.sheet h2 { line-height: 1.25; }
.sheet h2 + .field { margin-top: 32px; }

/* the filter list in the bar — the label carries the accent so it reads
   as something you can change */
.pick {
  height: 36px;                       /* the same as the Mine / All segment */
  border: 1px solid var(--accent); background: transparent;
  border-radius: 999px; padding: 0 32px 0 15px;
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  color: var(--accent); -webkit-text-fill-color: var(--accent); opacity: 1;
  max-width: 60%; text-overflow: ellipsis;
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
/* only the closed label is teal — the list itself reads as text */
.pick option, .pick optgroup {
  color: var(--ink); -webkit-text-fill-color: var(--ink);
  background: var(--option-panel); font-weight: 500;
}
.pick optgroup { font-weight: 700; }

/* a quiet rule between the sections of a sheet */
.rule { height: 1px; background: var(--divider); margin: 4px 0 22px; }

/* An empty date field draws nothing at all on iOS — no placeholder, no
   icon — so it looks broken. Every other browser draws its own, so this
   stand-in is shown only on WebKit for iOS. */
.date-box { position: relative; }
.date-ph { display: none; }
@supports (-webkit-touch-callout: none) {
  .date-box:not(.filled) .date-ph {
    display: block;
    position: absolute; left: 15px; top: 50%; transform: translateY(-50%);
    font-size: 15px; color: var(--ink-3); pointer-events: none;
  }
}
/* Hold-date placeholders follow the neutral sheet surface in both themes. */
.sheet .hold-box .date-box:not(.filled) .date-ph { color: var(--ink-3); }

/* worker picker in the new-task sheet */
.who-pick { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 3px; }
.who-pick button {
  padding: 7px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line-2); background: var(--surface);
  font: inherit; font-size: 12.5px; font-weight: 500; color: var(--ink-2);
}
.who-pick button.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); font-weight: 600; }

.empty { text-align: center; color: var(--ink-3); padding: 56px 20px; font-size: 14px; }

/* ============================================================= GANTT
   Only week boundaries are drawn. A line every day turned the chart
   into a fence; the bars are what should be read.                    */
.gantt { flex: 1; min-height: 0; display: flex; }
.gantt-scroll { flex: 1; overflow: auto; }
.gantt-inner { position: relative; min-width: max-content; padding-bottom: 20px; }

.g-row { display: flex; align-items: stretch; height: 46px; }
.g-row + .g-row:not(.group) .g-label { border-top: 1px solid var(--line); }

.g-label {
  position: sticky; left: 0; z-index: 3;
  width: var(--labw); min-width: var(--labw); padding: 0 12px 0 14px;
  background: var(--bg);
  display: flex; flex-direction: column; justify-content: center;
}
.g-label .name {
  font-size: 13.5px; font-weight: 600; line-height: 1.25;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.g-label .sub {
  font-size: 11.5px; color: var(--ink-3); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.g-track {
  position: relative; flex: 1;
  --dw: 30px;
  background-image:
    repeating-linear-gradient(to right,
      var(--rest) 0 var(--dw), transparent var(--dw) calc(var(--dw) * 7)),
    repeating-linear-gradient(to right,
      var(--line) 0 1px, transparent 1px calc(var(--dw) * 7));
  background-position: calc(var(--dw) * var(--sun, 0)) 0, calc(var(--dw) * var(--mon, 0)) 0;
}

/* header */
.g-head { position: sticky; top: 0; z-index: 5; background: var(--bg); height: 44px; }
.g-head .g-label { z-index: 6; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.g-head .g-track { background-image: none; }
.g-head + .g-row .g-label { border-top: 1px solid var(--line); }

.day {
  position: absolute; top: 0; bottom: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 10.5px; color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.day.rest { color: var(--line-2); }
.day.today { color: var(--coral); font-weight: 700; }
.day .mon {
  position: absolute; top: 3px; left: 4px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}
.day .num { margin-top: 8px; }

.today-line { position: absolute; top: 30px; bottom: 0; width: 1.5px; background: var(--coral); z-index: 2; pointer-events: none; opacity: .55; }

/* group divider */
.g-row.group { height: 34px; background: var(--bg); align-items: flex-end; }
.g-groupline {
  position: sticky; left: 0; display: inline-block; padding: 0 14px 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2); white-space: nowrap;
}

/* bars — a tinted track with a solid fill to the progress mark */
.bar {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: 22px; border-radius: 999px; overflow: hidden; z-index: 1;
  background: var(--surface-2); cursor: pointer;
}
.bar .fill { position: absolute; inset: 0 auto 0 0; }
.bar.s-notstarted { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.bar.s-pending    { background: var(--gold-soft); }
.bar.s-inprogress { background: var(--accent-soft); }
.bar.s-inprogress .fill { background: var(--accent); }
.bar.s-onhold     { background: var(--gold-soft); }
.bar.s-onhold .fill { background: var(--gold); opacity: .55; }
.bar.s-completed  { background: var(--green-soft); }
.bar.s-completed .fill { background: var(--green); opacity: .55; }
.bar.s-canceled   { background: var(--surface-2); opacity: .5; }
.bar.overdue      { background: var(--overdue-s); }
.bar.overdue .fill { background: var(--overdue); }

/* ============================================================ TABBAR */
.tabbar {
  display: flex; background: var(--bg);
  /* the home-indicator strip is dead space — keep a little clearance,
     not the whole of it */
  padding-bottom: max(6px, calc(env(safe-area-inset-bottom) - 16px));
}
.tab {
  flex: 1; border: 0; background: transparent; cursor: pointer;
  padding: 8px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 3px;
  color: var(--ink-3); font-size: 10.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
}
.tab svg { width: 22px; height: 22px; color: var(--ink-2); }
.tab.on { color: var(--accent); }
.tab.on svg { color: var(--accent); }
/* the middle tab makes something rather than going somewhere */
.tab.act svg { width: 24px; height: 24px; }

/* ============================================================= SHEET */
.sheet-root:empty { display: none; }
.scrim { position: fixed; inset: 0; background: rgba(19,17,16,.45); z-index: 40; animation: fade .16s ease; transition: opacity .18s ease; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41;
  background: var(--option-panel); border-radius: 20px 20px 0 0;
  padding: 8px 20px calc(22px + env(safe-area-inset-bottom));
  max-height: 88dvh; overflow-y: auto;
  animation: rise .22s cubic-bezier(.2,.8,.3,1);
}
@media (min-width: 640px) {
  .sheet {
    left: 50%; right: auto; bottom: auto; top: 50%; transform: translate(-50%,-50%);
    width: 430px; border-radius: 18px; border: 1px solid var(--line);
    animation: fade .16s ease;
  }
}
.grab {
  width: 100%; height: 28px; margin: -2px 0 2px; position: relative;
  background: transparent; cursor: grab; touch-action: none;
}
.grab::after {
  content: ''; position: absolute; left: 50%; top: 7px; transform: translateX(-50%);
  width: 42px; height: 5px; border-radius: 999px; background: var(--line-2);
}
@media (max-width: 639px) {
  .sheet > h2, .sheet > .where { touch-action: none; }
}
@media (max-width: 639px) {
  .sheet.dragging { animation: none; transition: none; }
  .sheet.settling { animation: none; transition: transform .22s cubic-bezier(.2,.8,.3,1); }
  .sheet.dismissing { animation: none; transition: transform .20s cubic-bezier(.4,0,1,1); }
  .sheet.dragging .grab { cursor: grabbing; }
}
.sheet h2 { font-size: 19px; font-weight: 700; margin: 0 0 3px; letter-spacing: -.015em; }
.sheet .where { font-size: 13px; color: var(--ink-3); margin: 0 0 30px; }

.stepper { display: flex; align-items: center; gap: 8px; }
.stepper button {
  width: var(--tap); height: var(--tap); flex: 0 0 var(--tap);
  border: 1px solid var(--line-2); background: var(--bg); border-radius: 11px;
  font-size: 20px; font-weight: 600; cursor: pointer;
}
.stepper input { text-align: center; font-variant-numeric: tabular-nums; }

.pcts { margin-bottom: 14px; display: flex; gap: 6px; margin-top: 8px; }
.pcts button {
  flex: 1; height: 34px; border-radius: 9px; border: 1px solid var(--line-2);
  background: var(--bg); font-size: 13px; font-weight: 600; cursor: pointer;
}
.pcts button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

input[type="range"] { width: 100%; accent-color: var(--accent); height: 32px; display: block; }

.statuses { display: flex; flex-wrap: wrap; gap: 6px; }
.statuses button {
  height: 34px; padding: 0 13px; border-radius: 999px;
  border: 1px solid var(--line-2); background: transparent;
  font-size: 13px; font-weight: 600; color: var(--ink-2); cursor: pointer;
}
.statuses button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* Project type is a binary choice: no outline; the inactive option is a
   quiet grey fill and the selected option carries only its solid accent. */
.project-type-picks button { border: 0 !important; }
.project-type-picks button:not(.on) {
  background: #D8D5D0; border-color: transparent; color: #655D54;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .project-type-picks button:not(.on) {
    background: #35312D; border-color: transparent; color: var(--ink-2);
  }
}
:root[data-theme="dark"] .project-type-picks button:not(.on) {
  background: #35312D; border-color: transparent; color: var(--ink-2);
}

.completion-field > span { margin-bottom: 12px; }
.completion-choices { display: grid; grid-template-columns: 1fr; gap: 10px; }
.completion-choices button {
  min-height: 50px; padding: 11px 14px; border-radius: 12px;
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink-2); font-size: 13.5px; font-weight: 600; line-height: 1.3;
  cursor: pointer; text-align: left;
}
.completion-choices button.on {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
}
.completion-choices button:disabled { opacity: .38; cursor: default; }
.completion-note { margin: 11px 1px 0 !important; min-height: 0; }

.sheet-actions { display: flex; gap: 10px; margin-top: 46px; }
.sheet-actions .btn { flex: 1; }

.readonly-note {
  background: var(--gold-soft); color: var(--gold);
  border-radius: 11px; padding: 11px 13px; font-size: 13px; margin-bottom: 6px;
}

.menu-item {
  display: flex; width: 100%; align-items: center; gap: 10px;
  height: 50px; padding: 0 4px; border: 0; background: transparent;
  border-bottom: 1px solid var(--divider); font-size: 15px; cursor: pointer; text-align: left;
}
.menu-item:last-child { border-bottom: 0; }
.menu-item.menu-refresh { border-top: 1px solid var(--divider); }
.menu-item.menu-logout { padding-left: 14px; }
.menu-who { padding: 4px 4px 28px; }
.menu-who strong { display: block; font-size: 17px; }
.menu-who span { display: block; font-size: 13px; color: var(--ink-3); }
.menu-who .menu-version { margin-top: 4px; font-size: 11.5px; color: var(--ink-3); }

/* ============================================================= TOAST */
.toast {
  position: fixed; left: 50%; bottom: 88px; transform: translateX(-50%) translateY(12px);
  background: var(--ink); color: var(--bg); padding: 10px 17px; border-radius: 999px;
  font-size: 13.5px; font-weight: 500; opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s; z-index: 60; max-width: 88vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* -------------------------------------------------- wider screens */
@media (min-width: 760px) {
  :root { --labw: 230px; }
  .list { padding: 0 20px 36px; max-width: 860px; width: 100%; margin: 0 auto; }
  .segbar { padding: 4px 20px 16px; }
  .mast { padding-left: 20px; padding-right: 20px; }
}

/* Keep iOS from auto-zooming the page when a field receives focus. */
@media (max-width: 639px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ===================================================== TIMELINE v64 LEGACY BASE
   Portrait-first sliding schedule. Today opens at the left edge; task
   information sits under the schedule bar and is never limited by bar width. */
.timeline-tools {
  flex: 0 0 auto;
  padding: 2px 14px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
  z-index: 8;
}
.tl-filter-row {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}
.tl-filter-row + .tl-filter-row { margin-top: 9px; }
.tl-filter-spacer { flex: 1; }
.tl-filter-row .pick-roll { flex: 0 0 auto; }
.tl-filter-row .roll-trigger { min-width: 118px; }
.tl-filter-row.secondary { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto; }
.tl-filter-select {
  min-width: 0;
  width: 100%; height: 38px;
  padding: 0 30px 0 12px;
  border: 0; border-radius: 999px;
  background: var(--option-panel);
  color: var(--ink-2);
  font-size: 12px; font-weight: 650;
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 15px) 16px, calc(100% - 10px) 16px;
  background-size: 5px 5px; background-repeat: no-repeat;
  white-space: nowrap; text-overflow: ellipsis;
}
.tl-filter-select:disabled { opacity: .45; }
.tl-today-chip { height: 38px; padding: 0 14px; }

.tl-gantt { background: var(--bg); }
.tl-scroll {
  position: relative;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tl-scroll::-webkit-scrollbar { display: none; }
.tl-inner {
  min-width: max-content;
  position: relative;
  padding-bottom: 54px;
  background: var(--bg);
}

.tl-ruler {
  position: sticky; top: 0; z-index: 7;
  height: 58px;
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
}
.tl-day {
  position: absolute; inset-block: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-right: 1px solid color-mix(in srgb, var(--divider) 58%, transparent);
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.tl-day.sunday { background: color-mix(in srgb, var(--coral-soft) 34%, transparent); }
.tl-day.holiday::after {
  content: ''; position: absolute; bottom: 4px;
  width: 4px; height: 4px; border-radius: 50%; background: var(--gold);
}
.tl-day.today {
  color: var(--accent);
  background: color-mix(in srgb, var(--accent-soft) 54%, transparent);
}
.tl-weekday { font-size: 9px; line-height: 1; font-weight: 750; letter-spacing: .08em; }
.tl-date { font-size: 17px; line-height: 1.15; margin-top: 5px; }
.tl-month { position: absolute; top: 3px; left: 4px; font-size: 8px; font-weight: 700; text-transform: uppercase; }
.tl-today-line {
  position: absolute; top: 58px; bottom: 0; z-index: 5;
  width: 2px; background: var(--accent); opacity: .62; pointer-events: none;
}

.tl-project {
  position: relative;
  height: 38px;
  border-bottom: 1px solid color-mix(in srgb, var(--divider) 65%, transparent);
}
.tl-project.interior { background: color-mix(in srgb, var(--band-int) 16%, var(--bg)); }
.tl-project.landscape { background: color-mix(in srgb, var(--band-lan) 16%, var(--bg)); }
.tl-project-sticky {
  position: sticky; left: 0; z-index: 6;
  width: min(100vw, 430px); height: 100%;
  display: flex; align-items: center; gap: 9px;
  padding: 0 15px;
  background: inherit;
  white-space: nowrap; overflow: hidden;
}
.tl-project-sticky strong {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
  font-size: 13px; font-weight: 730;
}
.tl-project-sticky span { flex: 0 0 auto; color: var(--ink-3); font-size: 10px; }

.tl-task {
  position: relative;
  height: 72px;
  border-bottom: 1px solid color-mix(in srgb, var(--divider) 65%, transparent);
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 calc(var(--tl-day) - 1px),
    color-mix(in srgb, var(--divider) 42%, transparent) calc(var(--tl-day) - 1px) var(--tl-day)
  );
}
.tl-bar {
  position: absolute; top: 10px; height: 22px;
  border: 0; border-radius: 999px; overflow: hidden;
  padding: 0; cursor: pointer;
  background: var(--surface-2); color: white;
}
.tl-bar-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; }
.tl-bar-pct {
  position: absolute; inset: 0 6px 0 auto; z-index: 2;
  display: flex; align-items: center;
  color: #fff; font-size: 10px; font-weight: 800;
  text-shadow: 0 1px 2px rgba(0,0,0,.28);
}
.tl-bar.s-notstarted { background: var(--st-not-s); box-shadow: inset 0 0 0 1px var(--line); }
.tl-bar.s-notstarted .tl-bar-fill { background: var(--st-not); opacity: .55; }
.tl-bar.s-inprogress { background: var(--accent-soft); }
.tl-bar.s-inprogress .tl-bar-fill { background: var(--accent); }
.tl-bar.s-onhold { background: var(--st-hold-s); }
.tl-bar.s-onhold .tl-bar-fill { background: var(--st-hold-bar); }
.tl-bar.s-completed { background: var(--green-soft); }
.tl-bar.s-completed .tl-bar-fill { background: var(--green); }
.tl-bar.s-canceled { background: var(--surface-2); opacity: .55; }
.tl-bar.overdue { background: var(--overdue-s); }
.tl-bar.overdue .tl-bar-fill { background: var(--overdue); }
.tl-bar:active { filter: brightness(.9); }

.tl-task-info {
  position: absolute; top: 36px; height: 29px;
  padding: 0 2px;
  border: 0; background: transparent;
  color: var(--ink-2); text-align: left;
  font-size: 11.5px; line-height: 29px; font-weight: 570;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}

/* Read-first timeline detail sheet. */
.timeline-detail-sheet { padding-bottom: max(22px, env(safe-area-inset-bottom)); }
.tl-detail-title { display: flex; align-items: baseline; gap: 7px; min-width: 0; margin: 2px 0 1px; }
.tl-detail-title h2 { min-width: 0; margin: 0; font-size: 21px; line-height: 1.2; overflow-wrap: anywhere; }
.tl-detail-area { color: var(--accent); font-size: 17px; font-weight: 750; }
.tl-detail-sep { color: var(--ink-3); }
.tl-detail-project { color: var(--ink-3); font-size: 12px; margin-bottom: 14px; }
.tl-detail-status {
  display: inline-flex; align-items: center; min-height: 32px;
  padding: 0 13px; margin-bottom: 18px;
  border-radius: 999px; background: var(--surface-2);
  font-size: 12px; font-weight: 750;
}
.tl-detail-status.s-inprogress { background: var(--accent-soft); color: var(--accent); }
.tl-detail-status.s-onhold { background: var(--st-hold-s); color: var(--ink-2); }
.tl-detail-status.s-completed { background: var(--green-soft); color: var(--green); }
.tl-detail-status.overdue { background: var(--overdue-s); color: var(--overdue); }
.tl-detail-facts { display: grid; gap: 10px; margin-bottom: 21px; }
.tl-detail-fact { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); font-size: 13px; }
.tl-detail-fact svg { width: 17px; height: 17px; flex: 0 0 auto; margin-top: 1px; color: var(--ink-3); }
.tl-detail-section { padding-top: 18px; margin-top: 4px; border-top: 1px solid var(--divider); }
.tl-detail-section-head { display: flex; align-items: baseline; justify-content: space-between; }
.tl-detail-progress-number { color: var(--accent); font-size: 22px; font-weight: 760; }
.tl-detail-progress { height: 8px; border-radius: 999px; background: var(--surface-2); overflow: hidden; margin-top: 10px; }
.tl-detail-progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.tl-detail-label { display: block; margin-bottom: 9px; font-size: 12px; }
.tl-detail-remarks { margin: 0; color: var(--ink-2); font-size: 13px; line-height: 1.55; }
.tl-media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tl-media-tile {
  min-width: 0; min-height: 58px;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 10px; border: 0; border-radius: 12px;
  background: var(--option-panel); color: var(--ink-2); text-align: left;
}
.tl-media-tile svg { width: 20px; height: 20px; flex: 0 0 auto; }
.tl-media-tile span { min-width: 0; display: flex; flex-direction: column; }
.tl-media-tile strong { font-size: 11px; }
.tl-media-tile small { color: var(--ink-3); font-size: 10px; }
.tl-media-note { margin: 8px 0 0; color: var(--ink-3); font-size: 10.5px; }
.tl-detail-actions { margin-top: 28px; }

@media (max-width: 380px) {
  .timeline-tools { padding-inline: 10px; }
  .tl-filter-row { gap: 6px; }
  .tl-filter-row .roll-trigger { min-width: 105px; }
  .tl-filter-select { font-size: 11px; padding-left: 10px; }
  .tl-today-chip { padding-inline: 11px; }
}


/* ===================================================== TIMELINE v64
   Same Mine / All / All Status control strip as Tasks. Today is centred;
   chronological mode removes Project header rows and identifies projects
   directly in each task line. */
#timelineScopeBar {
  flex: 0 0 auto;
}

/* Timeline-only functions live inside All Status. */
.roll-timeline-tools {
  padding: 1px 0 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--divider);
}
.roll-timeline-label {
  display: block;
  padding: 4px 10px 7px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.roll-timeline-controls {
  display: grid;
  grid-template-columns: .82fr 1fr 1fr;
  gap: 6px;
}
.roll-timeline-control {
  min-height: 38px;
  padding: 7px 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(29,24,21,.045);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 650;
  white-space: nowrap;
  cursor: pointer;
}
.roll-timeline-control.on {
  background: #E0DCD6;
  color: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
  .roll-timeline-control:hover { background: rgba(29,24,21,.075); }
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .roll-timeline-control {
    background: rgba(255,255,255,.055);
  }
  :root:not([data-theme="light"]) .roll-timeline-control.on {
    background: #332F2B;
  }
}
:root[data-theme="dark"] .roll-timeline-control {
  background: rgba(255,255,255,.055);
}
:root[data-theme="dark"] .roll-timeline-control.on {
  background: #332F2B;
}

/* Today is a cyan navigation reference, distinct from status colours. */
.tl-day.today {
  color: var(--today-cyan);
  background: color-mix(in srgb, var(--today-cyan) 11%, transparent);
}
.tl-today-line {
  width: 2px;
  background: var(--today-cyan);
  opacity: .88;
}

/* More readable short copy under each schedule bar. */
.tl-task {
  height: 76px;
}
.tl-task-info {
  top: 36px;
  height: 33px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 2px;
  color: var(--ink-2);
  font-size: 13.2px;
  line-height: 1.15;
  font-weight: 610;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
}
.tl-info-project {
  flex: 0 1 108px;
  min-width: 30px;
  max-width: 108px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--project-tag);
  font-weight: 780;
}
.tl-info-project::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  margin: 0 5px 1px 0;
  border-radius: 50%;
  background: var(--project-tag);
}
.tl-info-task {
  flex: 0 1 auto;
  min-width: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tl-info-days {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-size: 12.2px;
  font-weight: 680;
}
.tl-info-overdue {
  flex: 0 0 auto;
  color: var(--overdue);
  font-size: 12.2px;
  font-weight: 780;
}

/* Percentage stays legible on both filled and light unfilled bar surfaces. */
.tl-bar-pct {
  inset: 0;
  justify-content: center;
  color: #fff;
  font-size: 10px;
  font-weight: 820;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.tl-bar-pct.dark {
  color: var(--ink);
  text-shadow: none;
}

@media (max-width: 380px) {
  .tl-task-info { font-size: 12.7px; }
  .tl-info-project { max-width: 92px; }
  .roll-timeline-control { font-size: 11px; padding-inline: 7px; }
}

/* ===================================================== TIMELINE v65
   Calm mobile Gantt: horizontal movement never drives vertical scrolling.
   Project identity is fully readable in chronological view, progress labels
   use a fixed inset, and the visual hierarchy is cleaner on portrait screens. */
.tl-scroll {
  overflow-anchor: none;
  scroll-behavior: auto;
  background: var(--bg);
}
.tl-inner { overflow-anchor: none; }

/* Cleaner, slightly more compact date ruler. */
.tl-ruler {
  height: 60px;
  background: color-mix(in srgb, var(--bg) 94%, var(--surface-2));
  border-bottom-color: color-mix(in srgb, var(--divider) 82%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--divider) 24%, transparent);
}
.tl-day {
  border-right-color: color-mix(in srgb, var(--divider) 42%, transparent);
}
.tl-weekday {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .055em;
}
.tl-date {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 680;
}
.tl-month {
  top: 4px;
  left: 5px;
  font-size: 8px;
  letter-spacing: .04em;
}
.tl-day.today {
  background: color-mix(in srgb, var(--today-cyan) 9%, transparent);
  color: var(--today-cyan);
}
.tl-today-line {
  top: 60px;
  width: 2px;
  opacity: .92;
  box-shadow: none;
}
.tl-today-line::before {
  content: '';
  position: absolute;
  top: -4px;
  left: 50%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--today-cyan);
  transform: translateX(-50%);
}

/* Project group rows are quiet separators, not dominant blocks. */
.tl-project {
  height: 35px;
  border-bottom-color: color-mix(in srgb, var(--divider) 54%, transparent);
}
.tl-project-sticky {
  width: min(100vw, 440px);
  gap: 8px;
  padding-inline: 14px;
}
.tl-project-sticky strong {
  font-size: 12.5px;
  font-weight: 690;
}
.tl-project-sticky span {
  font-size: 9.5px;
}

/* More breathing room without becoming card-heavy. */
.tl-task {
  height: 90px;
  border-bottom-color: color-mix(in srgb, var(--divider) 48%, transparent);
  background-color: color-mix(in srgb, var(--bg) 97%, var(--surface-2));
  background-image: repeating-linear-gradient(
    to right,
    transparent 0 calc(var(--tl-day) - 1px),
    color-mix(in srgb, var(--divider) 30%, transparent) calc(var(--tl-day) - 1px) var(--tl-day)
  );
}

.tl-bar {
  top: 11px;
  height: 25px;
  min-width: 39px;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
}
.tl-bar:active { filter: brightness(.96); }

/* The percentage is always in the same place relative to the bar start. */
.tl-bar-pct {
  inset: 0 auto 0 8px;
  justify-content: flex-start;
  min-width: 25px;
  color: #fff;
  font-size: 9.7px;
  font-weight: 800;
  letter-spacing: -.01em;
  text-shadow: 0 1px 1px rgba(0,0,0,.22);
  pointer-events: none;
}
.tl-bar-pct.dark {
  color: var(--ink);
  text-shadow: none;
}

/* Task copy behaves like a readable annotation beneath the bar. */
.tl-task-info {
  top: 41px;
  width: min(410px, calc(100vw - 22px));
  height: 43px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 3px;
  padding: 3px 7px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  color: var(--ink-2);
  font-size: 13.5px;
  line-height: 1.15;
  font-weight: 590;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  backdrop-filter: blur(1.5px);
  -webkit-backdrop-filter: blur(1.5px);
}
.tl-task-info.compact {
  height: 38px;
  justify-content: center;
}
.tl-info-project {
  flex: 0 0 auto;
  display: block;
  width: 100%;
  max-width: none;
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  color: var(--project-tag);
  font-size: 11.7px;
  line-height: 1.12;
  font-weight: 760;
}
.tl-info-project::before {
  width: 6px;
  height: 6px;
  margin-right: 6px;
}
.tl-info-main {
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: baseline;
  gap: 6px;
  white-space: nowrap;
}
.tl-info-task {
  flex: 0 1 auto;
  min-width: 36px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 13.5px;
  font-weight: 610;
}
.tl-info-days {
  font-size: 12px;
  font-weight: 700;
}
.tl-info-overdue {
  font-size: 12px;
  font-weight: 790;
}

/* The top controls and ruler form one visually coherent Timeline header. */
#timelineScopeBar {
  padding-bottom: 11px;
  background: var(--bg);
  border-bottom: 0;
}
#vwTimeline .gantt {
  border-top: 1px solid color-mix(in srgb, var(--divider) 58%, transparent);
}

@media (max-width: 380px) {
  .tl-task { height: 88px; }
  .tl-task-info {
    width: calc(100vw - 18px);
    font-size: 13px;
    padding-inline: 6px;
  }
  .tl-info-task { font-size: 13px; }
  .tl-info-project { font-size: 11.4px; }
}


/* ===================================================== TIMELINE v66
   Cleaner portrait board: dark date ruler, light schedule canvas, no grid,
   live month in the control strip, tighter task rhythm and end-anchored %. */
:root {
  --timeline-board: #F7F6F3;
  --timeline-ruler: #625D57;
  --timeline-ruler-ink: #F7F3ED;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --timeline-board: #171513;
    --timeline-ruler: #34302C;
    --timeline-ruler-ink: #F5F1EB;
  }
}
:root[data-theme="dark"] {
  --timeline-board: #171513;
  --timeline-ruler: #34302C;
  --timeline-ruler-ink: #F5F1EB;
}

/* Same control positions, with the visible month centred independently. */
#timelineScopeBar {
  position: relative;
  min-height: 45px;
  padding-top: 4px;
  padding-bottom: 10px;
}
#timelineScopeBar .tl-current-month {
  position: absolute;
  left: 50%;
  top: 10px;
  transform: translateX(-50%);
  z-index: 1;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-2);
  font-size: 13px;
  line-height: 30px;
  font-weight: 690;
  letter-spacing: .01em;
  pointer-events: none;
}
#scopeBar .segment,
#timelineScopeBar .segment {
  position: relative;
  z-index: 2;
  padding: 2px;
  background: transparent;
}
#scopeBar .segment .seg,
#timelineScopeBar .segment .seg {
  height: 31px;
  padding-inline: 14px;
  background: var(--bg);
  color: var(--ink-2);
}
#scopeBar .segment .seg.on,
#timelineScopeBar .segment .seg.on {
  background: #FFFFFF;
  color: var(--ink);
}
#scopeBar .roll-select.pick-roll,
#timelineScopeBar .roll-select.pick-roll {
  position: relative;
  z-index: 2;
}
#scopeBar .roll-select.pick-roll .roll-trigger,
#timelineScopeBar .roll-select.pick-roll .roll-trigger {
  height: 35px;
  border-color: transparent;
  background: #FFFFFF;
  color: var(--ink-2);
  box-shadow: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #scopeBar .segment .seg,
  :root:not([data-theme="light"]) #timelineScopeBar .segment .seg { background: var(--bg); }
  :root:not([data-theme="light"]) #scopeBar .segment .seg.on,
  :root:not([data-theme="light"]) #timelineScopeBar .segment .seg.on,
  :root:not([data-theme="light"]) #scopeBar .roll-select.pick-roll .roll-trigger,
  :root:not([data-theme="light"]) #timelineScopeBar .roll-select.pick-roll .roll-trigger {
    background: var(--surface);
    color: var(--ink);
  }
}
:root[data-theme="dark"] #scopeBar .segment .seg,
:root[data-theme="dark"] #timelineScopeBar .segment .seg { background: var(--bg); }
:root[data-theme="dark"] #scopeBar .segment .seg.on,
:root[data-theme="dark"] #timelineScopeBar .segment .seg.on,
:root[data-theme="dark"] #scopeBar .roll-select.pick-roll .roll-trigger,
:root[data-theme="dark"] #timelineScopeBar .roll-select.pick-roll .roll-trigger {
  background: var(--surface);
  color: var(--ink);
}

/* Light schedule board with no spreadsheet grid. */
.tl-gantt,
.tl-scroll,
.tl-inner,
.tl-task {
  background: var(--timeline-board);
}
#vwTimeline .gantt { border-top: 0; }
.tl-task {
  height: 78px;
  border-bottom: 0;
  background-image: none;
}

/* Dark calendar strip with light copy. Days are separated by spacing/typography,
   not grid lines. */
.tl-ruler {
  height: 59px;
  background: var(--timeline-ruler);
  border-bottom: 0;
  box-shadow: none;
}
.tl-day {
  border-right: 0;
  color: color-mix(in srgb, var(--timeline-ruler-ink) 78%, transparent);
}
.tl-weekday { color: inherit; }
.tl-date {
  color: var(--timeline-ruler-ink);
  font-weight: 720;
}
.tl-month { display: none; }
.tl-day.sunday {
  background: rgba(255,255,255,.055);
}
.tl-day.holiday::after {
  background: #E7C779;
}
.tl-day.today {
  color: var(--today-cyan);
  background: color-mix(in srgb, var(--today-cyan) 12%, transparent);
}
.tl-day.today .tl-date { color: var(--today-cyan); }
.tl-today-line {
  top: 59px;
  background: var(--today-cyan);
  opacity: .96;
}

/* Bring bar + annotation into one compact task unit. */
.tl-bar {
  top: 8px;
  height: 24px;
  min-width: 39px;
  box-shadow: none;
}
.tl-task-info {
  top: 32px;
  width: min(410px, calc(100vw - 20px));
  height: 40px;
  gap: 1px;
  padding: 2px 5px;
  border-radius: 7px;
  background: color-mix(in srgb, var(--timeline-board) 94%, transparent);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tl-task-info.compact {
  height: 34px;
  top: 32px;
}
.tl-info-project {
  font-size: 11.5px;
  line-height: 1.08;
}
.tl-info-main { gap: 5px; }
.tl-info-task { font-size: 13.3px; }
.tl-info-days,
.tl-info-overdue { font-size: 11.8px; }

/* Progress % always sits at the planned finish end of the task span. */
.tl-bar-pct {
  inset: 0 5px 0 auto;
  min-width: 0;
  justify-content: flex-end;
  font-size: 9.5px;
  letter-spacing: -.015em;
}

/* Project rows retain identity but sit on the lighter timeline canvas. */
.tl-project { border-bottom: 0; }
.tl-project.interior { background: color-mix(in srgb, var(--band-int) 13%, var(--timeline-board)); }
.tl-project.landscape { background: color-mix(in srgb, var(--band-lan) 13%, var(--timeline-board)); }

/* Slightly more air above footer icons without making the footer bulky. */
.tab { padding-top: 11px; }

@media (max-width: 350px) {
  #timelineScopeBar .tl-current-month { font-size: 12px; max-width: 76px; }
  #timelineScopeBar .segment .seg { padding-inline: 11px; }
  #timelineScopeBar .roll-select.pick-roll .roll-trigger { padding-inline: 12px; }
}


/* =====================================================================
   v67 — Timeline density + chronological ordering refinement.
   ===================================================================== */
:root {
  /* About a 10% neutral-grey schedule canvas. */
  --timeline-board: #E8E8E6;
}

/* Inactive Mine / All controls sit one step darker than the app ground. */
#scopeBar .segment .seg:not(.on),
#timelineScopeBar .segment .seg:not(.on) {
  background: color-mix(in srgb, var(--bg) 82%, #000 18%);
  color: var(--ink);
}

/* Slightly smaller calendar day number for a calmer ruler. */
.tl-date { font-size: 15.5px; }

/* The progress label is positioned in JS at the end of the last counted
   working day represented by the current progress. */
.tl-bar-pct {
  right: auto;
  justify-content: flex-end;
  white-space: nowrap;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --timeline-board: #171513;
  }
  :root:not([data-theme="light"]) #scopeBar .segment .seg:not(.on),
  :root:not([data-theme="light"]) #timelineScopeBar .segment .seg:not(.on) {
    background: color-mix(in srgb, var(--bg) 74%, #000 26%);
    color: var(--ink-2);
  }
}
:root[data-theme="dark"] {
  --timeline-board: #171513;
}
:root[data-theme="dark"] #scopeBar .segment .seg:not(.on),
:root[data-theme="dark"] #timelineScopeBar .segment .seg:not(.on) {
  background: color-mix(in srgb, var(--bg) 74%, #000 26%);
  color: var(--ink-2);
}

/* =====================================================================
   v69 — Header + scope switch refinement.
   ===================================================================== */

/* Slightly stronger A2+ DESIGN presence in the signed-in app header. */
.mast .wordmark { font-size: 14.5px; }

/* Mine / All behaves as one two-position switch, not two loose pills. */
#scopeBar .segment,
#timelineScopeBar .segment {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 112px;
  height: 35px;
  padding: 2px;
  gap: 0;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 76%, #000 24%);
}
#scopeBar .segment::before,
#timelineScopeBar .segment::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: #FFFFFF;
  transform: translateX(0);
  transition: transform .18s cubic-bezier(.2,.75,.25,1);
  pointer-events: none;
}
#scopeBar .segment:has(.seg[data-scope="all"].on)::before,
#timelineScopeBar .segment:has(.seg[data-scope="all"].on)::before {
  transform: translateX(100%);
}
#scopeBar .segment .seg,
#timelineScopeBar .segment .seg,
#scopeBar .segment .seg:not(.on),
#timelineScopeBar .segment .seg:not(.on),
#scopeBar .segment .seg.on,
#timelineScopeBar .segment .seg.on {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 31px;
  padding: 0 8px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 78%, transparent);
  font-size: 13px;
  font-weight: 650;
}
#scopeBar .segment .seg.on,
#timelineScopeBar .segment .seg.on {
  color: var(--ink);
}

/* The control strip between masthead and calendar is intentionally a
   separate, slightly darker surface. */
#timelineScopeBar {
  background: color-mix(in srgb, var(--bg) 84%, #000 16%);
}
#timelineScopeBar .tl-current-month {
  color: var(--ink);
}
#timelineScopeBar .roll-select.pick-roll .roll-trigger {
  background: #FFFFFF;
  color: var(--ink-2);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #scopeBar .segment,
  :root:not([data-theme="light"]) #timelineScopeBar .segment {
    background: color-mix(in srgb, var(--bg) 58%, #000 42%);
  }
  :root:not([data-theme="light"]) #scopeBar .segment::before,
  :root:not([data-theme="light"]) #timelineScopeBar .segment::before {
    background: var(--surface);
  }
  :root:not([data-theme="light"]) #timelineScopeBar {
    background: color-mix(in srgb, var(--bg) 82%, #000 18%);
  }
  :root:not([data-theme="light"]) #timelineScopeBar .roll-select.pick-roll .roll-trigger {
    background: var(--surface);
    color: var(--ink);
  }
}
:root[data-theme="dark"] #scopeBar .segment,
:root[data-theme="dark"] #timelineScopeBar .segment {
  background: color-mix(in srgb, var(--bg) 58%, #000 42%);
}
:root[data-theme="dark"] #scopeBar .segment::before,
:root[data-theme="dark"] #timelineScopeBar .segment::before {
  background: var(--surface);
}
:root[data-theme="dark"] #timelineScopeBar {
  background: color-mix(in srgb, var(--bg) 82%, #000 18%);
}
:root[data-theme="dark"] #timelineScopeBar .roll-select.pick-roll .roll-trigger {
  background: var(--surface);
  color: var(--ink);
}

/* =====================================================================
   v70 — Masthead alignment + balanced Timeline control strip.
   ===================================================================== */

/* Header title matches the A2+ DESIGN wordmark visually and shares its
   horizontal centre line. */
.mast .wordmark,
.mast-title {
  font-size: 14.5px;
  line-height: 1;
}
.mast-title {
  letter-spacing: .085em;
}

/* Slightly lighter than v69, but still clearly distinct from the app ground.
   Three real columns eliminate the hollow-looking centre gap. */
#timelineScopeBar {
  display: grid;
  grid-template-columns: 112px minmax(74px, 1fr) minmax(112px, auto);
  align-items: center;
  column-gap: 8px;
  min-height: 49px;
  padding: 6px 14px 8px;
  background: color-mix(in srgb, var(--bg) 90%, #000 10%);
}
#timelineScopeBar .segment {
  grid-column: 1;
  align-self: center;
}
#timelineScopeBar .tl-current-month {
  position: static;
  grid-column: 2;
  transform: none;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 100%;
  max-width: none;
  height: 35px;
  padding: 0 8px;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, #FFFFFF 28%, transparent);
  color: var(--ink);
  font-size: 13px;
  line-height: 1;
  font-weight: 680;
  letter-spacing: .005em;
  text-overflow: ellipsis;
  white-space: nowrap;
  pointer-events: none;
}
#timelineScopeBar .seg-spacer { display: none; }
#timelineScopeBar .roll-select.pick-roll {
  grid-column: 3;
  justify-self: stretch;
  width: 100%;
  max-width: none;
  align-self: center;
}
#timelineScopeBar .roll-select.pick-roll .roll-trigger {
  width: 100%;
  min-width: 0;
  height: 35px;
  justify-content: space-between;
}

@media (max-width: 360px) {
  #timelineScopeBar {
    grid-template-columns: 106px minmax(62px, 1fr) minmax(104px, auto);
    column-gap: 6px;
    padding-inline: 10px;
  }
  #timelineScopeBar .tl-current-month {
    padding-inline: 5px;
    font-size: 12.3px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #timelineScopeBar {
    background: color-mix(in srgb, var(--bg) 88%, #000 12%);
  }
  :root:not([data-theme="light"]) #timelineScopeBar .tl-current-month {
    background: color-mix(in srgb, var(--surface) 72%, transparent);
    color: var(--ink);
  }
}
:root[data-theme="dark"] #timelineScopeBar {
  background: color-mix(in srgb, var(--bg) 88%, #000 12%);
}
:root[data-theme="dark"] #timelineScopeBar .tl-current-month {
  background: color-mix(in srgb, var(--surface) 72%, transparent);
  color: var(--ink);
}


/* =====================================================================
   v71 — Timeline touch + calendar + working-day progress refinement.
   ===================================================================== */

/* Slightly more vertical breathing room around the Timeline controls. */
#timelineScopeBar {
  min-height: 58px;
  padding-top: 10px;
  padding-bottom: 12px;
}

/* The calendar ruler is a horizontal timeline control, not a vertical drag
   surface. Vertical scrolling remains available from the schedule canvas. */
.tl-ruler,
.tl-ruler * {
  touch-action: pan-x;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.tl-ruler { overscroll-behavior-y: none; }

/* Sunday = a very light magenta overlay (5%) on both ruler and task canvas. */
.tl-day.sunday {
  background: rgba(190, 20, 105, .05);
}
.tl-task {
  background-color: var(--timeline-board);
  background-image: linear-gradient(
    to right,
    rgba(190, 20, 105, .05) 0 var(--tl-day),
    transparent var(--tl-day) 100%
  );
  background-size: var(--tl-week-width) 100%;
  background-position: var(--tl-sunday-start) 0;
  background-repeat: repeat-x;
}

/* Project identity: Interior stays warm; Landscape stays cool. */
.tl-project.interior .tl-project-sticky strong { color: #744D3F; }
.tl-project.landscape .tl-project-sticky strong { color: #3F6F78; }

/* Progress text ends exactly where the counted-working-day fill ends. */
.tl-bar-pct {
  right: auto;
  justify-content: flex-end;
  min-width: max-content;
  padding-inline: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tl-project.interior .tl-project-sticky strong { color: #D5A995; }
  :root:not([data-theme="light"]) .tl-project.landscape .tl-project-sticky strong { color: #9FC8D0; }
}
:root[data-theme="dark"] .tl-project.interior .tl-project-sticky strong { color: #D5A995; }
:root[data-theme="dark"] .tl-project.landscape .tl-project-sticky strong { color: #9FC8D0; }


/* =====================================================================
   v72 — Timeline compact ruler + calendar semantics + date-order polish.
   ===================================================================== */
:root {
  /* A quiet, only-slightly-grey planning canvas. */
  --timeline-board: #F1F0EE;
}

/* Slightly smaller / tighter control strip and calendar ruler. */
#timelineScopeBar {
  min-height: 52px;
  padding-top: 7px;
  padding-bottom: 8px;
}
#timelineScopeBar .segment,
#timelineScopeBar .tl-current-month,
#timelineScopeBar .roll-select.pick-roll .roll-trigger {
  height: 33px;
}
#timelineScopeBar .segment .seg { height: 29px; }

.tl-ruler { height: 54px; }
.tl-weekday { font-size: 8.8px; }
.tl-date {
  margin-top: 3px;
  font-size: 14.5px;
}
.tl-today-line { top: 54px; }

/* No Sunday canvas tint. Sunday is conveyed by calendar text only. */
.tl-task {
  background-color: var(--timeline-board);
  background-image: none;
}
.tl-scroll,
.tl-inner { background: var(--timeline-board); }
.tl-day.sunday {
  background: transparent;
  color: #D96A98;
}
.tl-day.sunday .tl-weekday,
.tl-day.sunday .tl-date { color: #D96A98; }

/* Holidays use light purple calendar text; no dot indicator. */
.tl-day.holiday::after { display: none; content: none; }
.tl-day.holiday,
.tl-day.holiday .tl-weekday,
.tl-day.holiday .tl-date { color: #B39ADB; }

/* Today stays the strongest reference when it overlaps Sunday / holiday. */
.tl-day.today,
.tl-day.today .tl-weekday,
.tl-day.today .tl-date { color: var(--today-cyan); }
.tl-day.today {
  background: color-mix(in srgb, var(--today-cyan) 9%, transparent);
}

/* A small inset keeps % readable without sticking to the work-day edge. */
.tl-bar-pct {
  padding-inline: 0;
  white-space: nowrap;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --timeline-board: #171513; }
  :root:not([data-theme="light"]) .tl-day.sunday,
  :root:not([data-theme="light"]) .tl-day.sunday .tl-weekday,
  :root:not([data-theme="light"]) .tl-day.sunday .tl-date { color: #E58AAF; }
  :root:not([data-theme="light"]) .tl-day.holiday,
  :root:not([data-theme="light"]) .tl-day.holiday .tl-weekday,
  :root:not([data-theme="light"]) .tl-day.holiday .tl-date { color: #C8B5EE; }
}
:root[data-theme="dark"] { --timeline-board: #171513; }
:root[data-theme="dark"] .tl-day.sunday,
:root[data-theme="dark"] .tl-day.sunday .tl-weekday,
:root[data-theme="dark"] .tl-day.sunday .tl-date { color: #E58AAF; }
:root[data-theme="dark"] .tl-day.holiday,
:root[data-theme="dark"] .tl-day.holiday .tl-weekday,
:root[data-theme="dark"] .tl-day.holiday .tl-date { color: #C8B5EE; }


/* =====================================================================
   v73 — Timeline touch containment + strict date order + compact semantics.
   ===================================================================== */
:root {
  /* Slightly darker than v72 while remaining a quiet planning surface. */
  --timeline-board: #ECEAE7;
}

/* Sunday is typography only: light pink, no overlay. */
.tl-day.sunday,
.tl-day.sunday .tl-weekday,
.tl-day.sunday .tl-date {
  color: #E7A2BC;
  background: transparent;
}

/* The timeline remains normally scrollable, but its scroll boundary must not
   hand a downward drag to the browser/PWA shell as pull-to-refresh. */
#vwTimeline,
#vwTimeline .gantt,
.tl-scroll {
  overscroll-behavior-y: none;
  overscroll-behavior-x: contain;
}
.tl-scroll {
  touch-action: pan-x pan-y;
  -webkit-overflow-scrolling: touch;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --timeline-board: #171513; }
  :root:not([data-theme="light"]) .tl-day.sunday,
  :root:not([data-theme="light"]) .tl-day.sunday .tl-weekday,
  :root:not([data-theme="light"]) .tl-day.sunday .tl-date { color: #D895AF; }
}
:root[data-theme="dark"] { --timeline-board: #171513; }
:root[data-theme="dark"] .tl-day.sunday,
:root[data-theme="dark"] .tl-day.sunday .tl-weekday,
:root[data-theme="dark"] .tl-day.sunday .tl-date { color: #D895AF; }


/* =====================================================================
   v74 — Timeline as primary view + unified controls + month/project search.
   ===================================================================== */

/* Timeline controls occupy the same vertical level and rhythm as Tasks. */
#timelineScopeBar {
  min-height: 0;
  padding: 4px 14px 14px;
  align-items: center;
}
#timelineScopeBar .segment,
#timelineScopeBar .tl-current-month,
#timelineScopeBar .roll-select.pick-roll .roll-trigger {
  height: 35px;
  align-self: center;
}
#timelineScopeBar .segment .seg { height: 31px; }

/* The live month is now an actual control: tap to jump directly to a month. */
#timelineScopeBar .tl-current-month {
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 690;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
}
#timelineScopeBar .tl-current-month:active {
  background: color-mix(in srgb, #FFFFFF 18%, transparent);
}

/* Task annotation: AREA / TASK / DAY are separate readable units. */
.tl-info-main {
  gap: 9px;
}
.tl-info-area {
  flex: 0 0 auto;
  font-size: 11.7px;
  font-weight: 780;
  letter-spacing: .035em;
  color: var(--ink-2);
}
.tl-info-sep {
  flex: 0 0 auto;
  color: var(--ink-3);
  margin-inline: -2px;
}
.tl-info-task {
  flex: 0 1 auto;
}
.tl-info-days {
  flex: 0 0 auto;
  margin-left: 2px;
}

/* Project names in By Date remain fully readable rather than truncating. */
.tl-task-info.with-project {
  height: auto;
  min-height: 42px;
  max-height: none;
}
.tl-info-project {
  overflow: visible;
  white-space: normal;
  text-overflow: clip;
}

/* Month jump sheet. */
.timeline-month-sheet h2 { margin-bottom: 18px; }
.timeline-month-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  max-height: min(56dvh, 440px);
  overflow-y: auto;
  padding: 2px 0 8px;
  overscroll-behavior: contain;
}
.timeline-month-option {
  min-height: 44px;
  padding: 9px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--option-panel);
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: center;
}
.timeline-month-option.on {
  background: var(--surface);
  color: var(--ink);
}

/* Project selection lives inside Filters > By Project, keeping the top bar lean. */
.roll-timeline-project-chooser {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  overflow: hidden;
  transition: grid-template-rows .18s ease, opacity .15s ease, margin-top .18s ease;
  margin-top: 0;
}
.roll-timeline-project-chooser.open {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: 9px;
}
.roll-timeline-project-chooser::before { content: ''; min-height: 0; }
.roll-timeline-project-option {
  width: 100%;
  min-height: 40px;
  margin-top: 3px;
  padding: 8px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 12.8px;
  font-weight: 610;
  text-align: left;
}
.roll-timeline-project-option.on {
  background: color-mix(in srgb, var(--ink) 8%, transparent);
  color: var(--ink);
  font-weight: 720;
}

@media (max-width: 360px) {
  #timelineScopeBar { padding-inline: 10px; }
  .tl-info-main { gap: 7px; }
  .tl-info-area { font-size: 11.2px; }
}

/* v74 correction: collapse/expand the project chooser as one compact list. */
.roll-timeline-project-chooser {
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height .20s ease, opacity .15s ease, margin-top .18s ease;
}
.roll-timeline-project-chooser.open {
  max-height: 280px;
  opacity: 1;
  overflow-y: auto;
  margin-top: 9px;
  overscroll-behavior: contain;
}
.roll-timeline-project-chooser::before { content: none; }

/* =====================================================================
   v77 — authoritative Timeline layout cleanup.
   Replaces the malformed v75 tail with one clean, shared layout for
   By Project and By Date.
   ===================================================================== */
:root {
  --timeline-board: #E6E3DE;
  --timeline-ruler: #625D57;
  --timeline-ruler-ink: #F7F3ED;
}

/* The surface itself is centred around the three controls. */
#timelineScopeBar {
  display: grid;
  grid-template-columns: 112px minmax(74px, 1fr) minmax(112px, auto);
  align-items: center;
  column-gap: 8px;
  min-height: 47px;
  padding: 6px 14px;
  background: color-mix(in srgb, var(--bg) 94%, #000 6%);
  border: 0;
}
#timelineScopeBar .segment,
#timelineScopeBar .tl-current-month,
#timelineScopeBar .roll-select.pick-roll,
#timelineScopeBar .roll-select.pick-roll .roll-trigger {
  align-self: center;
  margin-block: 0;
}
#timelineScopeBar .segment,
#timelineScopeBar .tl-current-month,
#timelineScopeBar .roll-select.pick-roll .roll-trigger {
  height: 35px;
}
#timelineScopeBar .segment .seg { height: 31px; }
#timelineScopeBar .tl-current-month {
  position: static;
  transform: none;
  width: 100%;
  max-width: none;
  display: grid;
  place-items: center;
  pointer-events: auto;
}
#timelineScopeBar .seg-spacer { display: none; }
#timelineScopeBar .roll-select.pick-roll {
  width: 100%;
}
#timelineScopeBar .roll-select.pick-roll .roll-trigger {
  width: 100%;
  min-width: 0;
}

#vwTimeline .gantt {
  margin-top: 0;
  border-top: 0;
}

/* One compact row rhythm in BOTH timeline modes. */
.tl-task {
  height: 64px;
  background: var(--timeline-board);
  background-image: none;
  border-bottom: 1px solid color-mix(in srgb, var(--divider) 35%, transparent);
}
.tl-bar {
  top: 6px;
  height: 21px;
  min-width: 36px;
  box-shadow: none;
}
.tl-task-info,
.tl-task-info.compact,
.tl-task-info.with-project {
  top: 27px;
  height: auto;
  min-height: 31px;
  max-height: 35px;
  padding: 1px 4px;
  gap: 1px;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.tl-task-info.with-project {
  min-height: 35px;
  max-height: 36px;
}
.tl-info-project {
  margin: 0 0 1px;
  line-height: 1.05;
}
.tl-info-main {
  gap: 5px;
  line-height: 1.08;
}
.tl-info-area {
  margin: 0;
  white-space: nowrap;
}
.tl-info-sep { display: none; }
.tl-info-task { margin-left: 0; }
.tl-info-days { margin-left: 3px; }

/* Project separators are compact too; they no longer make Project mode airy. */
.tl-project {
  height: 31px;
  border-bottom: 0;
}
.tl-project-sticky {
  padding-inline: 12px;
}
.tl-project-sticky strong {
  font-size: 12.2px;
}
.tl-project-sticky span {
  font-size: 9.3px;
}

/* Confirmed grey board with bars tuned for visible, calm contrast. */
.tl-gantt,
.tl-scroll,
.tl-inner {
  background: var(--timeline-board);
}
.tl-bar.s-notstarted {
  background: #CAC6BF;
  box-shadow: inset 0 0 0 1px #B8B3AA;
}
.tl-bar.s-notstarted .tl-bar-fill {
  background: #989187;
  opacity: .82;
}
.tl-bar.s-inprogress { background: #CFDDDA; }
.tl-bar.s-inprogress .tl-bar-fill { background: #43837F; }
.tl-bar.s-onhold { background: #D1CDC6; }
.tl-bar.s-onhold .tl-bar-fill { background: #8E877E; }
.tl-bar.s-completed { background: #D3DFD0; }
.tl-bar.s-completed .tl-bar-fill { background: #6E9366; }
.tl-bar.s-canceled { background: #D2CEC7; opacity: .78; }
.tl-bar.s-canceled .tl-bar-fill { background: #9E988F; }
.tl-bar.overdue { background: #E4D2C2; }
.tl-bar.overdue .tl-bar-fill { background: #B36C39; }

@media (max-width: 360px) {
  #timelineScopeBar {
    grid-template-columns: 106px minmax(62px, 1fr) minmax(104px, auto);
    column-gap: 6px;
    padding-inline: 10px;
  }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --timeline-board: #171513;
  }
}
:root[data-theme="dark"] {
  --timeline-board: #171513;
}

/* =====================================================================
   v78 — Timeline header alignment + brighter canvas harmony.
   Controls begin at the same vertical level as the Tasks page. The
   darker Timeline strip is centred tightly around the 35px controls,
   which also pulls the calendar upward without moving the masthead.
   ===================================================================== */
:root {
  --timeline-board: #ECEAE6;
}

#timelineScopeBar {
  /* Tasks .segbar begins 4px below the masthead; match that exact level. */
  min-height: 43px;
  padding: 4px 14px;
  align-items: center;
  background: color-mix(in srgb, var(--bg) 91%, #000 9%);
}
#timelineScopeBar .segment,
#timelineScopeBar .tl-current-month,
#timelineScopeBar .roll-select.pick-roll,
#timelineScopeBar .roll-select.pick-roll .roll-trigger {
  align-self: center;
  margin-block: 0;
}
#vwTimeline .gantt {
  margin-top: 0;
}

/* Brighter neutral canvas; bars gain a little chroma/contrast while
   remaining muted enough to feel native to the warm app palette. */
.tl-gantt,
.tl-scroll,
.tl-inner,
.tl-task {
  background: var(--timeline-board);
}
.tl-bar.s-notstarted {
  background: #D2CDC5;
  box-shadow: inset 0 0 0 1px #BBB4AA;
}
.tl-bar.s-notstarted .tl-bar-fill {
  background: #9F978C;
  opacity: .88;
}
.tl-bar.s-inprogress { background: #D4E3E0; }
.tl-bar.s-inprogress .tl-bar-fill { background: #4C8B86; }
.tl-bar.s-onhold { background: #D8D2CA; }
.tl-bar.s-onhold .tl-bar-fill { background: #90887E; }
.tl-bar.s-completed { background: #D8E3D5; }
.tl-bar.s-completed .tl-bar-fill { background: #73956A; }
.tl-bar.s-canceled { background: #D7D2CB; opacity: .84; }
.tl-bar.s-canceled .tl-bar-fill { background: #9B948A; }
.tl-bar.overdue { background: #E8D6C6; }
.tl-bar.overdue .tl-bar-fill { background: #B97140; }

@media (max-width: 360px) {
  #timelineScopeBar { padding: 4px 10px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --timeline-board: #171513; }
}
:root[data-theme="dark"] { --timeline-board: #171513; }


/* =====================================================================
   v79 — small Timeline spacing + canvas brightness refinement.
   ===================================================================== */
:root {
  --timeline-board: #F0EEEA;
}

#timelineScopeBar {
  min-height: 47px;
  padding: 6px 14px;
}

/* Maintain calm contrast against the slightly brighter board. */
.tl-bar.s-notstarted {
  background: #D0CAC1;
  box-shadow: inset 0 0 0 1px #B7AFA4;
}
.tl-bar.s-notstarted .tl-bar-fill { background: #968D82; opacity: .9; }
.tl-bar.s-inprogress { background: #CFDFDC; }
.tl-bar.s-inprogress .tl-bar-fill { background: #47847F; }
.tl-bar.s-onhold { background: #D5CEC5; }
.tl-bar.s-onhold .tl-bar-fill { background: #8B8278; }
.tl-bar.s-completed { background: #D3E0CF; }
.tl-bar.s-completed .tl-bar-fill { background: #6E9166; }
.tl-bar.s-canceled { background: #D4CEC6; opacity: .84; }
.tl-bar.s-canceled .tl-bar-fill { background: #958D83; }
.tl-bar.overdue { background: #E7D1BD; }
.tl-bar.overdue .tl-bar-fill { background: #B56D39; }

@media (max-width: 360px) {
  #timelineScopeBar { padding: 6px 10px; }
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --timeline-board: #171513; }
}
:root[data-theme="dark"] { --timeline-board: #171513; }

/* =====================================================================
   v80 — raised Timeline controls + compact Filters + month dropdown.
   ===================================================================== */

/* Preserve v79 breathing room, but lift the entire row (and therefore the
   calendar below it) slightly closer to the masthead. */
#timelineScopeBar {
  margin-top: -2px;
  grid-template-columns: 112px minmax(84px, 1fr) 92px;
}

/* Both custom dropdown wrappers occupy their intended grid columns. */
#timelineMonth + .roll-select.pick-roll,
#selFilter2 + .roll-select.pick-roll {
  width: 100%;
  max-width: none;
  align-self: center;
}

/* Month stays visually secondary and compact in the middle. */
#timelineMonth + .roll-select.pick-roll .roll-trigger {
  width: 100%;
  height: 35px;
  justify-content: center;
  gap: 7px;
  padding: 0 10px;
  border: 0;
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  color: var(--ink-2);
  font-size: 12.5px;
  font-weight: 650;
}
#timelineMonth + .roll-select.pick-roll .roll-trigger::after {
  width: 6px;
  height: 6px;
  flex-basis: 6px;
  opacity: .75;
}

/* This is a true compact month dropdown, not the tall Filters accordion. */
#timelineMonth + .roll-select.pick-roll .roll-menu {
  left: 50%;
  right: auto;
  margin-left: -100px;
  width: 200px;
  min-width: 200px;
  height: auto;
  max-height: min(52dvh, 320px);
  padding: 8px;
}
#timelineMonth + .roll-select.pick-roll .roll-option {
  min-height: 38px;
  padding: 7px 11px;
  font-size: 13px;
}

/* Filters no longer needs the wider third column. */
#selFilter2 + .roll-select.pick-roll {
  width: 92px;
  justify-self: end;
}
#selFilter2 + .roll-select.pick-roll .roll-trigger {
  width: 92px;
  padding-inline: 11px;
  justify-content: space-between;
}

@media (max-width: 360px) {
  #timelineScopeBar {
    grid-template-columns: 106px minmax(72px, 1fr) 86px;
  }
  #selFilter2 + .roll-select.pick-roll,
  #selFilter2 + .roll-select.pick-roll .roll-trigger {
    width: 86px;
  }
  #timelineMonth + .roll-select.pick-roll .roll-trigger {
    padding-inline: 7px;
    font-size: 12px;
  }
}

/* =====================================================================
   v81 — lock Timeline control order + plain month trigger.
   ===================================================================== */
#timelineScopeBar {
  grid-template-areas: "scope month filters";
  grid-template-columns: 112px minmax(84px, 1fr) 92px;
}
#tlScope {
  grid-area: scope;
  justify-self: start;
}
#timelineMonth + .roll-select.pick-roll {
  grid-area: month;
  justify-self: stretch;
}
#selFilter2 + .roll-select.pick-roll {
  grid-area: filters;
  justify-self: end;
}

/* Current month remains a dropdown, but the trigger itself has no chevron. */
#timelineMonth + .roll-select.pick-roll .roll-trigger {
  justify-content: center;
  padding-inline: 10px;
  gap: 0;
}
#timelineMonth + .roll-select.pick-roll .roll-trigger::after {
  display: none;
  content: none;
}

@media (max-width: 360px) {
  #timelineScopeBar {
    grid-template-columns: 106px minmax(72px, 1fr) 86px;
  }
}

/* =====================================================================
   v82 — Timeline control-row top clearance + tighter side inset.
   ===================================================================== */
#timelineScopeBar {
  /* v81 sat a little too high and visually cut into the masthead.
     Give the row more breathing room above while keeping the calendar tight. */
  margin-top: 1px;
  padding-left: 9px;
  padding-right: 9px;
}

@media (max-width: 360px) {
  #timelineScopeBar {
    padding-left: 7px;
    padding-right: 7px;
  }
}

/* =====================================================================
   v83 — shorter app header.
   ===================================================================== */
.masthead,
.app-header,
header.topbar {
  min-height: 48px;
}

.masthead {
  padding-top: 5px;
  padding-bottom: 5px;
}

.masthead .brand,
.masthead .mast-title,
.app-header .brand,
.app-header .mast-title {
  align-self: center;
}

/* =====================================================================
   v84 — full 100% bars + stronger dark-theme Not Started percentage
   + slightly wider Filters + Timeline dropdown surfaces.
   ===================================================================== */

/* Filters gets a little more breathing room without becoming dominant. */
#timelineScopeBar {
  grid-template-columns: 112px minmax(84px, 1fr) 100px;
}
#selFilter2 + .roll-select.pick-roll,
#selFilter2 + .roll-select.pick-roll .roll-trigger {
  width: 100px;
}

/* Timeline dropdown panels sit just brighter than the confirmed canvas. */
#timelineScopeBar .roll-menu {
  background: #F7F5F1;
}

/* Not Started uses a light bar even in dark mode, so its percentage should
   stay dark rather than inheriting the light dark-theme ink colour. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tl-bar.s-notstarted .tl-bar-pct,
  :root:not([data-theme="light"]) .tl-bar.s-notstarted .tl-bar-pct.dark {
    color: #2A2622;
    text-shadow: none;
  }
  :root:not([data-theme="light"]) #timelineScopeBar .roll-menu {
    background: #211E1B;
  }
}
:root[data-theme="dark"] .tl-bar.s-notstarted .tl-bar-pct,
:root[data-theme="dark"] .tl-bar.s-notstarted .tl-bar-pct.dark {
  color: #2A2622;
  text-shadow: none;
}
:root[data-theme="dark"] #timelineScopeBar .roll-menu {
  background: #211E1B;
}

@media (max-width: 360px) {
  #timelineScopeBar {
    grid-template-columns: 106px minmax(72px, 1fr) 94px;
  }
  #selFilter2 + .roll-select.pick-roll,
  #selFilter2 + .roll-select.pick-roll .roll-trigger {
    width: 94px;
  }
}

/* =====================================================================
   v85 — overdue extension, Filters inset, brighter dropdowns, Cancel grey.
   ===================================================================== */

/* Give the Filters label a little more room from its left edge. */
#selFilter2 + .roll-select.pick-roll .roll-trigger {
  padding-left: 17px;
  padding-right: 10px;
}

/* Dropdowns should read as a distinct surface, brighter than the canvas. */
#timelineScopeBar .roll-menu {
  background: #FFFDF9;
}
#timelineScopeBar .roll-option,
#timelineScopeBar .roll-group-toggle,
#timelineScopeBar .roll-timeline-control,
#timelineScopeBar .roll-timeline-project-option {
  background-color: transparent;
}

/* Active overdue work extends from the planned bar through Today.
   Its length is calendar-positioned, while the copy reports overdue WORKING days. */
.tl-bar {
  z-index: 2;
}
.tl-overdue-tail {
  position: absolute;
  top: 6px;
  height: 21px;
  z-index: 1;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #C77A43;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, #9F5C31 34%, transparent);
  cursor: pointer;
}
.tl-overdue-tail:active {
  filter: brightness(.94);
}

/* Cancel = neutral 70% grey treatment across the app.
   Keep it visually subordinate to active/completed work. */
.task.s-canceled .dot {
  background: rgba(105, 105, 105, .70);
}
.task.s-canceled .tag {
  background: rgba(150, 150, 150, .16);
  color: rgba(85, 85, 85, .78);
}
.task.s-canceled .prog i.w,
.bar.s-canceled .fill,
.tl-bar.s-canceled .tl-bar-fill {
  background: rgba(105, 105, 105, .70);
}
.bar.s-canceled,
.tl-bar.s-canceled {
  background: rgba(150, 150, 150, .22);
  opacity: 1;
}
.task.s-canceled .name {
  opacity: .70;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #timelineScopeBar .roll-menu {
    background: #302D29;
  }
  :root:not([data-theme="light"]) .tl-overdue-tail {
    background: #B97849;
  }
  :root:not([data-theme="light"]) .task.s-canceled .tag {
    background: rgba(180, 180, 180, .16);
    color: rgba(205, 205, 205, .70);
  }
  :root:not([data-theme="light"]) .bar.s-canceled,
  :root:not([data-theme="light"]) .tl-bar.s-canceled {
    background: rgba(175, 175, 175, .22);
  }
}
:root[data-theme="dark"] #timelineScopeBar .roll-menu {
  background: #302D29;
}
:root[data-theme="dark"] .tl-overdue-tail {
  background: #B97849;
}
:root[data-theme="dark"] .task.s-canceled .tag {
  background: rgba(180, 180, 180, .16);
  color: rgba(205, 205, 205, .70);
}
:root[data-theme="dark"] .bar.s-canceled,
:root[data-theme="dark"] .tl-bar.s-canceled {
  background: rgba(175, 175, 175, .22);
}

@media (max-width: 360px) {
  #selFilter2 + .roll-select.pick-roll .roll-trigger {
    padding-left: 15px;
    padding-right: 9px;
  }
}

/* =====================================================================
   v86 — seamless overdue capsule + restored dropdown highlight + On Hold.
   ===================================================================== */

/* Exact On Hold primary status colour. */
:root {
  --st-hold: #665857;
  --st-hold-bar: #665857;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --st-hold: #665857;
    --st-hold-bar: #665857;
  }
}
:root[data-theme="dark"] {
  --st-hold: #665857;
  --st-hold-bar: #665857;
}
.task.s-onhold .dot,
.prog i.h,
.bar.s-onhold .fill,
.tl-bar.s-onhold .tl-bar-fill {
  background: #665857;
  opacity: 1;
}
.task.s-onhold .tag,
.sw.hold.on {
  color: #665857;
  border-color: #665857;
}

/* One continuous overdue capsule: orange remainder through Today with the
   status-coloured progress fill layered above it. */
.tl-bar.overdue-active {
  background: var(--overdue);
  box-shadow: none;
}
.tl-bar.overdue-active .tl-bar-fill {
  border-radius: 999px;
}
.tl-overdue-tail { display: none !important; }

/* v85 accidentally overrode these selected rows back to transparent because
   the Timeline-specific selector had higher specificity. Restore the grey
   persistent selection highlight for month/filter/view/project choices. */
#timelineScopeBar .roll-option.on,
#timelineScopeBar .roll-timeline-control.on,
#timelineScopeBar .roll-timeline-project-option.on {
  background: #E3E0DB;
}
#timelineScopeBar .roll-option.on {
  color: var(--accent);
  font-weight: 650;
}
#timelineScopeBar .roll-timeline-control.on,
#timelineScopeBar .roll-timeline-project-option.on {
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #timelineScopeBar .roll-option.on,
  :root:not([data-theme="light"]) #timelineScopeBar .roll-timeline-control.on,
  :root:not([data-theme="light"]) #timelineScopeBar .roll-timeline-project-option.on {
    background: #45403B;
  }
}
:root[data-theme="dark"] #timelineScopeBar .roll-option.on,
:root[data-theme="dark"] #timelineScopeBar .roll-timeline-control.on,
:root[data-theme="dark"] #timelineScopeBar .roll-timeline-project-option.on {
  background: #45403B;
}

/* =====================================================================
   v87 — normal calendar direction + pinch zoom + exact status colours.
   ===================================================================== */
:root {
  --st-hold: #665857;
  --st-hold-bar: #665857;
  --overdue: #E39459;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --st-hold: #665857;
    --st-hold-bar: #665857;
    --overdue: #E39459;
  }
}
:root[data-theme="dark"] {
  --st-hold: #665857;
  --st-hold-bar: #665857;
  --overdue: #E39459;
}

/* Reinforce the exact primary colours in every Timeline/status surface. */
.task.s-onhold .dot,
.prog i.h,
.bar.s-onhold .fill,
.tl-bar.s-onhold .tl-bar-fill {
  background: #665857;
  opacity: 1;
}
.task.overdue .dot,
.bar.overdue .fill,
.tl-bar.overdue .tl-bar-fill,
.tl-bar.overdue-active {
  background: #E39459;
}
.task.overdue .tag,
.tl-info-overdue,
.tl-detail-status.overdue {
  color: #E39459;
}

/* One finger remains normal pan/scroll. Two-finger movement is intercepted
   by timeline.js and used to resize day columns instead of page zoom. */
#ganttScroll {
  touch-action: pan-x pan-y;
}

/* =====================================================================
   v88 — By Date diagonal chronology + lower By Project + menu readability.
   ===================================================================== */
:root {
  --st-hold: #8A7775;
  --st-hold-bar: #8A7775;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --st-hold: #8A7775;
    --st-hold-bar: #8A7775;
  }
}
:root[data-theme="dark"] {
  --st-hold: #8A7775;
  --st-hold-bar: #8A7775;
}

/* Exact On Hold colour everywhere that carries the primary status tone. */
.task.s-onhold .dot,
.prog i.h,
.bar.s-onhold .fill,
.tl-bar.s-onhold .tl-bar-fill {
  background: #8A7775;
  opacity: 1;
}

/* Log-out/menu identity block: readable at a glance. */
.menu-who {
  padding-top: 6px;
}
.menu-who strong {
  font-size: 19px;
  line-height: 1.25;
}
.menu-who span {
  font-size: 15px;
  line-height: 1.35;
}
.menu-who .menu-version {
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.3;
}

/* Quick Timeline controls are now only Today | By Date. */
.roll-timeline-controls.two {
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

/* Lower Project view section. */
.roll-timeline-project-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--divider);
}
.roll-timeline-project-main {
  width: 100%;
  min-height: 40px;
  padding: 8px 13px;
  border: 0;
  border-radius: 12px;
  background: rgba(29,24,21,.05);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.roll-timeline-project-main.on {
  background: #E0DCD6;
  color: var(--accent);
}
.roll-timeline-project-section .roll-timeline-project-chooser {
  margin-top: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .roll-timeline-project-main {
    background: rgba(255,255,255,.055);
  }
  :root:not([data-theme="light"]) .roll-timeline-project-main.on {
    background: #332F2B;
  }
}
:root[data-theme="dark"] .roll-timeline-project-main {
  background: rgba(255,255,255,.055);
}
:root[data-theme="dark"] .roll-timeline-project-main.on {
  background: #332F2B;
}


/* =====================================================================
   v89 — menu hierarchy refinement.
   ===================================================================== */
.roll-menu-divider {
  height: 1px;
  margin: 7px 5px;
  background: var(--divider);
}

.roll-month-quick {
  padding-bottom: 1px;
}
.roll-month-today {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.roll-month-today:active {
  background: rgba(29,24,21,.065);
}

.roll-timeline-view-tools {
  padding: 0;
  margin: 0 0 4px;
}
.roll-timeline-view-action {
  display: block;
  width: 100%;
  min-height: 41px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}
.roll-timeline-view-action.on,
.roll-timeline-view-action:active {
  background: #E0DCD6;
  color: var(--accent);
}
.roll-timeline-project-inline {
  width: 100%;
}
.roll-timeline-project-inline .roll-timeline-project-chooser {
  margin: 5px 0 2px;
}
.roll-menu-divider-after-view {
  margin-top: 9px;
  margin-bottom: 2px;
}

#selFilter2 + .roll-select .roll-timeline-view-tools + .roll-group {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .roll-month-today:active {
    background: rgba(255,255,255,.07);
  }
  :root:not([data-theme="light"]) .roll-timeline-view-action.on,
  :root:not([data-theme="light"]) .roll-timeline-view-action:active {
    background: #3A3531;
  }
}
:root[data-theme="dark"] .roll-month-today:active {
  background: rgba(255,255,255,.07);
}
:root[data-theme="dark"] .roll-timeline-view-action.on,
:root[data-theme="dark"] .roll-timeline-view-action:active {
  background: #3A3531;
}

/* =====================================================================
   v90 — PROJECTS permanent-open section.
   ===================================================================== */

/* PROJECTS is a section label, not a selected action. */
.roll-timeline-project-inline.always-open {
  margin-top: 4px;
}
.roll-timeline-projects-title {
  padding: 10px 12px 7px;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .08em;
}
.roll-timeline-project-inline.always-open .roll-timeline-project-chooser {
  display: grid !important;
  gap: 6px;
  margin: 0;
  padding: 0 0 4px;
}

/* Project rows are taller and easier to read. */
.roll-timeline-project-inline .roll-timeline-project-option {
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border: 0;
  border-radius: 11px;
  font-size: 14px;
  font-weight: 750;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}

/* Neutral All Projects row. */
.roll-timeline-project-inline .roll-timeline-project-option.project-all {
  background: #E5E1DB;
  color: var(--ink);
}

/* Project title rows follow project type colours with white copy. */
.roll-timeline-project-inline .project-title-row.project-interior {
  background: var(--band-int);
  color: #FFF;
}
.roll-timeline-project-inline .project-title-row.project-landscape {
  background: var(--band-lan);
  color: #FFF;
}

/* No grey selected/current highlight on PROJECTS rows. */
.roll-timeline-project-inline .roll-timeline-project-option.current-project,
.roll-timeline-project-inline .roll-timeline-project-option.on,
.roll-timeline-project-inline .roll-timeline-project-option:active {
  box-shadow: none;
  outline: none;
  filter: none;
}
.roll-timeline-project-inline .project-title-row.current-project,
.roll-timeline-project-inline .project-title-row.on,
.roll-timeline-project-inline .project-title-row:active {
  color: #FFF;
}
.roll-timeline-project-inline .project-all.current-project,
.roll-timeline-project-inline .project-all.on,
.roll-timeline-project-inline .project-all:active {
  color: var(--ink);
}

/* The three filter accordions follow PROJECTS and start closed. */
.roll-menu-divider-after-view {
  margin-top: 9px;
  margin-bottom: 4px;
}

/* =====================================================================
   v91 — real project-title rows + corrected PROJECTS menu + smooth zoom.
   ===================================================================== */

/* Actual Timeline project headers should read as titles, not separators. */
.tl-project {
  height: 48px;
  border-bottom: 0;
}
.tl-project.interior {
  background: var(--band-int);
}
.tl-project.landscape {
  background: var(--band-lan);
}
.tl-project-sticky {
  width: min(100vw, 460px);
  padding-inline: 15px;
  gap: 10px;
  background: inherit;
}
.tl-project-sticky strong {
  color: #FFF;
  font-size: 16px;
  font-weight: 780;
  letter-spacing: .005em;
}
.tl-project-sticky span {
  color: rgba(255,255,255,.76);
  font-size: 10.5px;
  font-weight: 650;
}

/* PROJECTS is a stable section heading, not an action button. */
.roll-timeline-projects-title {
  min-height: 38px;
  display: flex;
  align-items: center;
  padding: 9px 12px 7px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 820;
  letter-spacing: .07em;
  background: transparent;
  pointer-events: none;
}

/* Project choices are deliberately subordinate to the PROJECTS heading.
   They still use project type colour, but with clear title-sized copy. */
.roll-timeline-project-inline .roll-timeline-project-option {
  min-height: 50px;
  padding: 11px 14px;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.18;
}

/* Keep selected PROJECTS rows free of the old grey action highlight. */
.roll-timeline-project-inline .roll-timeline-project-option.current-project,
.roll-timeline-project-inline .roll-timeline-project-option.on,
.roll-timeline-project-inline .roll-timeline-project-option:focus,
.roll-timeline-project-inline .roll-timeline-project-option:active {
  outline: 0;
  box-shadow: none;
}

/* The Timeline preview transform is GPU-friendly during two-finger zoom. */
#ganttInner {
  transform-origin: 0 0;
  backface-visibility: hidden;
}

/* =====================================================================
   v92 — PROJECTS conflict fix + overall Timeline zoom + 10% title tints.
   ===================================================================== */

/* PROJECTS is a fixed section label, not a button. */
#timelineScopeBar .roll-timeline-projects-title {
  min-height: 40px;
  display: flex;
  align-items: center;
  padding: 9px 12px 7px;
  border: 0;
  background: transparent;
  color: #4D4945;
  font-size: 13.5px;
  font-weight: 820;
  letter-spacing: .07em;
  pointer-events: none;
}

/* Fix the real v90/v91 conflict: the older Timeline rule used an ID selector
   and forced every project option back to transparent. These authoritative
   selectors restore the intended project rows. */
#timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option.project-all {
  background: color-mix(in srgb, #777 10%, #FFFDF9 90%);
  color: #4B4844;
}
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior.current-project,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior:active {
  background: color-mix(in srgb, var(--band-int) 10%, #FFFDF9 90%);
  color: #4B4844;
}
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape.current-project,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape:active {
  background: color-mix(in srgb, var(--band-lan) 10%, #FFFDF9 90%);
  color: #4B4844;
}
#timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option {
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 11px;
  font-size: 15px;
  font-weight: 760;
  box-shadow: none;
  outline: none;
  filter: none;
}

/* Actual Timeline project-title rows use the same 10% type tint with dark
   grey text, and are clearly separated from the tasks that follow. */
#ganttInner .tl-project {
  height: var(--tl-project-h-z, 52px);
  margin-bottom: var(--tl-project-gap-z, 10px);
  border: 0;
}
#ganttInner .tl-project.interior {
  background: color-mix(in srgb, var(--band-int) 10%, var(--timeline-board) 90%);
}
#ganttInner .tl-project.landscape {
  background: color-mix(in srgb, var(--band-lan) 10%, var(--timeline-board) 90%);
}
#ganttInner .tl-project-sticky {
  height: 100%;
  padding-inline: 15px;
  background: inherit;
}
#ganttInner .tl-project-sticky strong,
#ganttInner .tl-project.interior .tl-project-sticky strong,
#ganttInner .tl-project.landscape .tl-project-sticky strong {
  color: #4B4844;
  font-size: var(--tl-project-title-z, 17px);
  font-weight: 780;
}
#ganttInner .tl-project-sticky span {
  color: #77716B;
  font-size: var(--tl-project-meta-z, 10.5px);
}

/* Overall committed Timeline zoom: horizontal width is recalculated in JS;
   these variables scale the vertical rhythm and typography at the same time. */
#ganttInner .tl-ruler,
#ganttInner .tl-day {
  height: var(--tl-ruler-h-z, 54px);
}
#ganttInner .tl-task {
  height: var(--tl-row-h-z, 64px);
}
#ganttInner .tl-bar,
#ganttInner .tl-overdue-tail {
  top: var(--tl-bar-top-z, 6px);
  height: var(--tl-bar-h-z, 21px);
}
#ganttInner .tl-task-info,
#ganttInner .tl-task-info.compact,
#ganttInner .tl-task-info.with-project {
  top: var(--tl-info-top-z, 27px);
  min-height: var(--tl-info-min-h-z, 31px);
  max-height: var(--tl-info-max-h-z, 36px);
  font-size: var(--tl-info-font-z, 12.2px);
}

/* Smooth whole-canvas preview while fingers move. */
#ganttInner {
  backface-visibility: hidden;
  transform-origin: 0 0;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior,
  :root:not([data-theme="light"]) #timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape,
  :root:not([data-theme="light"]) #timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option.project-all {
    color: #C8C2BB;
  }
  :root:not([data-theme="light"]) #ganttInner .tl-project-sticky strong {
    color: #C8C2BB;
  }
  :root:not([data-theme="light"]) #ganttInner .tl-project-sticky span {
    color: #9F9890;
  }
}
:root[data-theme="dark"] #timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior,
:root[data-theme="dark"] #timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape,
:root[data-theme="dark"] #timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option.project-all {
  color: #C8C2BB;
}
:root[data-theme="dark"] #ganttInner .tl-project-sticky strong {
  color: #C8C2BB;
}
:root[data-theme="dark"] #ganttInner .tl-project-sticky span {
  color: #9F9890;
}

/* =====================================================================
   v93 — compact filter hierarchy + neutral project title rows + no grid.
   ===================================================================== */

/* Top Timeline view actions. */
#timelineScopeBar .roll-timeline-quick-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 6px;
}
#timelineScopeBar .roll-timeline-quick-action {
  min-height: 36px;
  padding: 7px 8px;
  border: 0;
  border-radius: 10px;
  background: rgba(29,24,21,.045);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 730;
  white-space: nowrap;
  cursor: pointer;
}
#timelineScopeBar .roll-timeline-quick-action.on {
  background: #E0DCD6;
  color: var(--accent);
}

/* All section headings use one type scale and sit closer together. */
#timelineScopeBar .roll-timeline-projects-title,
#timelineScopeBar .roll-group-toggle .roll-group-label {
  padding: 0 3px;
  color: var(--ink-3);
  font-size: 11px;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: .075em;
  text-transform: uppercase;
}
#timelineScopeBar .roll-timeline-projects-title {
  min-height: 30px;
  padding-inline: 12px;
}
#timelineScopeBar .roll-group-toggle {
  min-height: 32px;
  padding-inline: 9px;
}
#timelineScopeBar .roll-group.accordion + .roll-group.accordion {
  margin-top: 2px;
  padding-top: 2px;
}
#timelineScopeBar .roll-menu-divider-after-view {
  margin-top: 6px;
  margin-bottom: 2px;
}

/* PROJECTS remains always open and compact beneath its title. */
#timelineScopeBar .roll-timeline-project-inline.always-open .roll-timeline-project-chooser {
  gap: 5px;
  margin: 0;
  padding-bottom: 3px;
}

/* Every project title row uses a neutral 10% grey background.
   Project identity is conveyed by text colour only. */
#timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option,
#timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option.project-all,
#timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option.current-project,
#timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option:active {
  background: color-mix(in srgb, #777 10%, #FFFDF9 90%);
  box-shadow: none;
  outline: none;
  filter: none;
}
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior.current-project,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior:active {
  color: var(--band-int);
}
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape.current-project,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape:active {
  color: var(--band-lan);
}
#timelineScopeBar .roll-timeline-project-inline .project-all {
  color: #5B5651;
}

/* Actual Timeline project-title rows: neutral grey background, type-coloured text. */
#ganttInner .tl-project,
#ganttInner .tl-project.interior,
#ganttInner .tl-project.landscape {
  background: color-mix(in srgb, #777 10%, var(--timeline-board) 90%);
  margin-bottom: var(--tl-project-gap-z, 16px);
  border: 0;
}
#ganttInner .tl-project.interior .tl-project-sticky strong {
  color: var(--band-int);
}
#ganttInner .tl-project.landscape .tl-project-sticky strong {
  color: var(--band-lan);
}
#ganttInner .tl-project-sticky span {
  color: #77716B;
}

/* Extra separation before the first task under each project title. */
#ganttInner .tl-project + .tl-task {
  margin-top: 4px;
}

/* No Timeline grid/divider lines. Keep only the Today indicator. */
#ganttInner .tl-day {
  border-right: 0 !important;
}
#ganttInner .tl-ruler {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
#ganttInner .tl-task {
  border-bottom: 0 !important;
  background-image: none !important;
}
#ganttInner .tl-project {
  border-bottom: 0 !important;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #timelineScopeBar .roll-timeline-quick-action {
    background: rgba(255,255,255,.055);
  }
  :root:not([data-theme="light"]) #timelineScopeBar .roll-timeline-quick-action.on {
    background: #3A3531;
  }
  :root:not([data-theme="light"]) #timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option,
  :root:not([data-theme="light"]) #ganttInner .tl-project {
    background: color-mix(in srgb, #AAA 10%, var(--timeline-board) 90%);
  }
}
:root[data-theme="dark"] #timelineScopeBar .roll-timeline-quick-action {
  background: rgba(255,255,255,.055);
}
:root[data-theme="dark"] #timelineScopeBar .roll-timeline-quick-action.on {
  background: #3A3531;
}
:root[data-theme="dark"] #timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option,
:root[data-theme="dark"] #ganttInner .tl-project {
  background: color-mix(in srgb, #AAA 10%, var(--timeline-board) 90%);
}

/* =====================================================================
   v94 — PROJECTS accordion + type badges + reading-focused zoom.
   ===================================================================== */

/* Filters top now only Today | By Date. */
#timelineScopeBar .roll-timeline-quick-row {
  grid-template-columns: 1fr 1fr;
}

/* PROJECTS now behaves like the other dropdown sections. */
#timelineScopeBar .roll-timeline-project-inline.accordion-projects {
  margin: 0;
  padding: 0;
}
#timelineScopeBar .roll-projects-toggle {
  width: 100%;
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--ink-3);
  cursor: pointer;
}
#timelineScopeBar .roll-projects-label,
#timelineScopeBar .roll-group-toggle .roll-group-label {
  font-size: 11px;
  font-weight: 760;
  line-height: 1.1;
  letter-spacing: .075em;
  text-transform: uppercase;
}
#timelineScopeBar .roll-projects-chevron {
  font-size: 16px;
  line-height: 1;
  color: var(--ink-3);
}
#timelineScopeBar .roll-timeline-project-inline.accordion-projects .roll-timeline-project-chooser {
  display: none !important;
  margin: 3px 0 5px;
  padding: 0;
  gap: 4px;
}
#timelineScopeBar .roll-timeline-project-inline.accordion-projects.open .roll-timeline-project-chooser {
  display: grid !important;
}

/* Project options use the same copy scale as Status/worker option rows. */
#timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option {
  min-height: 38px;
  padding: 8px 11px;
  border-radius: 9px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.2;
}

/* Interior/Landscape project options: type colour fill + white copy. */
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior.current-project,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior:active {
  background: var(--band-int);
  color: #FFF;
}
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape.current-project,
#timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape:active {
  background: var(--band-lan);
  color: #FFF;
}
#timelineScopeBar .roll-timeline-project-inline .project-all {
  background: color-mix(in srgb, #777 10%, #FFFDF9 90%);
  color: #5B5651;
}

/* Clear project-type badge before the actual Timeline project title. */
#ganttInner .tl-project-sticky {
  display: flex;
  align-items: center;
  gap: 9px;
}
#ganttInner .tl-project-type-badge {
  flex: 0 0 auto;
  min-height: var(--tl-project-badge-h-z, 22px);
  padding: 0 7px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: var(--tl-project-badge-z, 8.7px);
  font-weight: 820;
  letter-spacing: .055em;
  line-height: 1;
}
#ganttInner .tl-project-type-badge.interior {
  background: var(--band-int);
}
#ganttInner .tl-project-type-badge.landscape {
  background: var(--band-lan);
}

/* Project header row remains restrained grey; badge provides type identity. */
#ganttInner .tl-project,
#ganttInner .tl-project.interior,
#ganttInner .tl-project.landscape {
  background: color-mix(in srgb, #777 10%, var(--timeline-board) 90%);
  margin-bottom: var(--tl-project-gap-z, 18px);
}
#ganttInner .tl-project-sticky strong,
#ganttInner .tl-project.interior .tl-project-sticky strong,
#ganttInner .tl-project.landscape .tl-project-sticky strong {
  color: #4B4844;
}

/* Reading-focused committed zoom: typography expands, not just calendar width. */
#ganttInner .tl-day .tl-day-num,
#ganttInner .tl-day strong {
  font-size: var(--tl-day-num-z, 11.5px);
}
#ganttInner .tl-day .tl-day-week,
#ganttInner .tl-day small {
  font-size: var(--tl-day-week-z, 9.3px);
}
#ganttInner .tl-bar-pct {
  font-size: var(--tl-bar-pct-z, 10.5px);
}
#ganttInner .tl-info-project {
  font-size: var(--tl-info-project-z, 11.4px);
}
#ganttInner .tl-info-main {
  font-size: var(--tl-info-font-z, 12.2px);
}

/* Extra visual separation before tasks under a project. */
#ganttInner .tl-project + .tl-task {
  margin-top: 6px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior,
  :root:not([data-theme="light"]) #timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape {
    color: #FFF;
  }
  :root:not([data-theme="light"]) #ganttInner .tl-project-sticky strong {
    color: #C8C2BB;
  }
}
:root[data-theme="dark"] #timelineScopeBar .roll-timeline-project-inline .project-title-row.project-interior,
:root[data-theme="dark"] #timelineScopeBar .roll-timeline-project-inline .project-title-row.project-landscape {
  color: #FFF;
}
:root[data-theme="dark"] #ganttInner .tl-project-sticky strong {
  color: #C8C2BB;
}

/* =====================================================================
   v96 — Project header strip matched to supplied mobile reference.
   [TYPE BLOCK][PROJECT TITLE ON LIGHT-GREY STRIP]
   ===================================================================== */

#ganttInner .tl-project,
#ganttInner .tl-project.interior,
#ganttInner .tl-project.landscape {
  height: var(--tl-project-h-z, 36px);
  margin-bottom: var(--tl-project-gap-z, 26px);
  border: 0 !important;
  background: #DDDCD9;
}

#ganttInner .tl-project-sticky {
  width: min(100vw, 460px);
  height: 100%;
  padding: 0;
  gap: 0;
  display: flex;
  align-items: stretch;
  background: #DDDCD9;
}

#ganttInner .tl-project-type-block {
  flex: 0 0 78px;
  width: 78px;
  height: 100%;
  padding: 0 7px;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFF;
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: .015em;
  white-space: nowrap;
}

#ganttInner .tl-project-type-block.interior {
  background: var(--band-int);
}

#ganttInner .tl-project-type-block.landscape {
  background: var(--band-lan);
}

#ganttInner .tl-project-title,
#ganttInner .tl-project.interior .tl-project-title,
#ganttInner .tl-project.landscape .tl-project-title {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0 14px;
  display: flex;
  align-items: center;
  color: #6D6863;
  font-size: var(--tl-project-title-z, 14.5px);
  font-weight: 480;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Remove all legacy pill/badge styling from the Timeline project strip. */
#ganttInner .tl-project-type-badge {
  display: none !important;
}

/* Reference has a clean breathing gap before the first task. */
#ganttInner .tl-project + .tl-task {
  margin-top: 0;
}

/* Dark theme keeps the same composition while using a darker neutral strip. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #ganttInner .tl-project,
  :root:not([data-theme="light"]) #ganttInner .tl-project.interior,
  :root:not([data-theme="light"]) #ganttInner .tl-project.landscape,
  :root:not([data-theme="light"]) #ganttInner .tl-project-sticky {
    background: #2B2926;
  }

  :root:not([data-theme="light"]) #ganttInner .tl-project-title {
    color: #C8C2BB;
  }
}

:root[data-theme="dark"] #ganttInner .tl-project,
:root[data-theme="dark"] #ganttInner .tl-project.interior,
:root[data-theme="dark"] #ganttInner .tl-project.landscape,
:root[data-theme="dark"] #ganttInner .tl-project-sticky {
  background: #2B2926;
}

:root[data-theme="dark"] #ganttInner .tl-project-title {
  color: #C8C2BB;
}

/* =====================================================================
   v97 — subtle project-row separation shadow.
   ===================================================================== */
#ganttInner .tl-project,
#ganttInner .tl-project.interior,
#ganttInner .tl-project.landscape {
  box-shadow: 0 3px 8px rgba(55, 50, 45, .10);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) #ganttInner .tl-project,
  :root:not([data-theme="light"]) #ganttInner .tl-project.interior,
  :root:not([data-theme="light"]) #ganttInner .tl-project.landscape {
    box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
  }
}

:root[data-theme="dark"] #ganttInner .tl-project,
:root[data-theme="dark"] #ganttInner .tl-project.interior,
:root[data-theme="dark"] #ganttInner .tl-project.landscape {
  box-shadow: 0 3px 8px rgba(0, 0, 0, .22);
}

/* =====================================================================
   v98 — project-strip proportions + Filters accordion behavior.
   ===================================================================== */

/* Project strip neutral section is now 15% grey rather than the earlier
   lighter treatment. */
#ganttInner .tl-project,
#ganttInner .tl-project.interior,
#ganttInner .tl-project.landscape,
#ganttInner .tl-project-sticky {
  background: color-mix(in srgb, #777 15%, var(--timeline-board) 85%);
}

/* Wider full-height type block. Its copy is always white. */
#ganttInner .tl-project-type-block {
  flex: 0 0 94px;
  width: 94px;
  padding-inline: 8px;
  color: #FFF !important;
  font-size: 9.2px;
  font-weight: 780;
}

/* PROJECTS uses a clear down/up dropdown indicator. */
#timelineScopeBar .roll-projects-chevron {
  min-width: 16px;
  color: var(--ink-3);
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
  text-align: center;
}

/* Show All | By Date remain balanced at the top of Filters. */
#timelineScopeBar .roll-timeline-quick-row {
  grid-template-columns: 1fr 1fr;
}

/* No All Projects row exists inside PROJECTS; project choices begin directly. */
#timelineScopeBar .roll-timeline-project-inline.accordion-projects .roll-timeline-project-chooser {
  margin-top: 3px;
}

/* =====================================================================
   v99 — authoritative Timeline cleanup:
   normal calendar direction, whole-view zoom, final current colours.
   ===================================================================== */

/* Project strip: remove the experimental shadow and increase neutral fill
   from 15% to 20% grey. */
#ganttInner .tl-project,
#ganttInner .tl-project.interior,
#ganttInner .tl-project.landscape {
  box-shadow: none !important;
}

#ganttInner .tl-project,
#ganttInner .tl-project.interior,
#ganttInner .tl-project.landscape,
#ganttInner .tl-project-sticky {
  background: color-mix(in srgb, #777 20%, var(--timeline-board) 80%);
}

/* Not Started: final authoritative 50% grey.
   Exclude active-overdue bars, because their uncompleted remainder must stay
   orange according to the confirmed overdue design. */
#ganttInner .tl-bar.s-notstarted:not(.overdue-active) {
  background: #808080 !important;
  box-shadow: none !important;
}
#ganttInner .tl-bar.s-notstarted:not(.overdue-active) .tl-bar-fill {
  background: #808080 !important;
  opacity: 1 !important;
}
#ganttInner .tl-bar.s-notstarted:not(.overdue-active) .tl-bar-pct,
#ganttInner .tl-bar.s-notstarted:not(.overdue-active) .tl-bar-pct.dark {
  color: #262321;
  text-shadow: none;
}

/* Whole-view committed zoom. Every visible Timeline reading element uses the
   exact same zoom ratio; no typography reverts to a smaller responsive scale. */
#ganttInner .tl-ruler,
#ganttInner .tl-day {
  height: var(--tl-ruler-h-z, 54px);
}
#ganttInner .tl-weekday {
  font-size: var(--tl-weekday-z, 8.5px);
}
#ganttInner .tl-date {
  font-size: var(--tl-date-z, 12.5px);
}
#ganttInner .tl-month {
  font-size: var(--tl-month-z, 8px);
}

#ganttInner .tl-task {
  height: var(--tl-row-h-z, 64px);
}
#ganttInner .tl-bar,
#ganttInner .tl-overdue-tail {
  top: var(--tl-bar-top-z, 6px);
  height: var(--tl-bar-h-z, 21px);
}
#ganttInner .tl-bar-pct {
  font-size: var(--tl-bar-pct-z, 10.5px);
}

#ganttInner .tl-task-info,
#ganttInner .tl-task-info.compact,
#ganttInner .tl-task-info.with-project {
  top: var(--tl-info-top-z, 27px);
  min-height: var(--tl-info-min-h-z, 31px);
  max-height: var(--tl-info-max-h-z, 38px);
  font-size: var(--tl-info-font-z, 12.2px);
}
#ganttInner .tl-info-main {
  gap: var(--tl-info-gap-z, 5px);
  font-size: var(--tl-info-font-z, 12.2px);
}
#ganttInner .tl-info-project {
  font-size: var(--tl-info-project-z, 11.4px);
}

#ganttInner .tl-project {
  height: var(--tl-project-h-z, 36px);
  margin-bottom: var(--tl-project-gap-z, 26px);
}
#ganttInner .tl-project-type-block {
  flex: 0 0 var(--tl-project-type-w-z, 94px);
  width: var(--tl-project-type-w-z, 94px);
  font-size: var(--tl-project-type-font-z, 9.2px);
}
#ganttInner .tl-project-title,
#ganttInner .tl-project.interior .tl-project-title,
#ganttInner .tl-project.landscape .tl-project-title {
  padding-inline: var(--tl-project-title-pad-z, 14px);
  font-size: var(--tl-project-title-z, 14.5px);
}

/* Keep the pinch preview GPU-smooth. The committed render above reproduces
   the same ratio after release. */
#ganttInner {
  backface-visibility: hidden;
}

/* =====================================================================
   v100 — remove zoom + quick-button spacing + status contrast.
   ===================================================================== */

/* Show All and By Date use the same selected treatment. */
#timelineScopeBar .roll-timeline-quick-action.on {
  background: #E0DCD6;
  color: var(--accent);
}

/* More breathing room below Show All / By Date before PROJECTS. */
#timelineScopeBar .roll-timeline-quick-row {
  margin-bottom: 10px;
}

/* Not Started = true 30% grey. Authoritative final rule so older
   Timeline colour blocks cannot override it. */
#ganttInner .tl-bar.s-notstarted {
  background: #B3B3B3 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
#ganttInner .tl-bar.s-notstarted .tl-bar-fill {
  background: #B3B3B3 !important;
  opacity: 1 !important;
}

/* On Hold percentage is always white on the current hold colour. */
#ganttInner .tl-bar.s-onhold .tl-bar-pct,
#ganttInner .tl-bar.s-onhold .tl-bar-pct.dark,
#ganttInner .tl-bar.s-onhold .tl-bar-pct.light {
  color: #FFF !important;
  text-shadow: none !important;
}

/* Pinch zoom removed: Timeline is fixed at the designed reading scale.
   One-finger scrolling remains normal. */
#ganttScroll {
  touch-action: pan-x pan-y;
}
#ganttInner {
  transform: none !important;
  transform-origin: 0 0 !important;
  will-change: auto !important;
}

/* =====================================================================
   v101 — By Date top-entry + uniform Not Started + spacing refinement.
   ===================================================================== */

/* More room below the Show All / By Date action row. */
#timelineScopeBar .roll-timeline-quick-row {
  margin-bottom: 17px;
}

/* More breathing room between project buttons inside PROJECTS. */
#timelineScopeBar .roll-timeline-project-inline.accordion-projects .roll-timeline-project-chooser {
  gap: 9px;
  padding-bottom: 7px;
}

/* One authoritative 30% grey for every NORMAL Not Started Timeline bar.
   #B3B3B3 = 30% black over white / 70% luminance grey. */
#ganttInner .tl-bar.s-notstarted:not(.overdue-active) {
  background: #B3B3B3 !important;
  box-shadow: none !important;
  opacity: 1 !important;
}
#ganttInner .tl-bar.s-notstarted .tl-bar-fill {
  background: #B3B3B3 !important;
  opacity: 1 !important;
}
#ganttInner .tl-bar.s-notstarted:not(.overdue-active) .tl-bar-pct,
#ganttInner .tl-bar.s-notstarted:not(.overdue-active) .tl-bar-pct.dark {
  color: #302D2A !important;
  text-shadow: none !important;
}

/* Preserve the confirmed overdue treatment: a Not Started task that has
   actually passed its planned end uses orange for the overdue remainder,
   while its completed/planned fill remains the same 30% grey. */
#ganttInner .tl-bar.s-notstarted.overdue-active {
  background: #E39459 !important;
}
/* =====================================================================
   v102 — deterministic By Date order + symmetric project-title spacing.
   ===================================================================== */

/* Explicit column flow for By Date; order values are assigned in JS. */
#ganttInner.by-date-order {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
#ganttInner.by-date-order .tl-ruler { order: 0; flex: 0 0 auto; }
#ganttInner.by-date-order .tl-task { flex: 0 0 auto; }

/* Equal breathing room above and below each Project title strip. */
#ganttInner .tl-project,
#ganttInner .tl-project.interior,
#ganttInner .tl-project.landscape {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
}
#ganttInner .tl-project + .tl-task {
  margin-top: 0 !important;
}

/* =====================================================================
   v103 — simplified By Date DOM order + tighter Timeline rhythm.
   ===================================================================== */

/* By Date no longer uses flex/order tricks. Normal document order is the
   visual order, which removes another possible source of reversal. */
#ganttInner.by-date-order {
  display: block !important;
}

/* No artificial space under the calendar ruler. */
#ganttInner .tl-ruler {
  margin-bottom: 0 !important;
}

/* Project strip spacing: 15px above and below.
   The FIRST project directly under the calendar has no top gap. */
#ganttInner .tl-project,
#ganttInner .tl-project.interior,
#ganttInner .tl-project.landscape {
  margin-top: 15px !important;
  margin-bottom: 15px !important;
}
#ganttInner .tl-ruler + .tl-project {
  margin-top: 0 !important;
}
#ganttInner .tl-project + .tl-task {
  margin-top: 0 !important;
}

/* More compact task units in both By Date and By Project. */
#ganttInner .tl-task {
  height: 58px !important;
  min-height: 58px !important;
}
#ganttInner .tl-bar,
#ganttInner .tl-overdue-tail {
  top: 5px !important;
  height: 20px !important;
}
#ganttInner .tl-task-info,
#ganttInner .tl-task-info.compact,
#ganttInner .tl-task-info.with-project {
  top: 24px !important;
  min-height: 27px !important;
  max-height: 31px !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
}
#ganttInner .tl-info-project {
  margin-bottom: 0 !important;
  line-height: 1 !important;
}
#ganttInner .tl-info-main {
  line-height: 1.03 !important;
}

/* =====================================================================
   v105 — separate Timeline row geometry for By Project vs By Date.
   ===================================================================== */

/* By Project / All Projects remains compact. */
#ganttInner .tl-task:not(.tl-task-by-date) {
  height: 58px !important;
  min-height: 58px !important;
}

/* By Date carries two text lines (project + task), so give it its own
   taller row instead of forcing it into the compact project-mode height. */
#ganttInner .tl-task.tl-task-by-date {
  height: 70px !important;
  min-height: 70px !important;
}

/* Keep the bar position aligned while allowing more text below it. */
#ganttInner .tl-task.tl-task-by-date .tl-bar,
#ganttInner .tl-task.tl-task-by-date .tl-overdue-tail {
  top: 5px !important;
  height: 20px !important;
}

#ganttInner .tl-task.tl-task-by-date .tl-task-info,
#ganttInner .tl-task.tl-task-by-date .tl-task-info.compact,
#ganttInner .tl-task.tl-task-by-date .tl-task-info.with-project {
  top: 25px !important;
  min-height: 39px !important;
  max-height: 43px !important;
  padding-top: 2px !important;
  padding-bottom: 2px !important;
}

#ganttInner .tl-task.tl-task-by-date .tl-info-project {
  margin-bottom: 2px !important;
  line-height: 1.05 !important;
}

#ganttInner .tl-task.tl-task-by-date .tl-info-main {
  line-height: 1.08 !important;
}

/* =====================================================================
   v106 — Project title-row typography matched to supplied reference.
   ===================================================================== */

/* Left type block: compact white semibold copy, not heavy/bold. */
#ganttInner .tl-project-type-block,
#ganttInner .tl-project-type-block.interior,
#ganttInner .tl-project-type-block.landscape {
  color: #FFF !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

/* Project name: small, regular-weight, understated grey text like reference. */
#ganttInner .tl-project-title,
#ganttInner .tl-project.interior .tl-project-title,
#ganttInner .tl-project.landscape .tl-project-title {
  padding-inline: 14px !important;
  color: #77726D !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}

/* Keep the confirmed project-strip geometry/design. */
#ganttInner .tl-project,
#ganttInner .tl-project.interior,
#ganttInner .tl-project.landscape,
#ganttInner .tl-project-sticky {
  height: 36px;
  box-shadow: none !important;
  background: color-mix(in srgb, #777 20%, var(--timeline-board) 80%);
}

/* =====================================================================
   v107 — typography / visual hierarchy polish.
   No layout or application logic changes.
   ===================================================================== */

:root {
  --ui-text-strong: #4D4843;
  --ui-text-body: #5E5953;
  --ui-text-muted: #858079;
  --ui-text-faint: #9A958E;
}

/* ---------------------------------------------------------------------
   App masthead: restrained, precise, and consistent with the wordmark.
   --------------------------------------------------------------------- */
.mast-title {
  font-size: 14px !important;
  font-weight: 700 !important;
  letter-spacing: .075em !important;
  color: var(--ink) !important;
}

.mast .wordmark {
  font-size: 14.5px;
}

/* ---------------------------------------------------------------------
   Main segmented controls / Timeline triggers.
   --------------------------------------------------------------------- */
#scopeBar .segment .seg,
#timelineScopeBar .segment .seg {
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

#timelineMonth + .roll-select.pick-roll .roll-trigger,
#selFilter2 + .roll-select.pick-roll .roll-trigger {
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

/* Filter menu typography: clear hierarchy without excessive boldness. */
#timelineScopeBar .roll-timeline-quick-action {
  font-size: 12px !important;
  font-weight: 650 !important;
  color: var(--ink-2);
}

#timelineScopeBar .roll-timeline-projects-title,
#timelineScopeBar .roll-group-toggle .roll-group-label {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .075em !important;
  color: var(--ink-3);
}

#timelineScopeBar .roll-timeline-project-inline .roll-timeline-project-option {
  font-size: 12.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

/* ---------------------------------------------------------------------
   Timeline ruler.
   --------------------------------------------------------------------- */
#ganttInner .tl-weekday,
#ganttInner .tl-day .tl-day-week,
#ganttInner .tl-day small {
  font-size: 8.5px !important;
  font-weight: 650 !important;
  letter-spacing: .035em !important;
}

#ganttInner .tl-date,
#ganttInner .tl-day .tl-day-num,
#ganttInner .tl-day strong {
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* ---------------------------------------------------------------------
   PROJECT TITLE STRIP — exact requested specification.
   --------------------------------------------------------------------- */
#ganttInner .tl-project-type-block,
#ganttInner .tl-project-type-block.interior,
#ganttInner .tl-project-type-block.landscape {
  color: #FFFFFF !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  letter-spacing: .01em !important;
  text-transform: uppercase !important;
}

#ganttInner .tl-project-title,
#ganttInner .tl-project.interior .tl-project-title,
#ganttInner .tl-project.landscape .tl-project-title {
  color: #77726D !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  letter-spacing: .012em !important;
  text-transform: uppercase !important;
}

/* ---------------------------------------------------------------------
   Timeline task typography.
   Primary task content is firm but not heavy; timing is clearly secondary.
   --------------------------------------------------------------------- */
#ganttInner .tl-info-main {
  color: var(--ui-text-body);
  font-size: 12.4px !important;
  font-weight: 600 !important;
  letter-spacing: -.004em !important;
}

#ganttInner .tl-info-area {
  color: var(--ui-text-body);
  font-size: 11.2px !important;
  font-weight: 700 !important;
  letter-spacing: .025em !important;
}

#ganttInner .tl-info-task {
  color: var(--ui-text-body);
  font-size: 12.4px !important;
  font-weight: 600 !important;
  letter-spacing: -.006em !important;
}

#ganttInner .tl-info-days {
  color: var(--ui-text-muted);
  font-size: 10.6px !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
}

#ganttInner .tl-info-overdue {
  font-size: 10.6px !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
}

/* By Date's extra project-name line is secondary to the task itself. */
#ganttInner .tl-task-by-date .tl-info-project {
  font-size: 11.2px !important;
  font-weight: 650 !important;
  line-height: 1.05 !important;
  letter-spacing: -.002em !important;
}

/* Percentage labels should be compact and crisp, not visually dominant. */
#ganttInner .tl-bar-pct {
  font-size: 10.2px !important;
  font-weight: 700 !important;
  letter-spacing: -.01em !important;
}

/* ---------------------------------------------------------------------
   Tasks page: same hierarchy language as Timeline.
   --------------------------------------------------------------------- */
.group-head {
  font-size: 16px !important;
  font-weight: 650 !important;
  letter-spacing: -.006em !important;
}

.task .name {
  color: var(--ink-2);
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  letter-spacing: -.006em !important;
}

.task .mtext {
  font-size: 11.5px !important;
  font-weight: 450 !important;
  color: var(--ink-3) !important;
}

.tag {
  font-size: 10.5px !important;
  font-weight: 650 !important;
  letter-spacing: .005em !important;
}

.task .pct {
  font-size: 11.5px !important;
  font-weight: 650 !important;
}

/* ---------------------------------------------------------------------
   Sheets / forms: strong titles, quiet supporting copy.
   --------------------------------------------------------------------- */
.sheet h2 {
  font-size: 19px !important;
  font-weight: 650 !important;
  letter-spacing: -.012em !important;
}

.sheet .where {
  font-size: 12.5px !important;
  font-weight: 450 !important;
  color: var(--ink-3) !important;
}

.field > span {
  font-size: 10.5px !important;
  font-weight: 700 !important;
  letter-spacing: .075em !important;
}

.btn {
  font-size: 14px;
  font-weight: 600;
}

/* ---------------------------------------------------------------------
   Bottom navigation: quieter inactive labels, crisp active destination.
   --------------------------------------------------------------------- */
.tab {
  font-size: 10px !important;
  font-weight: 650 !important;
  letter-spacing: .07em !important;
  color: var(--ink-3);
}

.tab.on {
  color: var(--accent) !important;
}

/* Dark-theme equivalents for the fixed neutral hierarchy colours. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ui-text-strong: #E8E3DD;
    --ui-text-body: #D0CAC3;
    --ui-text-muted: #A39C94;
    --ui-text-faint: #827B74;
  }

  :root:not([data-theme="light"]) #ganttInner .tl-project-title {
    color: #C7C0B8 !important;
  }
}

:root[data-theme="dark"] {
  --ui-text-strong: #E8E3DD;
  --ui-text-body: #D0CAC3;
  --ui-text-muted: #A39C94;
  --ui-text-faint: #827B74;
}

:root[data-theme="dark"] #ganttInner .tl-project-title {
  color: #C7C0B8 !important;
}

/* =====================================================================
   v109 — structured Task Edit form: Details / Progress / Updates & Media.
   ===================================================================== */
.task-edit-section {
  margin: 0 0 22px;
  padding: 18px 17px 4px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 62%, var(--option-panel) 38%);
}
.task-edit-section-title {
  margin: 0 0 18px;
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.task-edit-section .field { margin-bottom: 18px; }
.task-edit-section .two-up { margin-bottom: 0; }
.task-edit-section .rest-field { margin-top: 18px; }
.task-edit-inline-rule {
  height: 1px;
  margin: 2px 0 18px;
  background: var(--divider);
}

.task-progress-head,
.task-media-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.task-progress-head > span,
.task-media-head > span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.task-progress-value {
  color: var(--accent);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.task-progress-presets { margin-top: 10px; }
.task-progress-field input[type="range"] { margin-top: 2px; }

.task-edit-more {
  margin: 2px 0 22px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: color-mix(in srgb, var(--surface) 62%, var(--option-panel) 38%);
}
.task-edit-more-toggle {
  width: 100%;
  min-height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}
.task-edit-more-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.task-edit-more-copy strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .015em;
}
.task-edit-more-copy small {
  color: var(--ink-3);
  font-size: 10.5px;
  font-weight: 500;
}
.task-edit-more-chevron {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-size: 16px;
  font-weight: 700;
}
.task-edit-more-body {
  display: none;
  padding: 3px 16px 18px;
  border-top: 1px solid var(--divider);
}
.task-edit-more.open .task-edit-more-body { display: block; }

.task-remarks-input {
  width: 100%;
  min-height: 102px;
  resize: vertical;
  line-height: 1.45;
}
.task-remarks-input:disabled {
  opacity: .7;
  resize: none;
}

.task-media-head { margin-bottom: 10px; }
.task-media-add {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.task-media-add:disabled { opacity: .45; cursor: default; }
.task-media-list {
  display: grid;
  gap: 7px;
}
.task-media-row {
  min-width: 0;
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 6px 5px 9px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.task-media-row.removing { opacity: .45; }
.task-media-row.removing .task-media-open { text-decoration: line-through; }
.task-media-open {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  text-align: left;
}
button.task-media-open { cursor: pointer; }
.task-media-kind {
  flex: 0 0 42px;
  min-height: 27px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .045em;
}
.task-media-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.task-media-copy strong {
  overflow: hidden;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-media-copy small {
  color: var(--ink-3);
  font-size: 9.5px;
}
.task-media-remove {
  flex: 0 0 auto;
  min-height: 32px;
  padding: 0 9px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--urgent);
  font: inherit;
  font-size: 10.5px;
  font-weight: 650;
  cursor: pointer;
}
.task-media-note { margin: 9px 1px 0 !important; }
.task-media-note.warning { color: var(--overdue) !important; }

.task-edit-actions {
  position: sticky;
  bottom: calc(-22px - env(safe-area-inset-bottom));
  z-index: 4;
  margin: 20px -20px 0 !important;
  padding: 12px 20px calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--divider);
  background: color-mix(in srgb, var(--option-panel) 94%, transparent);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Timeline detail: real attachment rows beneath the summary tiles. */
.tl-detail-media-list {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}
.tl-detail-media-row {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 9px;
  border: 0;
  border-radius: 11px;
  background: var(--surface-2);
  color: var(--ink-2);
  text-align: left;
  cursor: pointer;
}
.tl-detail-media-kind {
  flex: 0 0 42px;
  color: var(--ink-3);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: .04em;
}
.tl-detail-media-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.tl-detail-media-copy strong {
  overflow: hidden;
  font-size: 11.5px;
  font-weight: 600;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tl-detail-media-copy small {
  overflow: hidden;
  color: var(--ink-3);
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@media (max-width: 380px) {
  .task-edit-section { padding-inline: 14px; }
  .task-edit-more-toggle,
  .task-edit-more-body { padding-left: 14px; padding-right: 14px; }
}

/* =====================================================================
   v110 — New Task now shares the structured Edit Task form language.
   ===================================================================== */
.task-details-section input[type="text"] {
  min-height: 44px;
}

.task-progress-section .statuses {
  margin-top: 8px;
}

/* The Create action uses the same sticky footer geometry as Save. */
.sheet-actions.task-edit-actions .btn.primary {
  min-width: 112px;
}

/* =====================================================================
   v111 — clearer Updates & Media affordance + more space before actions.
   ===================================================================== */

.task-edit-more {
  margin-top: 6px;
  margin-bottom: 30px;
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line) 76%);
  background: color-mix(in srgb, var(--surface) 54%, var(--option-panel) 46%);
}

.task-edit-more-toggle {
  min-height: 64px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.task-edit-more-copy strong {
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .01em;
}

.task-edit-more-copy small {
  color: var(--ink-3);
  font-size: 10.8px;
  font-weight: 500;
}

.task-edit-more-chevron {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--accent);
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
}

.task-edit-more.open .task-edit-more-toggle {
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}

/* More breathing room before Cancel / Save (or Cancel / Create). */
.task-edit-actions {
  margin-top: 32px !important;
}

/* =====================================================================
   v112 — Timeline media browser + inline voice transcript/translation.
   ===================================================================== */

.timeline-detail-sheet .tl-media-grid {
  gap: 9px;
}

.timeline-detail-sheet .tl-media-tile {
  position: relative;
  min-height: 62px;
  padding: 9px 25px 9px 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background .14s ease, border-color .14s ease, transform .14s ease;
}

.timeline-detail-sheet .tl-media-tile:active {
  transform: scale(.98);
}

.timeline-detail-sheet .tl-media-tile.on {
  border-color: color-mix(in srgb, var(--accent) 30%, var(--line) 70%);
  background: color-mix(in srgb, var(--accent) 8%, var(--option-panel) 92%);
}

.timeline-detail-sheet .tl-media-tile:disabled {
  opacity: .5;
  cursor: default;
}

.timeline-detail-sheet .tl-media-tile-arrow {
  position: absolute;
  right: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-3);
  font-size: 15px;
  font-weight: 700;
}

.timeline-detail-sheet .tl-media-tile.on .tl-media-tile-arrow {
  color: var(--accent);
  transform: translateY(-50%) rotate(90deg);
}

.tl-media-panel {
  margin-top: 11px;
  padding: 11px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 72%, var(--option-panel) 28%);
}

.tl-media-panel[hidden] {
  display: none !important;
}

.tl-media-panel-head {
  min-height: 31px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

.tl-media-panel-head > strong {
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
}

.tl-media-panel-close {
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
}

.tl-media-empty {
  margin: 6px 1px 3px;
  color: var(--ink-3);
  font-size: 10.5px;
}

/* Photos: compact visual thumbnails instead of filenames only. */
.tl-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.tl-photo-thumb {
  min-width: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-3);
  cursor: pointer;
}

.tl-photo-thumb img {
  width: 100%;
  aspect-ratio: 1 / 1;
  display: block;
  object-fit: cover;
  background: var(--surface-2);
}

.tl-photo-thumb > span {
  display: block;
  padding: 5px 6px 6px;
  overflow: hidden;
  font-size: 8.8px;
  font-weight: 550;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-photo-thumb.unavailable {
  opacity: .5;
}

/* Voice: play directly, then read transcript + translation underneath. */
.tl-voice-card {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.tl-voice-card + .tl-voice-card {
  margin-top: 9px;
}

.tl-voice-title {
  margin-bottom: 7px;
  min-width: 0;
}

.tl-voice-title strong {
  display: block;
  overflow: hidden;
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-voice-player {
  width: 100%;
  height: 36px;
  display: block;
}

.tl-voice-player.unavailable {
  opacity: .45;
}

.tl-voice-text {
  display: grid;
  gap: 7px;
  margin-top: 9px;
}

.tl-voice-text-block {
  padding-top: 7px;
  border-top: 1px solid var(--divider);
}

.tl-voice-text-block strong {
  display: block;
  margin-bottom: 3px;
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.tl-voice-text-block p {
  margin: 0;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.45;
}

.tl-voice-text-block.translated {
  padding: 8px 9px;
  border-top: 0;
  border-radius: 9px;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-2) 93%);
}

.tl-voice-text-block.translated strong {
  color: var(--accent);
}

.tl-voice-processing {
  margin: 0;
  padding-top: 7px;
  border-top: 1px solid var(--divider);
  color: var(--ink-3);
  font-size: 10px;
  line-height: 1.4;
}

/* Detail footer actions: more space and fully rounded ends. */
.timeline-detail-sheet .tl-detail-actions {
  display: flex;
  gap: 14px;
  margin-top: 36px;
}

.timeline-detail-sheet .tl-detail-actions .btn {
  flex: 1 1 0;
  min-height: 46px;
  border-radius: 999px !important;
}

@media (max-width: 380px) {
  .tl-photo-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .timeline-detail-sheet .tl-detail-actions {
    gap: 11px;
  }
}

/* =====================================================================
   v113 — Voice text stays collapsed; display follows app language.
   ===================================================================== */

.tl-voice-text-dropdown {
  margin-top: 8px;
}

.tl-voice-text-toggle {
  width: 100%;
  min-height: 36px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 10.8px;
  font-weight: 650;
  text-align: left;
  cursor: pointer;
}

.tl-voice-text-toggle[aria-expanded="true"] {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line) 76%);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-2) 94%);
  color: var(--accent);
}

.tl-voice-text-toggle.pending {
  color: var(--ink-3);
  cursor: default;
  opacity: .78;
}

.tl-voice-text-arrow {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}

.tl-voice-text-body {
  margin-top: 6px;
  padding: 9px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2) 95%);
}

.tl-voice-text-body[hidden] {
  display: none !important;
}

.tl-voice-text-body p {
  margin: 0;
  color: var(--ink-2);
  font-size: 11px;
  line-height: 1.48;
  white-space: pre-wrap;
}

/* Retire the previous always-visible transcript blocks. */
.tl-voice-text,
.tl-voice-text-block,
.tl-voice-processing {
  display: none !important;
}

/* =====================================================================
   v114 — Media category popup + in-form voice recorder.
   ===================================================================== */

.tl-media-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(22, 20, 18, .30);
  opacity: 0;
  transition: opacity .18s ease;
}
.tl-media-popup-backdrop.open { opacity: 1; }

.tl-media-popup {
  width: min(100%, 560px);
  max-height: min(76dvh, 700px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border-radius: 22px 22px 0 0;
  background: var(--option-panel);
  box-shadow: 0 -14px 40px rgba(30, 26, 22, .14);
  transform: translateY(18px);
  transition: transform .18s ease;
}
.tl-media-popup-backdrop.open .tl-media-popup { transform: translateY(0); }

.tl-media-popup-handle {
  width: 38px;
  height: 4px;
  flex: 0 0 auto;
  margin: 8px auto 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-3) 30%, transparent);
}

.tl-media-popup-head {
  min-height: 51px;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 15px 7px 18px;
  border-bottom: 1px solid var(--divider);
}
.tl-media-popup-head > strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.005em;
}
.tl-media-popup-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
}
.tl-media-popup-body {
  min-height: 110px;
  overflow: auto;
  padding: 13px 15px calc(18px + env(safe-area-inset-bottom));
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.timeline-detail-sheet .tl-media-panel { display: none !important; }

.task-media-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.task-media-record {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid color-mix(in srgb, var(--overdue) 25%, var(--line-2) 75%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--overdue) 6%, var(--surface) 94%);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.task-media-record::before {
  content: "●";
  display: inline-block;
  margin-right: 6px;
  color: #D65B55;
  font-size: 9px;
  vertical-align: 1px;
}
.task-media-record.recording {
  border-color: color-mix(in srgb, #D65B55 52%, var(--line) 48%);
  background: color-mix(in srgb, #D65B55 11%, var(--surface) 89%);
  color: #B84742;
}
.task-media-record.recording::before {
  animation: task-record-pulse .9s ease-in-out infinite alternate;
}
.task-media-record:disabled { opacity: .45; cursor: default; }
@keyframes task-record-pulse { from { opacity: .35; } to { opacity: 1; } }

@media (min-width: 680px) {
  .tl-media-popup-backdrop { align-items: center; padding: 24px; }
  .tl-media-popup { max-height: min(80vh, 720px); border-radius: 20px; }
  .tl-media-popup-handle { display: none; }
}

/* =====================================================================
   v115 — prominent voice recorder + smoother voice playback state.
   ===================================================================== */

.task-media-actions {
  flex: 0 0 auto;
}

.task-media-record {
  position: relative;
  width: 100%;
  min-height: 66px;
  margin: 4px 0 13px;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  grid-template-areas:
    "icon copy time"
    "icon copy wave";
  align-items: center;
  column-gap: 11px;
  row-gap: 3px;
  padding: 10px 13px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, #D6534F 36%, var(--line) 64%);
  border-radius: 16px;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #D6534F 7%, var(--surface) 93%),
      color-mix(in srgb, #D6534F 2%, var(--surface-2) 98%));
  color: var(--ink);
  font: inherit;
  text-align: left;
  box-shadow: 0 4px 14px rgba(92, 61, 54, .08);
  cursor: pointer;
  transition: transform .14s ease, border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.task-media-record::before { content: none !important; }
.task-media-record:active { transform: scale(.985); }

.task-media-record-icon {
  grid-area: icon;
  position: relative;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #D6534F;
  box-shadow: 0 4px 12px rgba(214, 83, 79, .24);
}

.task-media-record-icon::before {
  content: "";
  width: 10px;
  height: 18px;
  border: 2px solid #fff;
  border-radius: 8px;
  box-sizing: border-box;
}

.task-media-record-icon::after {
  content: "";
  position: absolute;
  width: 17px;
  height: 10px;
  left: 50%;
  top: 20px;
  transform: translateX(-50%);
  border: 2px solid #fff;
  border-top: 0;
  border-radius: 0 0 10px 10px;
}

.task-media-record-dot,
.task-media-record-ring {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}

.task-media-record-copy {
  grid-area: copy;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.task-media-record-copy strong {
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 750;
  letter-spacing: .005em;
}

.task-media-record-copy small {
  color: var(--ink-3);
  font-size: 10.2px;
  font-weight: 520;
  line-height: 1.25;
}

.task-media-record-time {
  grid-area: time;
  min-width: 45px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
  font-size: 11.5px;
  font-weight: 750;
  text-align: right;
}

.task-media-record-wave {
  grid-area: wave;
  min-width: 45px;
  height: 15px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2px;
  opacity: .22;
}

.task-media-record-wave i {
  width: 3px;
  height: 4px;
  border-radius: 999px;
  background: #D6534F;
}

.task-media-record.recording {
  border-color: #D6534F;
  background:
    linear-gradient(135deg,
      color-mix(in srgb, #D6534F 14%, var(--surface) 86%),
      color-mix(in srgb, #D6534F 7%, var(--surface-2) 93%));
  box-shadow: 0 7px 22px rgba(214, 83, 79, .16);
}

.task-media-record.recording .task-media-record-icon {
  box-shadow: 0 0 0 7px rgba(214, 83, 79, .10), 0 4px 14px rgba(214, 83, 79, .30);
}

.task-media-record.recording .task-media-record-ring {
  animation: task-record-ring 1.25s ease-out infinite;
  border: 2px solid rgba(255, 255, 255, .75);
}

.task-media-record.recording .task-media-record-copy strong,
.task-media-record.recording .task-media-record-time {
  color: #C74743;
}

.task-media-record.recording .task-media-record-wave {
  opacity: 1;
}

.task-media-record.recording .task-media-record-wave i {
  animation: task-record-wave .72s ease-in-out infinite alternate;
}
.task-media-record.recording .task-media-record-wave i:nth-child(2) { animation-delay: -.18s; }
.task-media-record.recording .task-media-record-wave i:nth-child(3) { animation-delay: -.34s; }
.task-media-record.recording .task-media-record-wave i:nth-child(4) { animation-delay: -.12s; }
.task-media-record.recording .task-media-record-wave i:nth-child(5) { animation-delay: -.27s; }

.task-media-record:disabled {
  opacity: .45;
  box-shadow: none;
  cursor: default;
}

@keyframes task-record-ring {
  0% { transform: scale(.72); opacity: .9; }
  100% { transform: scale(1.55); opacity: 0; }
}

@keyframes task-record-wave {
  from { height: 4px; }
  to { height: 14px; }
}

.tl-voice-player {
  min-height: 40px;
}

.tl-voice-text-slot {
  min-width: 0;
}

/* =====================================================================
   v116 — clearer Record Voice control + recoverable transcript startup.
   ===================================================================== */

.task-media-record {
  min-height: 78px;
  margin-top: 7px;
  border-width: 1.5px;
  border-color: color-mix(in srgb, #D84E49 48%, var(--line) 52%);
  border-radius: 18px;
  background:
    radial-gradient(circle at 12% 50%, rgba(216, 78, 73, .10), transparent 31%),
    linear-gradient(135deg,
      color-mix(in srgb, #D84E49 8%, var(--surface) 92%),
      color-mix(in srgb, #D84E49 3%, var(--surface-2) 97%));
  box-shadow:
    0 7px 22px rgba(80, 48, 43, .11),
    inset 0 1px 0 rgba(255,255,255,.68);
}

.task-media-record-icon {
  width: 50px;
  height: 50px;
  color: #fff;
  background: linear-gradient(145deg, #E45A54, #CB413D);
  box-shadow:
    0 6px 16px rgba(203, 65, 61, .30),
    inset 0 1px 0 rgba(255,255,255,.24);
}

.task-media-record-icon::before,
.task-media-record-icon::after {
  content: none !important;
  display: none !important;
}

.task-media-mic-svg {
  width: 27px;
  height: 27px;
  display: block;
  color: #fff;
  position: relative;
  z-index: 2;
}

.task-media-record-badge {
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 13px;
  height: 13px;
  border: 3px solid var(--surface);
  border-radius: 999px;
  background: #F22F2A;
  box-shadow: 0 1px 4px rgba(160, 35, 31, .30);
  z-index: 3;
}

.task-media-record-stop {
  display: none;
  position: relative;
  z-index: 3;
  width: 17px;
  height: 17px;
  border-radius: 4px;
  background: #fff;
}

.task-media-record-ring {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
}

.task-media-record-copy strong {
  font-size: 14.4px;
  font-weight: 780;
}

.task-media-record-copy small {
  font-size: 10.8px;
  font-weight: 560;
}

.task-media-record-time {
  min-width: 50px;
  font-size: 12.5px;
  font-weight: 800;
}

.task-media-record-wave {
  height: 18px;
  gap: 3px;
}

.task-media-record-wave i {
  width: 3px;
  height: 5px;
  background: #D84E49;
}

.task-media-record.recording {
  border-color: #D84E49;
  background:
    radial-gradient(circle at 13% 50%, rgba(216, 78, 73, .18), transparent 35%),
    linear-gradient(135deg,
      color-mix(in srgb, #D84E49 18%, var(--surface) 82%),
      color-mix(in srgb, #D84E49 8%, var(--surface-2) 92%));
  box-shadow:
    0 0 0 3px rgba(216, 78, 73, .08),
    0 10px 28px rgba(185, 61, 56, .20);
}

.task-media-record.recording .task-media-mic-svg,
.task-media-record.recording .task-media-record-badge {
  display: none;
}

.task-media-record.recording .task-media-record-stop {
  display: block;
}

.task-media-record.recording .task-media-record-icon {
  background: linear-gradient(145deg, #E8544F, #C83D39);
  box-shadow:
    0 0 0 9px rgba(216, 78, 73, .10),
    0 7px 18px rgba(203, 65, 61, .32);
}

.task-media-record.recording .task-media-record-ring {
  border: 2px solid rgba(216, 78, 73, .42);
  animation: task-record-ring-v116 1.05s ease-out infinite;
}

.task-media-record.recording .task-media-record-copy strong,
.task-media-record.recording .task-media-record-time {
  color: #B93632;
}

.task-media-record.recording .task-media-record-wave i {
  background: #C63D39;
  animation-duration: .58s;
}

@keyframes task-record-ring-v116 {
  0% { transform: scale(.88); opacity: .95; }
  100% { transform: scale(1.58); opacity: 0; }
}

/* Waiting/error text is no longer a dead-end grey box. */
.tl-voice-text-state {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 9px 8px 11px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}

.tl-voice-text-state-copy {
  min-width: 0;
  color: var(--ink-3);
  font-size: 10.5px;
  line-height: 1.35;
}

.tl-voice-text-state.processing {
  border-color: color-mix(in srgb, var(--accent) 18%, var(--line) 82%);
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2) 95%);
}

.tl-voice-text-state.error {
  border-color: color-mix(in srgb, #D84E49 24%, var(--line) 76%);
}

.tl-voice-process-btn {
  flex: 0 0 auto;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, var(--line) 66%);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 9.8px;
  font-weight: 750;
  cursor: pointer;
}

.tl-voice-process-btn:disabled {
  opacity: .55;
  cursor: default;
}

/* =====================================================================
   v122 — inline voice transcript + photo attachment notes.
   ===================================================================== */

/* Voice text is now part of the voice card, not a collapsed dropdown. */
.tl-voice-text-inline {
  margin-top: 8px;
}

.tl-voice-transcript {
  margin: 0;
  padding: 9px 10px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface-2) 95%);
  color: var(--ink-2);
  font-size: 11.2px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.tl-voice-text-inline .tl-voice-text-state {
  min-height: 36px;
  padding: 8px 10px;
  justify-content: flex-start;
  color: var(--ink-3);
  font-size: 10.4px;
}

/* The old Show text / Process text controls are retired. */
.tl-voice-text-dropdown,
.tl-voice-text-toggle,
.tl-voice-text-body,
.tl-voice-process-btn {
  display: none !important;
}

/* Add/Edit Task — one note belongs to each queued photo. */
.task-media-item {
  display: block;
}

.task-media-item + .task-media-item {
  margin-top: 8px;
}

.task-media-item .task-media-row {
  margin: 0;
}

.task-media-photo-note {
  width: calc(100% - 12px);
  min-height: 54px;
  margin: 6px 6px 0;
  padding: 9px 10px;
  resize: vertical;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: var(--surface-2);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.4;
}

.task-media-photo-note:focus {
  border-color: color-mix(in srgb, var(--accent) 40%, var(--line) 60%);
  background: var(--surface);
}

.task-media-photo-note::placeholder {
  color: var(--ink-3);
}

.task-media-saved-photo-note {
  margin: 5px 8px 0;
  padding: 0 3px;
  color: var(--ink-3);
  font-size: 10.5px;
  line-height: 1.4;
  white-space: pre-wrap;
}

/* Thumbnail marker indicates that the photo carries a site note. */
.tl-photo-thumb {
  position: relative;
}

.tl-photo-note-mark {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 2px solid rgba(255,255,255,.86);
  border-radius: 999px;
  background: var(--accent);
  color: transparent;
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* Worker photo viewer — image and its note stay together. */
.tl-photo-viewer-body {
  padding-top: 10px;
}

.tl-photo-viewer-image {
  width: 100%;
  max-height: 64dvh;
  display: block;
  object-fit: contain;
  border-radius: 12px;
  background: #111;
}

.tl-photo-viewer-note {
  margin-top: 10px;
  padding: 10px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
}

.tl-photo-viewer-note strong {
  display: block;
  margin-bottom: 4px;
  color: var(--ink-3);
  font-size: 9.5px;
  font-weight: 750;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tl-photo-viewer-note p {
  margin: 0;
  color: var(--ink-2);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* =====================================================================
   v123 — cleaner media UX.
   ===================================================================== */

/* A little breathing room before Remarks when Updates & Media opens. */
.task-edit-more-body > .task-remarks-field:first-child {
  margin-top: 15px;
}

/* Voice transcript: no floating box. A dotted cue ties text to the track. */
.tl-voice-transcript {
  margin: 4px 3px 0;
  padding: 0 2px 2px;
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 11.8px;
  line-height: 1.52;
}

.tl-voice-transcript::before {
  content: "............";
  display: block;
  height: 13px;
  margin-bottom: 2px;
  overflow: hidden;
  color: color-mix(in srgb, var(--ink-3) 52%, transparent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .18em;
  line-height: 1;
}

.tl-voice-text-inline .tl-voice-text-state {
  margin: 5px 3px 0;
  padding: 5px 2px;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* The old permanent recorder is intentionally gone from the form. */
.task-media-record {
  display: none !important;
}

.task-media-head {
  margin-bottom: 8px;
}

.task-media-add {
  min-width: 112px;
}

/* Add Media / Record Voice popup above the existing Task sheet. */
.task-local-popup-backdrop {
  position: fixed;
  inset: 0;
  z-index: 135;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: rgba(19, 17, 16, .42);
  opacity: 0;
  transition: opacity .16s ease;
}

.task-local-popup-backdrop.open {
  opacity: 1;
}

.task-local-popup {
  width: min(100%, 520px);
  max-height: min(78dvh, 660px);
  overflow: hidden;
  border-radius: 22px 22px 0 0;
  background: var(--option-panel);
  box-shadow: 0 -14px 40px rgba(30, 26, 22, .18);
  transform: translateY(20px);
  transition: transform .17s ease;
}

.task-local-popup-backdrop.open .task-local-popup {
  transform: translateY(0);
}

.task-local-popup-handle {
  width: 38px;
  height: 4px;
  margin: 8px auto 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-3) 30%, transparent);
}

.task-local-popup-head {
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 15px 7px 18px;
  border-bottom: 1px solid var(--divider);
}

.task-local-popup-head > strong {
  color: var(--ink);
  font-size: 15px;
  font-weight: 680;
}

.task-local-popup-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font: inherit;
  font-size: 21px;
  line-height: 1;
}

.task-local-popup-body {
  padding: 10px 14px calc(18px + env(safe-area-inset-bottom));
  overflow-y: auto;
}

/* Add Media choices. */
.task-media-choice {
  width: 100%;
  min-height: 66px;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 8px;
  border: 0;
  border-bottom: 1px solid var(--divider);
  background: transparent;
  color: var(--ink);
  font: inherit;
  text-align: left;
}

.task-media-choice:last-child {
  border-bottom: 0;
}

.task-media-choice-icon {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  background: var(--surface-2);
  color: var(--accent);
}

.task-media-choice-icon.voice {
  background: color-mix(in srgb, #D94F49 9%, var(--surface-2) 91%);
  color: #D94F49;
}

.task-media-choice-icon svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.task-media-choice-icon.voice svg rect {
  fill: currentColor;
  stroke: none;
}

.task-media-choice-copy {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 3px;
}

.task-media-choice-copy strong {
  font-size: 13px;
  font-weight: 700;
}

.task-media-choice-copy small {
  color: var(--ink-3);
  font-size: 10.5px;
  line-height: 1.3;
}

.task-media-choice-arrow {
  color: var(--ink-3);
  font-size: 20px;
}

/* Dedicated voice recording window. */
.task-voice-popup-content {
  min-height: 245px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 18px 10px 26px;
}

.task-voice-popup-record {
  position: relative;
  width: 92px;
  height: 92px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(145deg, #E75B55, #C83E39);
  color: #fff;
  box-shadow: 0 9px 24px rgba(197, 60, 55, .28);
}

.task-voice-popup-record svg {
  width: 36px;
  height: 36px;
}

.task-voice-popup-record.recording {
  box-shadow:
    0 0 0 10px rgba(216, 78, 73, .09),
    0 10px 28px rgba(197, 60, 55, .32);
  animation: task-voice-popup-pulse 1.05s ease-in-out infinite alternate;
}

.task-voice-stop-square {
  width: 27px;
  height: 27px;
  border-radius: 6px;
  background: #fff;
}

.task-voice-popup-time {
  margin-top: 16px;
  color: var(--ink);
  font-size: 22px;
  font-weight: 720;
  font-variant-numeric: tabular-nums;
  letter-spacing: .035em;
}

.task-voice-popup-status {
  margin: 9px 0 0;
  color: var(--ink-3);
  font-size: 11.5px;
  text-align: center;
}

.task-voice-popup-wave {
  height: 22px;
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 11px;
}

.task-voice-popup-wave i {
  width: 3px;
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, #D84E49 45%, var(--ink-3) 55%);
}

.task-voice-popup-record.recording ~ .task-voice-popup-wave i,
.task-voice-popup-content:has(.task-voice-popup-record.recording) .task-voice-popup-wave i {
  animation: task-voice-wave .62s ease-in-out infinite alternate;
  background: #D84E49;
}

.task-voice-popup-wave i:nth-child(2) { animation-delay: -.11s !important; }
.task-voice-popup-wave i:nth-child(3) { animation-delay: -.24s !important; }
.task-voice-popup-wave i:nth-child(4) { animation-delay: -.17s !important; }
.task-voice-popup-wave i:nth-child(5) { animation-delay: -.31s !important; }
.task-voice-popup-wave i:nth-child(6) { animation-delay: -.08s !important; }

@keyframes task-voice-popup-pulse {
  from { transform: scale(.985); }
  to { transform: scale(1.025); }
}

@keyframes task-voice-wave {
  from { height: 5px; }
  to { height: 20px; }
}

/* Attachment note — compact, not another heavy box. */
.task-media-item + .task-media-item {
  margin-top: 10px;
}

.task-attachment-note-editor {
  margin: 3px 7px 0 22px;
  padding: 7px 0 1px;
  border-top: 1px dotted color-mix(in srgb, var(--ink-3) 34%, transparent);
}

.task-attachment-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.task-attachment-note-label {
  color: var(--ink-3);
  font-size: 9.5px;
  font-weight: 720;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.task-attachment-note-mic {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: color-mix(in srgb, #D84E49 7%, var(--surface-2) 93%);
  color: #C64A45;
}

.task-attachment-note-mic svg {
  width: 16px;
  height: 16px;
}

.task-attachment-note-input {
  width: 100%;
  min-height: 40px;
  padding: 4px 36px 5px 0;
  resize: vertical;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  line-height: 1.4;
}

.task-attachment-note-input::placeholder {
  color: var(--ink-3);
}

.task-media-saved-note {
  margin: 5px 8px 0 22px;
  padding: 5px 0 0;
  border-top: 1px dotted color-mix(in srgb, var(--ink-3) 28%, transparent);
  color: var(--ink-3);
  font-size: 10.7px;
  line-height: 1.45;
  white-space: pre-wrap;
}

/* File viewer keeps the note and the file in one place. */
.tl-file-viewer-card {
  display: grid;
  gap: 4px;
  padding: 16px 13px;
  border-radius: 12px;
  background: var(--surface-2);
}

.tl-file-viewer-card strong {
  color: var(--ink-2);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.tl-file-viewer-card small {
  color: var(--ink-3);
  font-size: 10px;
}

.tl-file-viewer-video {
  width: 100%;
  max-height: 58dvh;
  display: block;
  border-radius: 12px;
  background: #111;
}

.tl-file-open-btn {
  margin-top: 13px;
  border-radius: 999px !important;
}

@media (min-width: 640px) {
  .task-local-popup-backdrop {
    align-items: center;
    padding: 24px;
  }

  .task-local-popup {
    border-radius: 20px;
  }

  .task-local-popup-handle {
    display: none;
  }
}

/* =====================================================================
   v124 — phone readability + always-reachable media + centered dialogs.
   ===================================================================== */

/* ----------------------------- Timeline Task Detail readability */
.timeline-detail-sheet .tl-detail-title h2 {
  font-size: 23px;
  line-height: 1.24;
}

.timeline-detail-sheet .tl-detail-area {
  font-size: 18.5px;
}

.timeline-detail-sheet .tl-detail-project {
  font-size: 13.5px;
}

.timeline-detail-sheet .tl-detail-status {
  min-height: 35px;
  font-size: 13px;
}

.timeline-detail-sheet .tl-detail-facts {
  gap: 12px;
}

.timeline-detail-sheet .tl-detail-fact {
  gap: 11px;
  font-size: 14.5px;
  line-height: 1.42;
}

.timeline-detail-sheet .tl-detail-fact svg {
  width: 19px;
  height: 19px;
}

.timeline-detail-sheet .tl-detail-label,
.timeline-detail-sheet .tl-detail-section-head > strong {
  font-size: 13.5px;
  font-weight: 720;
}

.timeline-detail-sheet .tl-detail-remarks {
  font-size: 14.5px;
  line-height: 1.58;
}

.timeline-detail-sheet .tl-media-tile {
  min-height: 68px;
  padding: 10px 27px 10px 11px;
}

.timeline-detail-sheet .tl-media-tile svg {
  width: 23px;
  height: 23px;
}

.timeline-detail-sheet .tl-media-tile strong {
  font-size: 13px;
}

.timeline-detail-sheet .tl-media-tile small {
  font-size: 11.5px;
}

/* ----------------------------- Voice transcript */
.tl-voice-transcript {
  margin: 7px 5px 1px;
  padding: 0;
  background: transparent;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.5;
  font-style: italic;
}

/* Explicitly retire the v123 dotted pseudo-text. */
.tl-voice-transcript::before,
.tl-voice-transcript::after {
  content: none !important;
}

/* ----------------------------- Centered media/list windows on phone */
.tl-media-popup-backdrop,
.task-local-popup-backdrop {
  align-items: center !important;
  justify-content: center;
  padding: 18px;
}

.tl-media-popup,
.task-local-popup {
  width: min(100%, 520px);
  max-height: min(82dvh, 680px);
  border-radius: 20px !important;
  transform: scale(.97) !important;
  box-shadow: 0 18px 55px rgba(28, 24, 21, .24);
}

.tl-media-popup-backdrop.open .tl-media-popup,
.task-local-popup-backdrop.open .task-local-popup {
  transform: scale(1) !important;
}

.tl-media-popup-handle,
.task-local-popup-handle {
  display: none !important;
}

.tl-media-popup-head,
.task-local-popup-head {
  min-height: 58px;
  padding: 8px 14px 8px 18px;
}

.tl-media-popup-head > strong,
.task-local-popup-head > strong {
  font-size: 17px;
  font-weight: 720;
}

.tl-media-popup-close,
.task-local-popup-close {
  width: 38px;
  height: 38px;
  font-size: 23px;
}

.tl-media-popup-body {
  padding: 14px 16px 18px;
}

.tl-media-empty {
  font-size: 12.5px;
}

/* Voice list */
.tl-voice-card {
  padding: 12px;
}

.tl-voice-card + .tl-voice-card {
  margin-top: 11px;
}

.tl-voice-title strong {
  font-size: 13.5px;
}

.tl-voice-player {
  height: 40px;
}

.tl-voice-text-inline .tl-voice-text-state {
  font-size: 12px;
}

/* Photo list/viewer */
.tl-photo-thumb > span {
  padding: 7px 7px 8px;
  font-size: 10.5px;
}

.tl-photo-viewer-note strong {
  font-size: 10.5px;
}

.tl-photo-viewer-note p {
  font-size: 14px;
  line-height: 1.55;
}

/* File list/viewer */
.tl-detail-media-row {
  min-height: 56px;
  padding: 9px 11px;
}

.tl-detail-media-kind {
  font-size: 9.5px;
}

.tl-detail-media-copy strong {
  font-size: 13.5px;
}

.tl-detail-media-copy small {
  font-size: 11.5px;
}

.tl-file-viewer-card strong {
  font-size: 14px;
}

.tl-file-viewer-card small {
  font-size: 11.5px;
}

.tl-file-open-btn {
  min-height: 46px;
  font-size: 14px;
}

/* ----------------------------- Updates & Media readability */
.task-edit-more-toggle {
  min-height: 70px;
}

.task-edit-more-copy strong {
  font-size: 16.5px;
}

.task-edit-more-copy small {
  font-size: 12.2px;
}

.task-edit-more-body {
  padding-left: 17px;
  padding-right: 17px;
}

.task-edit-more .field > span,
.task-media-head > span {
  font-size: 12.5px !important;
  font-weight: 750 !important;
  letter-spacing: .065em !important;
}

.task-remarks-input {
  min-height: 116px;
  font-size: 16px;
}

.task-media-add {
  min-height: 39px;
  padding-inline: 14px;
  font-size: 13.5px;
}

.task-media-list {
  gap: 9px;
}

.task-media-row {
  min-height: 58px;
  padding: 7px 8px 7px 10px;
}

.task-media-kind {
  flex-basis: 48px;
  min-height: 31px;
  font-size: 9.5px;
}

.task-media-copy strong {
  font-size: 13.5px;
  font-weight: 650;
}

.task-media-copy small {
  font-size: 11.2px;
}

.task-media-remove {
  min-height: 36px;
  padding-inline: 10px;
  font-size: 12.5px;
}

/* Attachment note */
.task-attachment-note-editor {
  margin-left: 16px;
  padding-top: 9px;
}

.task-attachment-note-label {
  font-size: 10.8px;
}

.task-attachment-note-mic {
  width: 36px;
  height: 36px;
}

.task-attachment-note-mic svg {
  width: 18px;
  height: 18px;
}

.task-attachment-note-input {
  min-height: 50px;
  padding-top: 7px;
  padding-bottom: 7px;
  font-size: 14.5px;
  line-height: 1.45;
}

/* Per-file OK confirmation */
.task-attachment-confirm-row,
.task-attachment-confirmed {
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 5px 7px 0 16px;
  padding-top: 7px;
  border-top: 1px dotted color-mix(in srgb, var(--ink-3) 30%, transparent);
}

.task-attachment-confirm-copy,
.task-attachment-ready {
  min-width: 0;
  color: var(--ink-3);
  font-size: 12.5px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.task-media-item.confirmed .task-media-row {
  border-color: color-mix(in srgb, var(--accent) 24%, var(--line) 76%);
}

.task-attachment-ok {
  min-width: 76px;
  min-height: 38px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-ink);
  font: inherit;
  font-size: 13.5px;
  font-weight: 750;
}

.task-attachment-edit-note {
  min-width: 58px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
}

/* Add Media chooser readability */
.task-media-choice {
  min-height: 76px;
  gap: 14px;
  padding: 11px 9px;
}

.task-media-choice-icon {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
}

.task-media-choice-icon svg {
  width: 25px;
  height: 25px;
}

.task-media-choice-copy strong {
  font-size: 15px;
}

.task-media-choice-copy small {
  font-size: 12.3px;
  line-height: 1.38;
}

.task-media-choice-arrow {
  font-size: 22px;
}

/* Recording popup */
.task-voice-popup-time {
  font-size: 25px;
}

.task-voice-popup-status {
  font-size: 13px;
}

/* ----------------------------- Always-reachable + Media footer */
.task-edit-actions-with-media {
  display: grid !important;
  grid-template-columns: 86px minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 8px;
}

.task-edit-actions-with-media .btn {
  min-width: 0;
  padding-inline: 10px;
}

.task-edit-actions-with-media .task-quick-media {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line) 45%);
  background: color-mix(in srgb, var(--accent) 6%, var(--surface) 94%);
  color: var(--accent);
  font-size: 13px;
  font-weight: 750;
}

/* The old save-warning sentence is intentionally gone. */
.task-media-note[hidden] {
  display: none !important;
}

@media (max-width: 380px) {
  .task-edit-actions-with-media {
    grid-template-columns: 78px minmax(0, .82fr) minmax(0, 1.18fr);
    gap: 7px;
  }

  .task-edit-actions-with-media .btn {
    font-size: 13px;
    padding-inline: 7px;
  }

  .tl-media-popup-backdrop,
  .task-local-popup-backdrop {
    padding: 13px;
  }
}

/* =====================================================================
   v125 — full-screen media + simplified task editor.
   ===================================================================== */

/* Transcript sits immediately below the voice player. */
.tl-voice-text-inline {
  margin-top: 1px !important;
}

.tl-voice-transcript {
  margin: 1px 5px 0 !important;
  padding: 0 1px 1px !important;
  font-size: 13.8px;
  line-height: 1.42;
}

/* + Add Media is the single, obvious media entry point. */
.task-media-head {
  min-height: 48px;
  align-items: center;
  margin-top: 2px;
  margin-bottom: 10px;
}

.task-media-head > span {
  font-size: 13px !important;
}

.task-media-add {
  min-width: 132px;
  min-height: 42px;
  padding: 0 17px;
  border: 0 !important;
  border-radius: 999px !important;
  background: var(--accent) !important;
  color: var(--accent-ink) !important;
  box-shadow: 0 4px 12px color-mix(in srgb, var(--accent) 20%, transparent);
  font-size: 13.8px !important;
  font-weight: 760 !important;
}

/* Centered media lists must scroll rather than clip attachments. */
.tl-media-popup-backdrop,
.task-local-popup-backdrop {
  padding: 12px !important;
}

.tl-media-popup,
.task-local-popup {
  width: min(100%, 540px) !important;
  max-width: calc(100vw - 24px) !important;
  max-height: calc(100dvh - 24px) !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden !important;
}

.tl-media-popup-head,
.task-local-popup-head {
  flex: 0 0 auto;
}

.tl-media-popup-body,
.task-local-popup-body {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.tl-detail-media-row,
.task-media-row,
.task-media-item,
.tl-voice-card {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.tl-detail-media-copy,
.task-media-copy,
.task-media-open {
  min-width: 0;
}

.tl-detail-media-copy strong,
.task-media-copy strong {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

/* Full-screen image / PDF viewer. */
.tl-fullscreen-media {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  flex-direction: column;
  background: rgba(8, 8, 8, .97);
  color: #fff;
  opacity: 0;
  transition: opacity .15s ease;
}

.tl-fullscreen-media.open {
  opacity: 1;
}

.tl-fullscreen-media-top {
  flex: 0 0 auto;
  min-height: calc(54px + env(safe-area-inset-top));
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  padding:
    calc(8px + env(safe-area-inset-top))
    14px
    8px
    16px;
  background: rgba(10, 10, 10, .82);
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.tl-fullscreen-media-title {
  min-width: 0;
  padding-bottom: 6px;
  overflow: hidden;
  font-size: 14px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tl-fullscreen-media-close {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font: inherit;
  font-size: 25px;
  line-height: 1;
}

.tl-fullscreen-photo-stage {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
  touch-action: pinch-zoom;
}

.tl-fullscreen-photo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}

.tl-fullscreen-media-note {
  flex: 0 0 auto;
  max-height: 28dvh;
  overflow-y: auto;
  padding: 10px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(17,17,17,.92);
  border-top: 1px solid rgba(255,255,255,.12);
}

.tl-fullscreen-media-note strong {
  display: block;
  margin-bottom: 5px;
  color: rgba(255,255,255,.64);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.tl-fullscreen-media-note p {
  margin: 0;
  color: #fff;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
}

.tl-fullscreen-pdf-frame {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  border: 0;
  background: #fff;
}

/* No second Open File step. */
.tl-file-open-btn {
  display: none !important;
}

/* Progress control retired for now. */
.task-progress-field {
  display: none !important;
}

/* Footer stays simple: Cancel + Save/Create only. */
.task-edit-actions .task-quick-media,
.task-edit-actions-with-media .task-quick-media {
  display: none !important;
}

@media (max-width: 420px) {
  .task-media-add {
    min-width: 126px;
    font-size: 13.5px !important;
  }

  .tl-media-popup,
  .task-local-popup {
    max-width: calc(100vw - 18px) !important;
    max-height: calc(100dvh - 18px) !important;
  }

  .tl-media-popup-backdrop,
  .task-local-popup-backdrop {
    padding: 9px !important;
  }
}

/* =====================================================================
   v126 — attachment voice instructions + refined full-screen media.
   ===================================================================== */

/* + Add Media gets its own row ABOVE the ATTACHMENTS heading. */
.task-media-add-row {
  display: flex;
  justify-content: flex-end;
  margin: 2px 0 11px;
}

.task-media-head {
  min-height: 28px !important;
  margin: 0 0 9px !important;
}

.task-media-add {
  min-width: 142px;
  min-height: 44px;
}

/* PDF badge needs stronger contrast than the list background. */
.tl-detail-media-kind.pdf {
  background: color-mix(in srgb, var(--ink-2) 18%, var(--surface-2) 82%) !important;
  color: var(--ink-2) !important;
  border: 1px solid color-mix(in srgb, var(--ink-2) 14%, var(--line) 86%);
  font-weight: 800;
}

/* ----------------------------- Full-screen media: no header chrome */
.tl-fullscreen-photo-viewer {
  background: #E9E8E5 !important;
  color: var(--ink);
}

.tl-fullscreen-media-close.plain {
  position: fixed;
  z-index: 4;
  top: calc(10px + env(safe-area-inset-top));
  right: 14px;
  width: auto;
  height: auto;
  padding: 2px 5px;
  border: 0;
  border-radius: 0 !important;
  background: transparent !important;
  color: #3F3B37;
  box-shadow: none !important;
  font-size: 36px;
  font-weight: 300;
  line-height: 1;
  text-shadow: 0 1px 2px rgba(255,255,255,.8);
}

.tl-fullscreen-photo-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding:
    calc(52px + env(safe-area-inset-top))
    0
    calc(20px + env(safe-area-inset-bottom));
}

.tl-fullscreen-photo-stage {
  min-height: 58dvh;
  height: auto !important;
  padding: 0 12px;
  background: transparent;
  overflow: visible;
}

.tl-fullscreen-photo {
  width: 100%;
  height: auto !important;
  max-height: 72dvh;
  object-fit: contain;
  border-radius: 0;
  background: transparent;
}

.tl-fullscreen-photo-detail {
  padding: 13px 18px 2px;
  background: transparent;
}

.tl-fullscreen-photo-note {
  margin: 0 0 10px;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
  white-space: pre-wrap;
}

/* PDF is the whole viewport. No title/header area. */
.tl-fullscreen-pdf {
  background: #fff !important;
}

.tl-fullscreen-pdf-frame {
  position: absolute;
  inset: 0;
  width: 100vw !important;
  height: 100dvh !important;
  min-height: 100dvh !important;
  border: 0;
  background: #fff;
}

.tl-fullscreen-media-close.pdf-close {
  color: #111;
  text-shadow:
    0 1px 2px rgba(255,255,255,.95),
    0 0 5px rgba(255,255,255,.85);
}

/* PDF note/instructions float at bottom without consuming PDF viewport. */
.tl-pdf-note-tray {
  position: fixed;
  z-index: 3;
  left: 12px;
  right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  max-height: 30dvh;
  overflow-y: auto;
  padding: 11px 12px;
  border-radius: 13px;
  background: rgba(242, 241, 238, .94);
  box-shadow: 0 6px 22px rgba(0,0,0,.16);
  backdrop-filter: blur(10px);
}

.tl-pdf-note-text {
  margin: 0 0 9px;
  color: #393632;
  font-size: 13.5px;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ----------------------------- Voice instructions */
.tl-attachment-instructions,
.task-instruction-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tl-attachment-instructions {
  margin-top: 8px;
}

.task-instruction-list {
  margin-top: 8px;
}

.tl-attachment-instruction,
.task-instruction-chip {
  min-height: 37px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--line) 78%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface) 95%);
  color: var(--ink-2);
  font: inherit;
  font-size: 11.5px;
  font-weight: 680;
}

.tl-attachment-instruction svg,
.task-instruction-chip svg {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  color: var(--accent);
}

.tl-attachment-instruction.playing,
.task-instruction-chip.playing {
  background: color-mix(in srgb, var(--accent) 13%, var(--surface) 87%);
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line) 55%);
}

.task-instruction-chip-wrap {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.task-instruction-remove {
  width: 27px;
  height: 27px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--ink-3);
  font: inherit;
  font-size: 17px;
}

.task-add-instruction {
  min-height: 35px;
  margin-top: 9px;
  padding: 0 11px;
  border: 1px dashed color-mix(in srgb, var(--accent) 40%, var(--line) 60%);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 11.5px;
  font-weight: 720;
}

/* Text note stays first. Voice instruction controls sit beneath it. */
.task-attachment-note-input {
  margin-bottom: 1px;
}

/* Cancel + OK are explicit attachment-local actions. */
.task-attachment-confirm-row {
  align-items: center;
}

.task-attachment-confirm-buttons {
  display: flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
}

.task-attachment-cancel {
  min-width: 72px;
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
}

/* Existing saved voice instructions under attachment text. */
.task-media-saved-note + .task-instruction-list,
.task-media-row + .task-instruction-list {
  margin: 7px 8px 0 22px;
}

/* Remove old full-screen header line if any earlier CSS survives. */
.tl-fullscreen-media-top {
  display: none !important;
}

/* No divider between photo and note. */
.tl-fullscreen-media-note {
  border-top: 0 !important;
}

@media (max-width: 390px) {
  .task-attachment-confirm-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .task-attachment-confirm-buttons {
    width: 100%;
    justify-content: flex-end;
  }

  .task-media-add {
    min-width: 136px;
  }

  .tl-pdf-note-tray {
    left: 8px;
    right: 8px;
  }
}

/* v129 — clearer file rows, file-first viewers and sharp PDF zoom. */
.tl-detail-media-row { background: color-mix(in srgb, var(--surface-2) 82%, var(--ink-3) 18%) !important; border: 1px solid color-mix(in srgb, var(--line) 78%, var(--ink-3) 22%); }
.tl-detail-media-icon { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--surface) 64%, var(--ink-3) 36%); color: var(--ink-2); }
.tl-detail-media-icon.pdf { background: color-mix(in srgb, #C94A43 16%, var(--surface) 84%) !important; color: #AE3C37 !important; }
.tl-detail-media-icon svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.7; }.tl-detail-media-icon .tl-file-icon-fill { fill: currentColor; stroke: none; }
.tl-file-viewer-body { display:flex; flex-direction:column; gap:0; padding-bottom:max(14px, env(safe-area-inset-bottom)); }.tl-file-viewer-video,.tl-file-viewer-frame { width:100%; display:block; flex:0 0 auto; background:#161616; }.tl-file-viewer-video { max-height:68dvh; }.tl-file-viewer-frame { height:min(68dvh,680px); border:0; }.tl-file-viewer-detail { padding:14px 15px 2px; background:var(--surface); }.tl-file-viewer-detail p { margin:0; color:var(--ink-2); font-size:14px; line-height:1.55; white-space:pre-wrap; }
.tl-pdf-page-scroll { overflow:auto !important; padding-bottom:calc(18px + env(safe-area-inset-bottom)); }.tl-pdf-pages { min-width:100%; }.tl-pdf-page-canvas { width:var(--tl-pdf-page-width) !important; height:var(--tl-pdf-page-height) !important; max-width:none !important; }.tl-pdf-attachment-detail { width:min(100%,780px); box-sizing:border-box; margin:14px auto 0; padding:13px 16px 16px; background:#F4F3F0; color:#393632; box-shadow:0 1px 5px rgba(0,0,0,.11); }.tl-pdf-attachment-detail .tl-attachment-instructions { margin-top:9px; }.tl-fullscreen-pdf-frame.fallback { position:relative !important; inset:auto !important; display:block; width:100% !important; height:82dvh !important; min-height:82dvh !important; }
.tl-pdf-zoom-controls { position:fixed; z-index:5; top:calc(12px + env(safe-area-inset-top)); left:14px; display:flex; align-items:center; overflow:hidden; border:1px solid rgba(0,0,0,.14); border-radius:11px; background:rgba(255,255,255,.94); box-shadow:0 2px 10px rgba(0,0,0,.16); }.tl-pdf-zoom-controls button { width:34px; height:34px; padding:0; border:0; background:transparent; color:#393632; font:inherit; font-size:21px; line-height:1; }.tl-pdf-zoom-controls button:disabled { opacity:.32; }.tl-pdf-zoom-controls span { min-width:43px; color:#393632; font-size:11px; font-weight:750; text-align:center; }
.task-instruction-remove { width:30px !important; height:30px !important; min-width:30px !important; min-height:30px !important; flex:0 0 30px !important; aspect-ratio:1 / 1; border-radius:50% !important; }

/* =====================================================================
   v127 — width-fit media + editable notes + playable edit-sheet voice.
   ===================================================================== */

/* PDF fills viewport and requests page-width from the browser PDF viewer. */
.tl-fullscreen-pdf-frame {
  width: 100vw !important;
  height: 100dvh !important;
}

/* Photo: always fill available width. Tall photos scroll vertically. */
.tl-fullscreen-photo-scroll {
  padding:
    calc(54px + env(safe-area-inset-top))
    20px
    calc(24px + env(safe-area-inset-bottom)) !important;
}

.tl-fullscreen-photo-stage {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  overflow: visible !important;
}

.tl-fullscreen-photo {
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  display: block;
  object-fit: contain;
}

.tl-fullscreen-photo-detail {
  padding: 14px 2px 4px !important;
}

.tl-fullscreen-photo-note {
  margin-bottom: 13px;
}

/* Slightly darker separation before attachment note controls. */
.task-attachment-note-editor {
  margin-top: 7px;
  padding-top: 13px !important;
  border-top:
    1px solid
    color-mix(in srgb, var(--ink-3) 50%, var(--line) 50%) !important;
}

.task-attachment-note-editor.saved-edit {
  margin-left: 16px;
  margin-right: 7px;
}

/* Voice Message is actual retained audio, so use this wording rather than
   Voice to text. */
.task-attachment-note-mic.voice-message,
.task-attachment-note-mic {
  width: auto !important;
  min-width: 112px;
  height: 36px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, #D84E49 30%, var(--line) 70%);
  background: color-mix(in srgb, #D84E49 10%, var(--surface) 90%);
  color: #C74440;
  font-size: 11.5px;
  font-weight: 730;
}

.task-attachment-note-mic svg {
  flex: 0 0 17px;
}

/* Keep + Voice Message away from the divider. */
.task-add-instruction {
  margin-top: 15px !important;
  min-height: 38px;
}

/* Saved photo/file can return to note editing any time. */
.task-existing-attachment-edit {
  min-height: 35px;
  margin: 9px 8px 0 22px;
  padding: 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font: inherit;
  font-size: 11.8px;
  font-weight: 720;
}

.task-existing-attachment-edit-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 13px;
  padding-top: 10px;
  border-top:
    1px solid
    color-mix(in srgb, var(--ink-3) 42%, var(--line) 58%);
}

/* Voice attachment is playable in Edit before delete decisions. */
.task-media-voice-player {
  width: calc(100% - 30px);
  height: 38px;
  display: block;
  margin: 6px 8px 3px 22px;
}

.task-media-voice-player.queued {
  margin-bottom: 7px;
}

.task-media-voice-player.unavailable {
  opacity: .45;
}

.task-media-saved-note + .task-instruction-list,
.task-attachment-note-input + .task-instruction-list {
  margin-top: 11px !important;
}

@media (max-width: 390px) {
  .tl-fullscreen-photo-scroll {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .task-attachment-note-mic.voice-message,
  .task-attachment-note-mic {
    min-width: 106px;
    padding-inline: 9px;
    font-size: 11px;
  }
}

/* =====================================================================
   v128 — true PDF width-fit + corrected attachment note controls.
   ===================================================================== */

/* Keep the GREEN field STATUS; the old grey section heading is empty. */
.task-progress-section > .task-edit-section-title:empty {
  display: none !important;
}

.task-progress-section > .field > span:first-child {
  display: flex !important;
  color: var(--accent) !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: .09em !important;
  text-transform: uppercase;
  margin-bottom: 7px;
}

/* More space between file row and the saved-note divider. */
.task-attachment-note-editor.saved-edit {
  margin-top: 15px !important;
  padding-top: 16px !important;
}

.task-media-item.queued .task-attachment-note-editor {
  margin-top: 11px !important;
  padding-top: 14px !important;
}

/* Divider is slightly darker. */
.task-attachment-note-editor {
  border-top:
    1px solid
    color-mix(in srgb, var(--ink-3) 58%, var(--line) 42%) !important;
}

/* Red mic is note DICTATION: Voice to text. */
.task-attachment-note-mic.voice-to-text,
.task-attachment-note-mic {
  width: auto !important;
  min-width: 108px;
  height: 36px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 1px solid color-mix(in srgb, #D84E49 30%, var(--line) 70%);
  border-radius: 999px;
  background: color-mix(in srgb, #D84E49 10%, var(--surface) 90%);
  color: #C74440;
  font-size: 11.5px;
  font-weight: 730;
}

/* Actual audio stays a separate + Voice Instruction action. */
.task-add-instruction {
  margin-top: 17px !important;
}

/* Center × vertically with the Voice Instruction pill. */
.task-instruction-chip-wrap {
  min-height: 37px;
  align-items: center !important;
}

.task-instruction-remove {
  width: 31px !important;
  height: 37px !important;
  display: grid !important;
  place-items: center !important;
  align-self: center !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  font-size: 18px !important;
}

/* New files first, old saved files below. */
.task-media-list {
  display: flex !important;
  flex-direction: column;
  gap: 9px;
}

.task-media-item.queued {
  order: -1;
}

/* ----------------------------- PDF.js: every page exactly viewport width */
.tl-fullscreen-pdf {
  background: #D9D8D5 !important;
}

.tl-pdf-page-scroll {
  position: absolute;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: #D9D8D5;
}

.tl-pdf-page-canvas {
  width: 100vw !important;
  height: auto !important;
  display: block;
  margin: 0 auto 2px;
  background: #fff;
}

.tl-pdf-loading {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  color: #5F5B56;
  font-size: 13px;
}

.tl-fullscreen-pdf-frame.fallback {
  position: absolute;
  inset: 0;
  width: 100vw !important;
  height: 100dvh !important;
  border: 0;
  background: #fff;
}

@media (max-width: 390px) {
  .task-attachment-note-mic.voice-to-text,
  .task-attachment-note-mic {
    min-width: 102px;
    padding-inline: 8px;
    font-size: 11px;
  }
}

/* v130 — final media/detail-sheet spacing refinements. */
.timeline-detail-sheet .tl-detail-actions { margin-top:46px !important; margin-bottom:28px !important; padding-top:22px; border-top:1px solid color-mix(in srgb,var(--line) 72%,var(--ink-3) 28%); }
.tl-media-popup-body .tl-detail-media-row,.tl-detail-media-row,.task-media-row,.tl-voice-card { background:color-mix(in srgb,var(--surface-2) 94%,var(--ink-3) 6%) !important; }
.tl-media-popup-body .tl-detail-media-row,.tl-detail-media-list .tl-detail-media-row { margin-bottom:12px; }.tl-media-popup-body .tl-detail-media-row:last-child,.tl-detail-media-list .tl-detail-media-row:last-child { margin-bottom:0; }
.tl-fullscreen-photo-scroll { overflow-y:auto !important; }.tl-fullscreen-photo-note { margin-bottom:5px !important; }.tl-fullscreen-photo-detail .tl-attachment-instructions { margin-top:0 !important; }
.tl-pdf-page-scroll { overflow:auto !important; }.tl-fullscreen-pdf-frame.native { position:relative !important; inset:auto !important; display:block; width:100% !important; height:100dvh !important; min-height:100dvh !important; }.tl-pdf-attachment-detail { position:sticky; z-index:4; bottom:0; width:100%; margin:0 !important; padding:12px 16px calc(14px + env(safe-area-inset-bottom)); border-top:1px solid rgba(0,0,0,.12); box-shadow:0 -3px 14px rgba(0,0,0,.12); }
.task-edit-actions { margin-top:46px !important; }.task-edit-actions + .btn.danger { margin-top:16px !important; }
.task-instruction-remove { width:32px !important; height:32px !important; min-width:32px !important; min-height:32px !important; flex:0 0 32px !important; border-radius:50% !important; background:#87827B !important; color:#FFFFFF !important; border:0 !important; box-shadow:0 1px 3px rgba(0,0,0,.16); }

/* v131 — footer spacing is below the divider, not above it. */
.timeline-detail-sheet .tl-detail-actions { margin-top:32px !important; padding-top:30px !important; margin-bottom:28px !important; }
.task-edit-actions { margin-top:32px !important; padding-top:26px !important; }
.task-edit-actions + .btn.danger { margin-top:16px !important; }

/* Tall images remain a continuous scroll from image to note/instruction. */
.tl-fullscreen-photo-scroll { overflow-y:auto !important; }
.tl-fullscreen-photo { max-height:none !important; height:auto !important; }
.tl-fullscreen-photo-detail .tl-attachment-instructions { margin-top:0 !important; }

/* Native PDF opens width-fit; its note remains directly below as a sticky footer. */
.tl-fullscreen-pdf-frame.native { width:100% !important; height:100dvh !important; }
.tl-pdf-attachment-detail { position:sticky; bottom:0; z-index:5; width:100%; margin:0 !important; }

/* Voice-instruction delete control: light grey, high contrast, perfect circle. */
.task-instruction-remove { width:36px !important; height:36px !important; min-width:36px !important; min-height:36px !important; flex:0 0 36px !important; aspect-ratio:1 / 1; border-radius:50% !important; background:#D7D4CF !important; color:#5F5B56 !important; border:0 !important; box-shadow:none !important; }

/* v132 — controlled PDF, full-screen video and scrolling media. */
.tl-fullscreen-pdf-frame.native { display:none !important; }
.tl-pdf-page-scroll { overflow:auto !important; }
.tl-pdf-page-canvas { width:var(--tl-pdf-page-width) !important; height:var(--tl-pdf-page-height) !important; max-width:none !important; }
.tl-pdf-zoom-controls { display:flex !important; }
.tl-fullscreen-photo-scroll { display:block !important; height:100dvh; overflow-y:auto !important; }
.tl-fullscreen-photo-stage { display:block !important; min-height:0 !important; }
.tl-fullscreen-photo { max-height:none !important; height:auto !important; }
.task-edit-more-body { padding-top:30px !important; }
.task-instruction-remove { background:#D7D4CF !important; color:#5F5B56 !important; border-radius:50% !important; }

/* Video uses the same edge-to-edge viewing space as photo media. */
.tl-media-popup:has(.tl-file-viewer-video) { width:100vw !important; max-width:100vw !important; height:100dvh !important; max-height:100dvh !important; border-radius:0 !important; }
.tl-media-popup:has(.tl-file-viewer-video) .tl-media-popup-body { padding:0 0 calc(16px + env(safe-area-inset-bottom)) !important; }
.tl-media-popup:has(.tl-file-viewer-video) .tl-file-viewer-video { width:100%; min-height:calc(100dvh - 88px); max-height:none; background:#000; object-fit:contain; }

/* v133 — full-screen media finishing details. */
.tl-media-popup:has(.tl-file-viewer-video) { width:calc(100vw - 24px) !important; max-width:calc(100vw - 24px) !important; height:calc(100dvh - 24px) !important; max-height:calc(100dvh - 24px) !important; border-radius:20px !important; }
.tl-media-popup:has(.tl-file-viewer-video) .tl-file-viewer-video { min-height:calc(100dvh - 112px); }

/* v134 — one true viewer surface, independent media scroll, screen footer. */
.tl-media-popup-backdrop:has(.tl-file-viewer-video) { padding:0 !important; }
.tl-media-popup:has(.tl-file-viewer-video) { position:fixed !important; inset:0 !important; width:100vw !important; max-width:none !important; height:100dvh !important; max-height:none !important; border-radius:0 !important; background:#E9E8E5 !important; }
.tl-media-popup:has(.tl-file-viewer-video) .tl-media-popup-handle { display:none !important; }
.tl-media-popup:has(.tl-file-viewer-video) .tl-media-popup-head { position:absolute; z-index:4; top:0; left:0; right:0; height:60px; padding:0 16px; background:transparent; border:0; pointer-events:none; }.tl-media-popup:has(.tl-file-viewer-video) .tl-media-popup-head strong { display:none; }.tl-media-popup:has(.tl-file-viewer-video) .tl-media-popup-close { pointer-events:auto; margin-left:auto; background:transparent; color:#3F3B37; font-size:36px; }
.tl-media-popup:has(.tl-file-viewer-video) .tl-media-popup-body { padding:60px 20px 20px !important; }.tl-media-popup:has(.tl-file-viewer-video) .tl-file-viewer-video { min-height:0 !important; max-height:calc(100dvh - 80px) !important; height:auto; border-radius:0; }
.tl-fullscreen-photo-scroll { position:fixed !important; inset:0 !important; height:100dvh !important; overflow-y:auto !important; overscroll-behavior:contain; }.tl-fullscreen-photo-stage { min-height:0 !important; }.tl-fullscreen-photo { max-height:none !important; height:auto !important; }
.tl-pdf-attachment-detail { position:fixed !important; z-index:8 !important; left:0; right:0; bottom:0; width:100% !important; margin:0 !important; box-shadow:none !important; }
.tl-attachment-instruction-wrap { display:inline-flex; align-items:center; gap:6px; }.tl-attachment-instruction-remove { width:32px; height:32px; min-width:32px; display:grid; place-items:center; padding:0; border:0; border-radius:50%; background:#D7D4CF; color:#5F5B56; font:inherit; font-size:20px; line-height:1; }

/* v136 — viewer footer and edit-sheet cleanup. */
.tl-attachment-instruction-remove { display:none !important; }
.tl-file-viewer-detail,.tl-fullscreen-photo-detail,.tl-pdf-attachment-detail { background:#E9E8E5 !important; }
.tl-pdf-attachment-detail { position:fixed !important; top:auto !important; bottom:0 !important; left:0 !important; right:0 !important; }
.tl-fullscreen-photo-scroll { position:fixed !important; inset:0 !important; overflow-y:scroll !important; touch-action:pan-y !important; }.tl-fullscreen-photo-stage,.tl-fullscreen-photo { height:auto !important; max-height:none !important; }
.task-edit-more { margin-top:36px !important; }.sheet-actions.task-edit-actions + .btn.danger { margin:8px auto 0 !important; }
.tl-pdf-attachment-detail { position:sticky !important; bottom:0 !important; box-shadow:none !important; }
.tl-fullscreen-photo-scroll { position:absolute !important; inset:0 !important; display:block !important; overflow-y:scroll !important; -webkit-overflow-scrolling:touch; }
.tl-fullscreen-photo-stage { display:block !important; min-height:0 !important; height:auto !important; }
.tl-fullscreen-photo { display:block !important; width:100% !important; max-height:none !important; height:auto !important; }
.task-edit-actions + .btn.danger { margin-top:8px !important; }

/* v136 — stable, shared full-screen media behaviour. */
/* The scroll element is the only gesture surface for tall photos and videos. */
.tl-fullscreen-photo-viewer {
  background:#E9E8E5 !important;
  overflow:hidden !important;
}
.tl-fullscreen-photo-viewer > .tl-fullscreen-photo-scroll {
  position:absolute !important;
  inset:0 !important;
  display:block !important;
  box-sizing:border-box !important;
  overflow-x:hidden !important;
  overflow-y:auto !important;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
  touch-action:pan-y !important;
  padding:74px 20px calc(22px + env(safe-area-inset-bottom)) !important;
}
.tl-fullscreen-photo-viewer .tl-fullscreen-photo-stage {
  display:block !important;
  width:100% !important;
  min-height:0 !important;
  height:auto !important;
}
.tl-fullscreen-photo-viewer .tl-fullscreen-photo {
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-height:none !important;
  object-fit:contain !important;
}
.tl-fullscreen-photo-viewer .tl-fullscreen-photo-detail {
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:16px 0 0 !important;
  background:#E9E8E5 !important;
}
.tl-fullscreen-photo-viewer .tl-fullscreen-media-close {
  z-index:12 !important;
  font-weight:400 !important;
}

/* Video uses exactly the photo-viewer frame and the same note footer. */
.tl-fullscreen-video-stage { background:#000; }
.tl-fullscreen-video {
  display:block;
  width:100%;
  max-height:calc(100dvh - 126px);
  min-height:220px;
  background:#000;
  object-fit:contain;
}

/* PDF pages stay width-fit at 100%, render sharply at every zoom level, and
   reserve room for a footer that remains at the bottom of the screen. */
.tl-fullscreen-pdf .tl-pdf-page-scroll {
  position:absolute !important;
  inset:0 !important;
  overflow:auto !important;
  box-sizing:border-box;
  padding:64px 0 150px !important;
  background:#E9E8E5;
}
.tl-fullscreen-pdf .tl-pdf-pages { width:100% !important; min-width:100% !important; }
.tl-fullscreen-pdf .tl-pdf-page-canvas {
  display:block !important;
  width:var(--tl-pdf-page-width) !important;
  height:var(--tl-pdf-page-height) !important;
  max-width:none !important;
  margin:0 auto 12px !important;
  background:#fff;
}
.tl-fullscreen-pdf .tl-pdf-attachment-detail {
  position:fixed !important;
  z-index:20 !important;
  top:auto !important;
  right:0 !important;
  bottom:0 !important;
  left:0 !important;
  width:100% !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:12px 16px calc(14px + env(safe-area-inset-bottom)) !important;
  background:#E9E8E5 !important;
  border-top:1px solid rgba(0,0,0,.12);
  box-shadow:none !important;
}
.tl-fullscreen-pdf .tl-pdf-zoom-controls {
  position:fixed !important;
  z-index:21 !important;
  top:14px !important;
  right:16px !important;
  bottom:auto !important;
}

/* Extra separation from Updates & Media to the actions/footer divider. */
.task-edit-more { margin-bottom:44px !important; }

/* v137 — Chrome menu layering, touch-first media and sheet spacing. */

/* Chrome paints the sticky ruler/today line in its own layer. Give the open
   filter an explicit parent stacking layer so the calendar cannot cover it. */
#timelineScopeBar {
  position:relative !important;
  z-index:20 !important;
  overflow:visible !important;
}
#timelineScopeBar .roll-select.open { z-index:22 !important; }
#timelineScopeBar .roll-select.open .roll-menu {
  z-index:23 !important;
  isolation:isolate;
}
#vwTimeline .gantt,
#ganttScroll { position:relative; z-index:1; }

/* A consistent thin-line close icon in every media viewer. */
.tl-fullscreen-media-close.plain,
.tl-media-popup-close,
.task-local-popup-close {
  position:relative !important;
  width:34px !important;
  height:34px !important;
  min-width:34px !important;
  min-height:34px !important;
  padding:0 !important;
  font-size:0 !important;
  line-height:0 !important;
}
.tl-fullscreen-media-close.plain::before,
.tl-fullscreen-media-close.plain::after,
.tl-media-popup-close::before,
.tl-media-popup-close::after,
.task-local-popup-close::before,
.task-local-popup-close::after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:22px;
  height:1px;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.tl-fullscreen-media-close.plain::after,
.tl-media-popup-close::after,
.task-local-popup-close::after {
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* Media begins just below the close control. Touching the photo itself now
   pans the scroll container instead of starting image drag/selection. */
.tl-fullscreen-photo-viewer > .tl-fullscreen-photo-scroll {
  padding-top:calc(50px + env(safe-area-inset-top)) !important;
}
.tl-fullscreen-photo-viewer .tl-fullscreen-photo {
  pointer-events:none !important;
  user-select:none !important;
  -webkit-user-select:none !important;
  -webkit-user-drag:none !important;
}
.tl-fullscreen-video {
  touch-action:pan-y !important;
  user-select:none;
  -webkit-user-select:none;
}

/* The PDF starts width-fit. Two-finger pinch performs the zoom and only
   nearby pages are rasterized, avoiding iOS maximum-canvas instability. */
.tl-fullscreen-pdf .tl-pdf-zoom-controls { display:none !important; }
.tl-fullscreen-pdf .tl-pdf-page-scroll {
  padding:calc(50px + env(safe-area-inset-top)) 0
    calc(var(--tl-pdf-footer-height, 0px) + 12px) !important;
  touch-action:pan-x pan-y !important;
  overscroll-behavior:contain;
}
.tl-fullscreen-pdf .tl-pdf-pages {
  position:relative;
  transform-origin:0 0;
}
.tl-fullscreen-pdf .tl-pdf-page {
  position:relative;
  display:block;
  margin:0 auto 12px;
  background:#fff;
}
.tl-fullscreen-pdf .tl-pdf-page-canvas {
  width:100% !important;
  height:100% !important;
  margin:0 !important;
  pointer-events:none !important;
}
.tl-fullscreen-pdf .tl-pdf-attachment-detail {
  max-height:34dvh;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
}

/* Voice removal is strictly an Edit Task operation. */
.tl-fullscreen-media .tl-attachment-instruction-remove,
.tl-media-popup .tl-attachment-instruction-remove,
.task-local-popup .tl-attachment-instruction-remove {
  display:none !important;
}
.task-edit-more .task-instruction-remove {
  display:grid !important;
}

/* Detail-sheet rhythm: content has breathing room before the following
   divider, while the attachment controls sit closer to their own divider. */
.timeline-detail-sheet .tl-detail-progress-section,
.timeline-detail-sheet .tl-detail-remarks-section {
  margin-bottom:0 !important;
}
.timeline-detail-sheet .tl-detail-media-section {
  padding-top:18px !important;
  margin-top:4px !important;
}
.timeline-detail-sheet .tl-detail-media-section > .tl-detail-label {
  margin-bottom:9px !important;
}

/* At the end of Edit Task, keep Delete near the viewport's lower safe edge. */
@media (max-width:639px) {
  .sheet-actions.task-edit-actions + .btn.danger {
    margin:8px auto 10px !important;
  }
}

/* v138 — media owns the top layer; PDF note belongs to the zoom surface. */
.tl-fullscreen-media { z-index:1200 !important; }

/* Keep the thin X fixed to the right edge of the 20px media frame. */
.tl-fullscreen-media .tl-fullscreen-media-close.plain {
  position:fixed !important;
  z-index:1220 !important;
  top:calc(9px + env(safe-area-inset-top)) !important;
  right:20px !important;
  bottom:auto !important;
  left:auto !important;
  margin:0 !important;
}
.tl-fullscreen-photo-viewer > .tl-fullscreen-photo-scroll {
  padding-top:calc(48px + env(safe-area-inset-top)) !important;
}

/* Width-fit PDF is one scalable surface: pages first, note/voice immediately
   underneath. The outer layout supplies the transformed scroll dimensions. */
.tl-fullscreen-pdf .tl-pdf-page-scroll {
  padding:calc(48px + env(safe-area-inset-top)) 0
    calc(18px + env(safe-area-inset-bottom)) !important;
}
.tl-pdf-zoom-layout {
  position:relative;
  min-width:100%;
  min-height:1px;
}
.tl-pdf-zoom-surface {
  position:absolute;
  top:0;
  left:0;
  width:100%;
  transform-origin:0 0;
}
.tl-fullscreen-pdf .tl-pdf-pages {
  width:100% !important;
  min-width:100% !important;
  transform:none !important;
}
.tl-fullscreen-pdf .tl-pdf-attachment-detail {
  position:relative !important;
  z-index:auto !important;
  inset:auto !important;
  width:100% !important;
  max-height:none !important;
  box-sizing:border-box !important;
  margin:0 !important;
  padding:14px 18px 16px !important;
  overflow:visible !important;
  background:#E9E8E5 !important;
  border-top:0 !important;
  box-shadow:none !important;
}

/* PDF download sits beside the close control and never zooms with the page. */
.tl-pdf-download {
  position:fixed;
  z-index:1220;
  top:calc(9px + env(safe-area-inset-top));
  right:62px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:#3F3B37;
}
.tl-pdf-download svg {
  width:22px;
  height:22px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.35;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.tl-pdf-download:disabled { opacity:.4; }

/* Restore the earlier Task Detail rhythm. Only reduce the gap between the
   attachment content and its action divider, then add space below buttons. */
.timeline-detail-sheet .tl-detail-actions {
  margin-top:20px !important;
  padding-top:30px !important;
  margin-bottom:42px !important;
}

/* v139 — measured spacing and 1.5px action-icon strokes. */

/* Add a modest pause after Progress and Remarks before the next divider. */
.timeline-detail-sheet .tl-detail-progress-section,
.timeline-detail-sheet .tl-detail-remarks-section {
  margin-bottom:10px !important;
}

/* Divider-to-button spacing is now the same in Detail and Edit sheets. */
.timeline-detail-sheet .tl-detail-actions,
.sheet-actions.task-edit-actions {
  padding-top:24px !important;
}
.timeline-detail-sheet .tl-detail-actions {
  margin-bottom:38px !important;
}

/* Full-screen, popup and local-popup X marks: 1.5px visible line weight. */
.tl-fullscreen-media-close.plain::before,
.tl-fullscreen-media-close.plain::after,
.tl-media-popup-close::before,
.tl-media-popup-close::after,
.task-local-popup-close::before,
.task-local-popup-close::after {
  height:1.5px !important;
}

/* Edit-sheet Voice Instruction and Hold removal controls use the same
   constructed X instead of a font glyph, so line weight stays predictable. */
.task-instruction-remove,
.hold-x,
.tl-attachment-instruction-remove {
  position:relative !important;
  font-size:0 !important;
  line-height:0 !important;
}
.task-instruction-remove::before,
.task-instruction-remove::after,
.hold-x::before,
.hold-x::after,
.tl-attachment-instruction-remove::before,
.tl-attachment-instruction-remove::after {
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  width:18px;
  height:1.5px;
  border-radius:999px;
  background:currentColor;
  transform:translate(-50%,-50%) rotate(45deg);
}
.task-instruction-remove::after,
.hold-x::after,
.tl-attachment-instruction-remove::after {
  transform:translate(-50%,-50%) rotate(-45deg);
}

/* 24px icon in a 24-unit viewBox makes 1.5 SVG units render as 1.5px. */
.tl-pdf-download svg {
  width:24px;
  height:24px;
  stroke-width:1.5;
}

/* v140 — exact user-specified sheet measurements. */

.timeline-detail-sheet .tl-detail-progress-section,
.timeline-detail-sheet .tl-detail-remarks-section {
  margin-bottom:13px !important;
}

/* 38px -> 19px places the Close / Edit row exactly 50% closer to the
   Task Detail sheet's bottom edge, before the device safe-area allowance. */
.timeline-detail-sheet .tl-detail-actions {
  margin-bottom:19px !important;
}

/* Fully rounded Cancel / Save (and Cancel / Create) action buttons. */
.sheet-actions.task-edit-actions .btn {
  border-radius:999px !important;
}

/* Exact 52px from Updates & Media to the Edit-sheet action divider. */
.task-edit-more {
  margin-bottom:0 !important;
}
.task-edit-more + .sheet-actions.task-edit-actions {
  margin-top:52px !important;
}

/* v141 — Edit actions mirror Detail actions; exact requested spacing. */

/* Cancel / Save now uses the same geometry as Close / Edit. */
.sheet-actions.task-edit-actions {
  gap:14px !important;
}
.sheet-actions.task-edit-actions .btn {
  flex:1 1 0 !important;
  min-height:46px !important;
  border-radius:999px !important;
}

/* The Task Detail progress track is 86% base surface + 14% neutral grey. */
.timeline-detail-sheet .tl-detail-progress {
  background:color-mix(in srgb, var(--surface-2) 86%, var(--ink-3) 14%) !important;
}

/* Exact distance from Updates & Media to the Edit-sheet action divider. */
.task-edit-more + .sheet-actions.task-edit-actions {
  margin-top:60px !important;
}

/* 10px -> 7px is exactly 30% closer to the sheet's bottom padding. */
@media (max-width:639px) {
  .sheet-actions.task-edit-actions + .btn.danger {
    margin-bottom:7px !important;
  }
}

/* v142 — rounded Remarks field and one shared mobile action baseline. */

/* Explicit value keeps the Remarks corner identical in Safari and Chrome. */
.task-remarks-input {
  border-radius:14px !important;
}

/* Close / Edit ends 19px above the sheet's 22px-or-safe-area padding.
   Give Cancel / Save that same 41px minimum safe-aware clearance. */
@media (max-width:639px) {
  .sheet-actions.task-edit-actions {
    padding-bottom:max(41px, calc(19px + env(safe-area-inset-bottom))) !important;
  }
}

/* v143 — exact Remarks outline and Delete Task bottom margin. */
.task-remarks-input {
  border:1px solid var(--line-2) !important;
  border-radius:10px !important;
}

@media (max-width:639px) {
  .sheet-actions.task-edit-actions + .btn.danger {
    margin-bottom:0 !important;
  }
}

/* v144 — remove duplicate action-row safe-area space. The sheet itself
   still protects the iOS home indicator; actions-to-delete is exactly 8px. */
@media (max-width:639px) {
  .sheet-actions.task-edit-actions {
    bottom:-22px !important;
    padding-bottom:0 !important;
  }
  .sheet-actions.task-edit-actions + .btn.danger {
    margin-top:8px !important;
  }
}

/* v145 — platform-identical sheet spacing: no iOS safe-area contribution. */
@media (max-width:639px) {
  .sheet,
  .timeline-detail-sheet {
    padding-bottom:22px !important;
  }

  /* Match Close / Edit exactly: 24px above the row, 19px below it. */
  .sheet-actions.task-edit-actions {
    bottom:-22px !important;
    margin-bottom:19px !important;
    padding:24px 20px 0 !important;
  }
  .timeline-detail-sheet .tl-detail-actions {
    margin-bottom:19px !important;
    padding-top:24px !important;
  }

  /* 19px row margin combined with -11px gives the retained 8px gap. */
  .sheet-actions.task-edit-actions + .btn.danger {
    margin-top:-11px !important;
    margin-bottom:0 !important;
  }
}

/* v146 — align the initial sticky Edit row with the Detail action row.
   -22px -> 19px raises Cancel / Save by the exact shared 41px clearance. */
@media (max-width:639px) {
  .sheet-actions.task-edit-actions {
    bottom:19px !important;
    margin-bottom:0 !important;
    padding:24px 20px 0 !important;
  }
  .sheet-actions.task-edit-actions + .btn.danger {
    margin-top:8px !important;
    margin-bottom:0 !important;
  }
}

/* v147 — keep the v146 button baseline while making the sticky footer
   completely opaque. Moving the 19px offset inside the footer preserves the
   button position and fills the full area beneath it with the sheet colour. */
@media (max-width:639px) {
  .sheet-actions.task-edit-actions {
    bottom:0 !important;
    padding:24px 20px 19px !important;
    background:var(--option-panel) !important;
    backdrop-filter:none !important;
    -webkit-backdrop-filter:none !important;
  }

  /* 19px footer padding + 11px margin = an exact 30px visible gap. */
  .sheet-actions.task-edit-actions + .btn.danger {
    margin-top:11px !important;
    margin-bottom:0 !important;
  }
}

/* v148 — cover the complete 41px region beneath the action buttons with a
   dedicated viewport overlay. This includes the footer's 19px internal space
   and the sheet's 22px bottom pad, so form controls cannot show through. */
@media (max-width:639px) {
  .sheet-actions.task-edit-actions {
    box-shadow:none !important;
  }

  .sheet-actions.task-edit-actions::after {
    content:'';
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    height:41px;
    background:var(--option-panel);
    pointer-events:none;
  }

  /* Keep Delete Task above the overlay when it scrolls into view. */
  .sheet-actions.task-edit-actions + .btn.danger {
    position:relative !important;
    z-index:5 !important;
  }
}

/* v150 — slightly smaller Edit Task voice-delete control. */
.task-edit-more .task-instruction-remove {
  width:32px !important;
  height:32px !important;
  min-width:32px !important;
  min-height:32px !important;
  flex:0 0 32px !important;
}

.task-edit-more .task-instruction-remove::before,
.task-edit-more .task-instruction-remove::after {
  width:16px !important;
  height:1.5px !important;
}

/* v151 — exact voice-delete size and separation. */
.task-edit-more .task-instruction-chip-wrap {
  gap:8px !important;
}

.task-edit-more .task-instruction-remove {
  width:25px !important;
  height:25px !important;
  min-width:25px !important;
  min-height:25px !important;
  flex:0 0 25px !important;
}

/* v152 — exact compact X mark inside the 25px delete control. */
.task-edit-more .task-instruction-remove::before,
.task-edit-more .task-instruction-remove::after {
  width:10px !important;
  height:1.5px !important;
}

/* ==================================================================
   v154 — Admin-only Team Management
   ================================================================== */
.menu-item.menu-team { color: var(--accent); font-weight: 650; }
.team-sheet { padding-bottom: 28px; }
.team-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; margin-bottom: 22px;
}
.team-head h2, .team-editor h2 { margin-bottom: 4px; }
.team-subtitle { margin: 0; line-height: 1.45; }
.team-add { flex: none; height: 40px; padding-inline: 15px; border-radius: 999px; }
.team-list {
  overflow: hidden; border: 1px solid var(--line); border-radius: 14px;
  background: var(--surface);
}
.team-list > .where, .team-list > .err { margin: 0; padding: 18px; }
.team-member {
  width: 100%; min-height: 67px; display: flex; align-items: center;
  justify-content: space-between; gap: 14px; padding: 12px 14px;
  border: 0; border-bottom: 1px solid var(--divider);
  background: transparent; color: var(--ink); text-align: left;
  font: inherit; cursor: pointer;
}
.team-member:last-child { border-bottom: 0; }
.team-member:active { background: var(--surface-2); }
.team-member.inactive { opacity: .57; }
.team-member-main { min-width: 0; display: block; }
.team-member-main strong {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; font-weight: 650;
}
.team-member-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 6px; }
.team-role, .team-access, .team-inactive {
  display: inline-flex; align-items: center; min-height: 22px; padding: 2px 8px;
  border-radius: 999px; font-size: 10.5px; font-weight: 650;
}
.team-role { background: var(--accent-soft); color: var(--accent); }
.team-role.role-admin { background: var(--urgent-s); color: var(--urgent); }
.team-role.role-supervisor { background: var(--gold-soft); color: var(--gold); }
.team-role.role-worker { background: var(--surface-2); color: var(--ink-2); }

.team-role.role-viewer { background: var(--surface-2); color: var(--ink-2); }
.team-role.role-none { background: transparent; color: var(--ink-3); border: 1px solid var(--line); }
.team-access { border: 1px solid var(--line); color: var(--ink-3); }
.team-inactive { background: var(--surface-2); color: var(--ink-3); }
.team-chevron { flex: none; color: var(--ink-3); font-size: 26px; font-weight: 300; }
.team-removed-toggle {
  width: 100%; min-height: 46px; padding: 10px 14px; border: 0;
  border-top: 1px solid var(--divider); background: var(--surface-2);
  color: var(--ink-2); text-align: left; font: inherit; font-size: 12.5px;
  font-weight: 650; cursor: pointer;
}
.team-removed-toggle::after { content: '⌄'; float: right; font-size: 16px; font-weight: 400; }
.team-removed-toggle.open::after { transform: rotate(180deg); }
.team-removed-list { border-top: 1px solid var(--divider); }
.team-removed-list .team-member { background: var(--surface-2); }
.team-empty-active { margin: 0; padding: 18px; }
.team-close-actions { margin-top: 22px; }
.team-close-actions .btn { min-width: 150px; }
.team-editor .team-subtitle { margin-bottom: 26px; }
.team-field { margin-bottom: 18px; }
.team-active-toggle {
  display: flex; align-items: center; gap: 11px; min-height: 44px;
  margin: 0 0 18px; color: var(--ink); font-size: 14px; font-weight: 600;
}
.team-active-toggle input { width: 20px; height: 20px; accent-color: var(--accent); }
.team-active-toggle input:disabled + span { opacity: .55; }
.team-error { margin-top: 4px; }
.team-actions { margin-top: 28px; }
.team-remove, .team-restore {
  display: block; width: min(100%, 310px); margin: 22px auto 0;
  border-radius: 999px;
}
.team-remove { color: var(--coral); border-color: var(--coral); }
.team-delete { margin-top: 12px; }
.team-delete-note { max-width: 310px; margin: 9px auto 0; text-align: center; line-height: 1.45; }

@media (max-width: 639px) {
  .team-sheet { max-height: calc(100dvh - 72px); overflow-y: auto; }
  .team-head { align-items: center; }
  .team-add { font-size: 12px; }
}

/* =====================================================================
   v157 — Tasks page aligned with Timeline.
   ===================================================================== */

/* Use the same control-strip height and side insets as Timeline. Tasks has
   no month picker, so the centre column is intentional open space. */
#scopeBar {
  display: grid;
  grid-template-columns: 112px minmax(20px, 1fr) 100px;
  grid-template-areas: "scope spacer filters";
  align-items: center;
  min-height: 43px;
  margin-top: 1px;
  padding: 4px 9px;
  column-gap: 10px;
  background: color-mix(in srgb, var(--bg) 91%, #000 9%);
}
#scopeBar .segment { grid-area: scope; justify-self: start; }
#selFilter + .roll-select.pick-roll {
  grid-area: filters;
  justify-self: end;
  width: 100px;
  max-width: 100px;
}
#selFilter + .roll-select.pick-roll .roll-trigger {
  width: 100px;
  height: 35px;
  padding-left: 17px;
  padding-right: 10px;
  justify-content: space-between;
}

/* The list can begin closer to its controls, matching the Timeline canvas. */
#vwTasks .list {
  padding-top: 8px;
  touch-action: pan-y;
  overscroll-behavior-y: contain;
  scroll-behavior: smooth;
}

/* Three clear information rows: title, dates, then status/team. */
.task {
  padding-top: 13px;
  padding-bottom: 13px;
  touch-action: pan-y;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .16s ease;
}
.task .name {
  color: var(--ink) !important;
  font-size: 15px !important;
  line-height: 1.3 !important;
}
.task-dates {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px 12px;
  margin-top: 8px;
  min-width: 0;
  font-variant-numeric: tabular-nums;
}
.task-date {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  color: var(--ink-2);
  font-size: 11.5px;
  line-height: 1.35;
  white-space: nowrap;
}
.task-date b {
  color: var(--ink-3);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}
.task-duration,
.task-no-date {
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.35;
  white-space: nowrap;
}
.task-duration::before {
  content: '';
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 7px 2px 0;
  border-radius: 50%;
  background: currentColor;
  opacity: .55;
}
.task .meta {
  margin-top: 7px;
  min-height: 20px;
}
.task .foot { margin-top: 9px; }

/* Preserve horizontal reading for long titles without stealing vertical
   drags from the list. Modern browsers direction-lock the gesture. */
.task .slide,
.task .mtext.slide {
  touch-action: pan-x pan-y;
}
.task.is-drag-scrolling,
.task.is-drag-scrolling:active {
  background: transparent !important;
}

/* A short, quiet locator confirms which task was centred after roll-down. */
.task.task-current-focus {
  background: color-mix(in srgb, var(--accent-soft) 55%, transparent);
}

@media (hover: hover) and (pointer: fine) {
  .task:hover { background: color-mix(in srgb, var(--surface-2) 72%, transparent); }
}
@media (hover: none), (pointer: coarse) {
  .task:active { background: transparent !important; }
}

@media (max-width: 360px) {
  #scopeBar {
    grid-template-columns: 106px minmax(12px, 1fr) 94px;
    padding-left: 7px;
    padding-right: 7px;
    column-gap: 7px;
  }
  #selFilter + .roll-select.pick-roll,
  #selFilter + .roll-select.pick-roll .roll-trigger {
    width: 94px;
  }
  .task-dates { gap: 4px 9px; }
}

/* =====================================================================
   v158 — shared control edges.
   The previous 9px/7px control inset did not match the 14px task-card
   inset. Both pages now use the task card as the alignment reference. */
#scopeBar,
#timelineScopeBar {
  padding-left: 14px !important;
  padding-right: 14px !important;
}

/* Mine/All and Filters occupy the two true endpoints. The empty middle
   column on Tasks may expand, but cannot push either endpoint inward. */
#scopeBar {
  grid-template-columns: 112px minmax(0, 1fr) 100px;
  column-gap: 10px;
}
#scopeBar .segment { justify-self: start; }
#selFilter + .roll-select.pick-roll { justify-self: end; }

@media (max-width: 360px) {
  #scopeBar {
    grid-template-columns: 106px minmax(0, 1fr) 94px;
    column-gap: 7px;
  }
}

/* At desktop widths the task list is a centred 860px column. Match the
   controls to the card edges rather than the browser-window edges. */
@media (min-width: 760px) {
  #scopeBar,
  #timelineScopeBar {
    padding-left: max(20px, calc((100% - 860px) / 2 + 20px)) !important;
    padding-right: max(20px, calc((100% - 860px) / 2 + 20px)) !important;
  }
}

/* =====================================================================
   v159 — lock Tasks and Timeline controls to one vertical geometry.
   Several older Timeline refinements left it at 47px/6px while Tasks was
   43px/4px. These final values prevent either calendar or legacy rules from
   changing the position of the controls. */
#scopeBar,
#timelineScopeBar {
  height: 47px !important;
  min-height: 47px !important;
  margin-top: 1px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  align-items: center !important;
}

/* Tasks sits directly on the app canvas; Timeline keeps its own header band
   because it visually joins the calendar ruler below. */
#scopeBar {
  background: transparent !important;
}

/* =====================================================================
   v160 — Timeline typography and canvas language on Tasks.
   ===================================================================== */

/* Match the visible Timeline Filters label exactly. */
#selFilter + .roll-select.pick-roll .roll-trigger {
  font-size: 13px !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
}

/* The Tasks canvas begins below the transparent control row, just as the
   Timeline canvas begins below its controls. The list itself spans the
   viewport so the canvas is continuous, while responsive padding preserves
   the existing project-card column width. */
#vwTasks .list {
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 50px;
  padding-left: 14px;
  padding-right: 14px;
  background: var(--timeline-board);
}

@media (min-width: 760px) {
  #vwTasks .list {
    padding-left: max(20px, calc((100% - 860px) / 2 + 20px));
    padding-right: max(20px, calc((100% - 860px) / 2 + 20px));
  }
}

/* =====================================================================
   v161 — calendar-matched controls, centred disclosure arrow and stacked
   task cards.
   ===================================================================== */

/* Match the schedule canvas visible below the Timeline calendar. */
#scopeBar {
  background: var(--timeline-board) !important;
}

/* Give the chevron a centred frame so its optical centre follows the title
   baseline. Only the inner mark rotates: right while closed, down when open. */
.project-fold-mark {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  align-self: center;
  margin: 0;
  border: 0;
  transform: none;
}
.group.collapsed .project-fold-mark { transform: none; }
.project-fold-mark::before {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid rgba(255,255,255,.72);
  border-bottom: 1.5px solid rgba(255,255,255,.72);
  transform: rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform .28s cubic-bezier(.2,.78,.25,1);
}
.group.collapsed .project-fold-mark::before {
  transform: rotate(-45deg);
}

/* Large, direct schedule range: Day Month – Day Month. */
.task-dates {
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 8px;
}
.task-date-range {
  min-width: 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.01em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.task-duration {
  margin-left: auto;
  font-size: 11px;
}

/* Each rolled-out task is its own card in a compact vertical stack. */
.project-task-inner .card {
  padding: 9px 8px 5px;
  background: transparent;
  border-radius: 0 0 14px 14px;
  overflow: visible;
}
.project-task-inner .task {
  margin: 0 0 8px;
  border: 1px solid color-mix(in srgb, var(--divider) 72%, transparent);
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 2px 5px rgba(29,24,21,.055);
  opacity: 1;
  transform: translateY(0) scale(1);
  transition:
    opacity .2s ease,
    transform .25s cubic-bezier(.2,.78,.25,1),
    background-color .16s ease;
}
.project-task-inner .task + .task { border-top-width: 1px; }
.group.collapsed .project-task-inner .task {
  opacity: 0;
  transform: translateY(-10px) scale(.988);
}
.group:not(.collapsed) .project-task-inner .task:nth-of-type(2) { transition-delay: 25ms; }
.group:not(.collapsed) .project-task-inner .task:nth-of-type(3) { transition-delay: 50ms; }
.group:not(.collapsed) .project-task-inner .task:nth-of-type(4) { transition-delay: 75ms; }
.group:not(.collapsed) .project-task-inner .task:nth-of-type(n+5) { transition-delay: 100ms; }

.project-backlog-head {
  border-top: 0;
  padding: 10px 12px 8px;
}

@media (max-width: 360px) {
  .task-date-range { font-size: 14px; }
  .task-duration { font-size: 10.5px; }
}

/* =====================================================================
   v162 — Tasks header boundary aligned with the Timeline ruler bottom;
   restore the earlier flat project-card rows and retain one clean roll-down.
   ===================================================================== */

/* Timeline's final ruler is 54px high. Extend the Tasks control surface by
   the same amount, so both pages hand off to their content canvas at the
   exact same vertical position. */
#scopeBar {
  position: relative;
  z-index: 2;
  margin-bottom: 54px !important;
  background: color-mix(in srgb, var(--bg) 91%, #000 9%) !important;
}
#scopeBar::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 54px;
  background: inherit;
  pointer-events: none;
}

/* Content now starts immediately after that 54px header extension. */
#vwTasks .list {
  padding-top: 0;
}

/* Restore the pre-v161 design: one calm project panel with hairline-separated
   task rows, rather than individual stacked cards. */
.project-task-inner .card {
  padding: 0;
  background: var(--surface);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
.project-task-inner .task {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  opacity: 1;
  transform: none;
  transition: background-color .16s ease;
  transition-delay: 0ms !important;
}
.project-task-inner .task + .task {
  border-top: 1px solid var(--divider);
}
.group.collapsed .project-task-inner .task,
.group:not(.collapsed) .project-task-inner .task {
  opacity: 1;
  transform: none;
  transition-delay: 0ms !important;
}
.project-backlog-head {
  padding: 14px 18px 8px 54px;
  border-top: 1px solid var(--line);
}

/* The entire panel rolls down as one object. The arrow animation from v161
   remains: right when closed, down when open. */
.project-task-wrap {
  transition: grid-template-rows .3s cubic-bezier(.2,.78,.25,1);
}
.project-task-inner {
  opacity: 1;
  transform: translateY(0);
  transform-origin: top center;
  transition:
    opacity .2s ease,
    transform .3s cubic-bezier(.2,.78,.25,1);
}
.group.collapsed .project-task-inner {
  opacity: 0;
  transform: translateY(-9px);
}

/* =====================================================================
   v163 — three-line task information hierarchy.
   ===================================================================== */

/* Line 1: quiet area hierarchy, strong task name. */
.task .name {
  display: flex;
  align-items: baseline;
  color: var(--ink);
  font-size: 14.5px !important;
  line-height: 1.3 !important;
}
.task .task-area-name {
  flex: none;
  color: var(--ink-2);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.task .name .arw {
  flex: none;
  margin: 0 7px 0 6px;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 500;
}
.task .task-name-text {
  color: var(--ink);
  font-size: 14.5px;
  font-weight: 680;
  letter-spacing: -.008em;
}

/* Line 2: schedule first, then planned and overdue duration. Keep the full
   line horizontally readable on narrow phones without blocking page scroll. */
.task-dates {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 8px;
  margin-top: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y;
}
.task-dates::-webkit-scrollbar { display: none; }
.task-date-range {
  flex: none;
  color: var(--ink);
  font-size: 15px;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.012em;
}
.task-duration {
  flex: none;
  margin-left: 0;
  color: var(--ink-3);
  font-size: 11.5px;
  font-weight: 560;
  line-height: 1.3;
}
.task-duration::before { display: none; content: none; }
.task-due-days {
  flex: none;
  color: var(--overdue);
  font-size: 11.5px;
  font-weight: 720;
  line-height: 1.3;
  white-space: nowrap;
}

/* Line 3: status leads; worker names remain clear but secondary. */
.task .meta {
  gap: 9px;
  margin-top: 7px;
}
.task .tag {
  font-size: 10.5px !important;
  font-weight: 680 !important;
}
.task .mtext {
  color: var(--ink-2) !important;
  font-size: 12px !important;
  font-weight: 540 !important;
  line-height: 1.35;
}
.task .foot { margin-top: 9px; }

@media (max-width: 360px) {
  .task-date-range { font-size: 14.5px; }
  .task .task-name-text { font-size: 14px; }
}

/* =====================================================================
   v164 — compact control row, stronger status/progress and clearer canvas.
   ===================================================================== */
:root { --tasks-board: #E6E2DC; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --tasks-board: #141210; }
}
:root[data-theme="dark"] { --tasks-board: #141210; }

/* Remove the v162 calendar-height extension. Tasks and Timeline controls are
   both exactly 47px; the project spacing belongs to the canvas below. */
#scopeBar {
  height: 47px !important;
  min-height: 47px !important;
  margin-bottom: 0 !important;
}
#scopeBar::after {
  display: none !important;
  content: none !important;
}

/* Restore the requested project breathing room inside a clearly different
   warm-grey canvas. Task panels remain the much lighter surface colour. */
#vwTasks .list {
  padding-top: 50px;
  background: var(--tasks-board);
}

/* Status is now a clear information anchor rather than a tiny annotation. */
.task .tag {
  padding: 3.5px 11px;
  font-size: 12px !important;
  font-weight: 720 !important;
  line-height: 1.35;
}

/* A one-pixel increase keeps the progress indicator refined but visible. */
.task .prog {
  height: 4px;
  border-radius: 3px;
}

/* =====================================================================
   v165 — explicit control edges, directional filter chevrons and project
   menu/sheet refinements.
   ===================================================================== */

/* Both pages use the viewport as the alignment reference: controls sit an
   exact 8px from the left and right edges at every responsive width. */
#scopeBar,
#timelineScopeBar {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

/* The Filters chevron points right while closed and rotates down only while
   its menu is open. Limit this to Filters so month and other selects keep
   their own established behavior. */
#selFilter + .roll-select.pick-roll .roll-trigger::after,
#selFilter2 + .roll-select.pick-roll .roll-trigger::after {
  transform: rotate(-45deg) !important;
  transform-origin: 50% 50%;
  transition: transform .2s cubic-bezier(.2,.78,.25,1);
}
#selFilter + .roll-select.pick-roll.open .roll-trigger::after,
#selFilter2 + .roll-select.pick-roll.open .roll-trigger::after {
  transform: rotate(45deg) !important;
}

/* Show more Area choices before the project action menu needs to scroll. */
.project-area-menu {
  max-height: 460px;
  max-height: min(460px, calc(100dvh - 24px));
}

/* Delete Project is now the final action in the project three-dot menu. */
.project-menu-danger {
  color: var(--urgent) !important;
}
.project-menu-danger:active {
  background: color-mix(in srgb, var(--urgent) 10%, transparent) !important;
}

/* Add Project uses the same bordered action footer as New Task. */
.sheet-actions.project-create-actions {
  border-top: 1px solid var(--divider) !important;
}

/* =====================================================================
   v167 — wider arrowless Organise control, adjusted Filters chevrons,
   one top close overlay and Timeline-matched status colours.
   ===================================================================== */

/* Organise is wider than v166 and remains geometrically centred. */
#scopeBar {
  grid-template-columns: minmax(106px, 1fr) 108px minmax(94px, 1fr) !important;
  grid-template-areas: "scope organise filters" !important;
  column-gap: 5px !important;
}
#selOrganise + .roll-select.pick-roll {
  grid-area: organise;
  justify-self: center;
  width: 108px;
  max-width: 108px;
}
#selOrganise + .roll-select.pick-roll .roll-trigger {
  width: 108px;
  height: 35px;
  justify-content: center;
  padding: 0 13px;
  font-size: 12px;
  font-weight: 650;
}
#selOrganise + .roll-select.pick-roll .roll-trigger::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 360px) {
  #scopeBar {
    grid-template-columns: minmax(102px, 1fr) 96px minmax(90px, 1fr) !important;
    column-gap: 3px !important;
  }
  #selOrganise + .roll-select.pick-roll,
  #selOrganise + .roll-select.pick-roll .roll-trigger {
    width: 96px;
    max-width: 96px;
  }
  #selOrganise + .roll-select.pick-roll .roll-trigger {
    padding-inline: 8px;
    font-size: 11.5px;
  }
}

/* Move only the Filters chevron 5px left on both Tasks and Timeline. */
#selFilter + .roll-select.pick-roll .roll-trigger::after,
#selFilter2 + .roll-select.pick-roll .roll-trigger::after {
  position: relative;
  right: 5px;
}

/* Retain the requested project-menu height and align Delete Project with the
   left edge of the other menu labels. */
.project-area-menu {
  max-height: 400px;
  max-height: min(400px, calc(100dvh - 24px));
}
.project-menu-danger {
  justify-content: flex-start;
  padding-left: 12px;
}

/* One fixed overlay remains at the top of the Tasks canvas while projects
   are expanded. It closes every open project in a single tap. */
#vwTasks { position: relative; }
.project-close-overlay {
  position: absolute;
  top: 55px;
  right: 8px;
  z-index: 28;
  min-height: 36px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, var(--line-2));
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  box-shadow: 0 4px 14px rgba(29,24,21,.16);
  font: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
}
.project-close-overlay:active {
  transform: translateY(1px);
  background: var(--surface-2);
}

/* Planned duration remains secondary, but no longer fades into the canvas. */
.task-duration {
  color: var(--ink-2) !important;
  font-weight: 650 !important;
}

/* Use the authoritative Timeline progress-fill colours. The experimental
   v166 status palette has been removed rather than left underneath. */
.task.s-notstarted .tag {
  background: #B3B3B3 !important;
  color: #302D2A !important;
}
.task.s-inprogress .tag {
  background: #47847F !important;
  color: #FFFFFF !important;
}
.task.s-onhold .tag {
  background: #8A7775 !important;
  color: #FFFFFF !important;
}
.task.s-completed .tag {
  background: #6E9166 !important;
  color: #FFFFFF !important;
}
.task.s-canceled .tag {
  background: rgba(105,105,105,.70) !important;
  color: #FFFFFF !important;
}
.task.overdue .tag {
  background: #E39459 !important;
  color: #FFFFFF !important;
}

/* =====================================================================
   v168 — Month-matched Organise control, reliable Area centring and
   dropdown/Close Project layering.
   ===================================================================== */

/* Use the Timeline control grid exactly. Organise therefore takes the same
   responsive centre-column length as Month instead of a fixed pixel width. */
#scopeBar {
  grid-template-columns: 112px minmax(84px, 1fr) 100px !important;
  grid-template-areas: "scope organise filters" !important;
  column-gap: 10px !important;
}
#selOrganise + .roll-select.pick-roll {
  grid-area: organise;
  justify-self: stretch;
  width: 100%;
  max-width: none;
}
#selOrganise + .roll-select.pick-roll .roll-trigger {
  width: 100%;
  height: 35px;
  justify-content: center;
  gap: 0;
  padding: 0 10px;
  border: 0;
  background: color-mix(in srgb, var(--surface) 64%, transparent);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 650;
}
#selOrganise + .roll-select.pick-roll .roll-trigger::after {
  display: none !important;
  content: none !important;
}
@media (max-width: 360px) {
  #scopeBar {
    grid-template-columns: 106px minmax(72px, 1fr) 94px !important;
    column-gap: 7px !important;
  }
  #selOrganise + .roll-select.pick-roll,
  #selOrganise + .roll-select.pick-roll .roll-trigger {
    width: 100%;
    max-width: none;
  }
  #selOrganise + .roll-select.pick-roll .roll-trigger {
    padding-inline: 7px;
    font-size: 12px;
  }
}

/* Project Settings and Delete Project now share the same left label edge. */
.project-menu-action {
  justify-content: flex-start;
}

/* Keep the convenience control above the tab bar at the lower-right. */
.project-close-overlay {
  top: auto;
  right: 10px;
  bottom: 10px;
}

/* Every Tasks dropdown sits above the floating Close Project control. The
   fixed project menu already uses z-index 950. */
#scopeBar {
  position: relative;
  z-index: 60 !important;
}
#scopeBar .roll-select.open {
  z-index: 70 !important;
}
#scopeBar .roll-menu {
  z-index: 80 !important;
}

/* Short menus remain content-height; only long menus reach their max-height
   and become scrollable. */
.roll-menu,
.project-area-menu {
  height: auto !important;
  min-height: 0 !important;
}

/* Tasks progress percentage: 12px -> 13px. */
.task .pct {
  font-size: 13px !important;
}

/* =====================================================================
   v169 — exact shared centre-control width, quieter completed work and
   final Tasks/Timeline menu refinements.
   ===================================================================== */

/* Tasks and Timeline now share one literal grid definition. The enhanced
   Organise and Month wrappers are also forced to fill that same centre
   track, preventing an older fixed-width rule from winning in WebKit. */
#scopeBar,
#timelineScopeBar {
  grid-template-columns: 112px minmax(84px, 1fr) 100px !important;
  column-gap: 10px !important;
}
#selOrganise + .roll-select.pick-roll,
#timelineMonth + .roll-select.pick-roll,
#selOrganise + .roll-select.pick-roll .roll-trigger,
#timelineMonth + .roll-select.pick-roll .roll-trigger {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
}
#selOrganise + .roll-select.pick-roll,
#timelineMonth + .roll-select.pick-roll {
  justify-self: stretch !important;
}
@media (max-width: 360px) {
  #scopeBar,
  #timelineScopeBar {
    grid-template-columns: 106px minmax(72px, 1fr) 94px !important;
    column-gap: 7px !important;
  }
}

/* Make filter section subtitles easier to scan on both pages. */
#scopeBar .roll-group-label,
#timelineScopeBar .roll-group-label,
#timelineScopeBar .roll-timeline-projects-title,
#timelineScopeBar .roll-projects-label {
  color: var(--ink-2) !important;
}

/* Use the same fine 1.5px chevron language as the other dropdowns instead
   of the heavier font glyph previously used by Timeline Projects. */
#timelineScopeBar .roll-projects-chevron {
  position: relative;
  width: 16px;
  min-width: 16px;
  height: 16px;
  font-size: 0 !important;
  font-weight: 400 !important;
}
#timelineScopeBar .roll-projects-chevron::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translate(-50%, -65%) rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform .2s cubic-bezier(.2,.78,.25,1);
}
#timelineScopeBar .roll-timeline-project-inline.accordion-projects.open .roll-projects-chevron::before {
  transform: translate(-50%, -35%) rotate(225deg);
}

/* Close Project stays just above the lower edge. A negative spread keeps
   the stronger shadow underneath the pill instead of around every side. */
.project-close-overlay {
  bottom: 15px;
  box-shadow: 0 7px 7px -5px rgba(29,24,21,.58);
}

/* Fade every textual element for terminal task states while preserving the
   progress-track geometry and colour as a useful visual reference. */
.task.s-completed .name,
.task.s-completed .task-dates,
.task.s-completed .meta,
.task.s-completed .pct,
.task.s-canceled .name,
.task.s-canceled .task-dates,
.task.s-canceled .meta,
.task.s-canceled .pct {
  opacity: .55 !important;
}

/* =====================================================================
   v170 — one dropdown heading language, softer directional shadow and
   touch-safe task long press.
   ===================================================================== */

/* Match every filter accordion heading to Timeline's preferred PROJECTS
   heading: identical type size, weight, tracking and arrow geometry. */
#scopeBar .roll-group-label,
#timelineScopeBar .roll-group-label {
  color: var(--ink-2) !important;
  font-size: 11px !important;
  font-weight: 760 !important;
  line-height: 1.1 !important;
  letter-spacing: .075em !important;
  text-transform: uppercase;
}
#scopeBar .roll-group-chevron,
#timelineScopeBar .roll-group-chevron {
  flex-basis: 7px;
  width: 7px;
  height: 7px;
  border-right-width: 1.5px;
  border-bottom-width: 1.5px;
}

/* Keep the shadow below the floating control, but soften v169's opacity. */
.project-close-overlay {
  box-shadow: 0 7px 7px -5px rgba(29,24,21,.46);
}

/* Avoid the browser text-selection callout while the 650ms delete gesture
   is being recognised. Pointer movement still hands control to scrolling. */
.task {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* =====================================================================
   v171 — match the complete PROJECTS heading geometry, not typography
   alone, and left-align the undated-task section heading.
   ===================================================================== */

/* Standard filter sections previously kept a taller 38px row and an extra
   3px label inset, which made matching type values still look different.
   They now use the same 32px row, 9px outer inset and zero inner inset as
   Timeline PROJECTS. */
#scopeBar .roll-group-toggle,
#timelineScopeBar .roll-group-toggle {
  min-height: 32px !important;
  padding: 0 9px !important;
  border-radius: 8px !important;
}
#scopeBar .roll-group-toggle .roll-group-label,
#timelineScopeBar .roll-group-toggle .roll-group-label {
  padding: 0 !important;
}

/* Give every standard section the exact same 16px arrow box and centred
   7px / 1.5px chevron used by PROJECTS. */
#scopeBar .roll-group-chevron,
#timelineScopeBar .roll-group-chevron {
  position: relative;
  flex: 0 0 16px;
  width: 16px;
  min-width: 16px;
  height: 16px;
  margin-right: 0;
  border: 0 !important;
  transform: none !important;
}
#scopeBar .roll-group-chevron::before,
#timelineScopeBar .roll-group-chevron::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 7px;
  height: 7px;
  border-right: 1.5px solid var(--ink-3);
  border-bottom: 1.5px solid var(--ink-3);
  transform: translate(-50%, -65%) rotate(45deg);
  transform-origin: 50% 50%;
  transition: transform .2s cubic-bezier(.2,.78,.25,1);
}
#scopeBar .roll-group.open .roll-group-chevron::before,
#timelineScopeBar .roll-group.open .roll-group-chevron::before {
  transform: translate(-50%, -35%) rotate(225deg);
}

/* Undated tasks are a separate section, so its title begins at the panel's
   14px content edge rather than the task-text indent. */
.project-backlog-head {
  padding-left: 14px !important;
  text-align: left !important;
}


/* ========================================================= v172 workspaces */
.workspace-design{min-height:calc(100dvh - 58px - 70px);padding:26px 18px 96px;overflow:auto}
.design-home{max-width:920px;margin:0 auto}
.design-kicker,.menu-section-label{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.55}
.design-home h2{font-size:30px;line-height:1.05;margin:10px 0 8px;font-weight:650;letter-spacing:-.035em}
.design-home>p{max-width:630px;margin:0 0 26px;opacity:.66;line-height:1.55}
.design-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.design-panel{min-height:180px;border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--card,rgba(255,255,255,.03));display:flex;flex-direction:column;gap:10px}
.design-panel-no{font-size:11px;letter-spacing:.12em;opacity:.42}
.design-panel strong{font-size:16px}
.design-panel p{font-size:13px;line-height:1.5;opacity:.62;margin:0}
.design-access-note{margin-top:20px;font-size:12px;opacity:.58}
.menu-workspaces{padding:8px 0 10px;border-bottom:1px solid var(--line)}
.menu-workspaces .menu-section-label{display:block;padding:8px 18px 5px}
.menu-workspace{display:grid!important;grid-template-columns:20px 1fr auto;align-items:center;text-align:left}
.menu-workspace.on{font-weight:650}
.workspace-check{font-size:13px}
.menu-workspace small{font-size:10px;font-weight:600;opacity:.55;text-transform:uppercase;letter-spacing:.05em}
body.site-readonly #tabNewProject{display:none!important}
@media(max-width:720px){.design-grid{grid-template-columns:1fr}.design-panel{min-height:128px}.workspace-design{padding-top:20px}}

/* ========================================================= v174 Site workspace flex fix
   The original Site Progress .view elements were direct flex children of
   #scApp. v172 introduced #wsSite as a workspace wrapper; without giving
   that wrapper the same flex/min-height contract, the Timeline could grow
   beyond the viewport and lower rows could be clipped/missing. Keep the
   workspace wrapper, but make it transparent to the original layout model. */
#wsSite {
  /* v197: make the workspace wrapper layout-transparent.  In v171 the Site
     views were direct flex children of #scApp.  display:contents restores that
     exact flex participation while retaining #wsSite as the workspace toggle. */
  display: contents;
}
#wsSite.hidden { display: none !important; }
#wsDesign {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  overflow: auto;
}
#wsDesign.hidden { display: none !important; }

/* ========================================================= v175 Design Team workflow */
.workspace-design{padding:18px 18px 34px;overflow:auto;background:var(--bg)}
.design-workspace-head{display:flex;align-items:end;justify-content:space-between;gap:18px;max-width:1180px;margin:0 auto 14px}
.design-workspace-head h2{margin:5px 0 0;font-size:25px;letter-spacing:-.035em;font-weight:650}
.design-head-actions{display:flex;gap:8px;flex-wrap:wrap}.design-head-actions .btn{min-height:38px}
.design-stats{max-width:1180px;margin:0 auto 12px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
.design-stat{border:1px solid var(--line);border-radius:13px;padding:12px 14px;background:var(--card,rgba(255,255,255,.025));display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.design-stat strong{font-size:22px;letter-spacing:-.04em}.design-stat span{font-size:11px;opacity:.55;text-transform:uppercase;letter-spacing:.06em;font-weight:650}
.design-toolbar{max-width:1180px;margin:0 auto 12px;display:flex;justify-content:flex-end;gap:8px}.design-toolbar .pick{max-width:210px}
.design-columns{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:minmax(220px,300px) minmax(0,1fr);gap:12px;align-items:start}
.design-projects-panel,.design-tasks-panel{border:1px solid var(--line);border-radius:16px;background:var(--card,rgba(255,255,255,.025));overflow:hidden}
.design-section-head{min-height:48px;padding:0 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;gap:10px}.design-section-head span{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.design-section-head small{font-size:10px;opacity:.46}
.design-project-row{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;padding:13px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;cursor:pointer}.design-project-row:last-child{border-bottom:0}.design-project-row:hover{background:rgba(127,127,127,.05)}
.design-project-main{display:flex;flex-direction:column;gap:4px;min-width:0}.design-project-main strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-project-main small,.design-project-meta small{font-size:10px;opacity:.52}.design-project-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;flex:0 0 auto}.design-project-meta b{font-size:11px}
.design-task-list{padding:10px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.design-task-card{border:1px solid var(--line);border-radius:13px;padding:13px;background:var(--bg);cursor:pointer;min-width:0}.design-task-card:hover{transform:translateY(-1px)}.design-task-card.overdue{box-shadow:inset 3px 0 0 #c85d4a}
.design-task-top,.design-task-foot{display:flex;align-items:center;justify-content:space-between;gap:9px}.design-task-project{font-size:10px;font-weight:650;letter-spacing:.04em;text-transform:uppercase;opacity:.48;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.design-status{font-size:9px;padding:3px 6px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}.design-status[data-status="In Progress"]{font-weight:700}.design-status[data-status="Review"]{font-weight:700}.design-status[data-status="Approved"],.design-status[data-status="Completed"]{opacity:.62}
.design-task-card h3{font-size:14px;line-height:1.35;margin:10px 0 10px;letter-spacing:-.01em}.design-task-details{display:flex;gap:8px;flex-wrap:wrap;font-size:10px;opacity:.56}.design-task-details .late{opacity:1;font-weight:700}
.design-progress{height:3px;border-radius:999px;background:var(--line);overflow:hidden;margin:13px 0 7px}.design-progress i{display:block;height:100%;background:currentColor;opacity:.7}.design-task-foot{font-size:10px;opacity:.55}.design-task-foot b{font-size:10px}
.design-empty{padding:28px 16px;text-align:center;opacity:.5;font-size:12px;display:flex;flex-direction:column;gap:5px}.design-access-note{max-width:1180px;margin:12px auto 0;font-size:10px;opacity:.48}
.design-sheet-field textarea{width:100%;resize:vertical;min-height:90px;border:1px solid var(--line);border-radius:12px;background:transparent;color:inherit;padding:11px;font:inherit}.design-sheet-actions{display:flex;gap:9px;justify-content:flex-end;align-items:center;margin-top:24px}.design-sheet-actions .danger{margin-right:auto}
@media(max-width:800px){.design-workspace-head{align-items:flex-start}.design-head-actions{justify-content:flex-end}.design-columns{grid-template-columns:1fr}.design-projects-panel{max-height:230px;overflow:auto}.design-task-list{grid-template-columns:1fr}.design-toolbar{justify-content:stretch}.design-toolbar .pick{max-width:none;flex:1}.design-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.workspace-design{padding:14px 10px 28px}.design-workspace-head{flex-direction:column;align-items:stretch}.design-head-actions{justify-content:stretch}.design-head-actions .btn{flex:1}.design-stat{padding:10px 11px}.design-stat strong{font-size:19px}}

/* =====================================================================
   v176 — Design Team: Site-style ownership + progress controls.
   ===================================================================== */
.design-toolbar{flex-wrap:wrap}
.design-project-main{flex:1;min-width:0}
.design-project-progress{display:block;height:4px;margin-top:7px;border-radius:999px;background:var(--line);overflow:hidden}
.design-project-progress i{display:block;height:100%;border-radius:inherit;background:currentColor;opacity:.62}
.design-assignee{display:inline-flex;align-items:center;gap:5px;font-weight:650;opacity:1!important}
.design-assignee b{width:20px;height:20px;border:1px solid var(--line);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:9px;background:var(--surface-2)}
.design-progress-head{display:flex;align-items:center;justify-content:space-between;margin-top:13px;font-size:10px;opacity:.62}
.design-progress-head b{font-size:11px;opacity:1}
.design-progress{height:6px;margin:5px 0 10px;background:var(--surface-2)}
.design-progress i{opacity:.82}
.design-progress-editor{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)}
.design-progress-editor-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px;font-size:12px}
.design-progress-editor-head span{font-weight:650}.design-progress-editor-head strong{font-size:15px}
.design-progress-preview{height:7px;border-radius:999px;background:var(--line);overflow:hidden;margin-bottom:10px}
.design-progress-preview i{display:block;height:100%;background:currentColor;opacity:.78;border-radius:inherit}
.design-progress-editor input[type="range"]{width:100%;margin:3px 0 10px}
.design-progress-presets{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.design-progress-presets button{min-height:32px;border:1px solid var(--line);border-radius:9px;background:transparent;color:inherit;font:inherit;font-size:10px;cursor:pointer}
.design-progress-presets button.on{background:var(--surface-2);font-weight:750;border-color:currentColor}
@media(max-width:520px){.design-toolbar .pick{min-width:0;flex:1 1 46%}.design-progress-presets{gap:4px}.design-progress-presets button{min-height:30px}}

/* ========================================================= v177 workspace picker */
.workspace-select-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.workspace-select-card{width:min(760px,100%);padding:30px 0}
.workspace-select-kicker{margin-top:28px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.5}
.workspace-select-card h1{margin:8px 0 6px;font-size:clamp(30px,5vw,46px);letter-spacing:-.045em;font-weight:650}
.workspace-select-sub{margin:0 0 26px;color:var(--ink-3);font-size:14px}
.workspace-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.workspace-choice{appearance:none;border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:20px;padding:20px;text-align:left;display:grid;grid-template-columns:46px minmax(0,1fr) 24px;gap:14px;align-items:center;cursor:pointer;min-height:118px;box-shadow:0 10px 30px rgba(0,0,0,.04);transform:translateY(10px);opacity:0;animation:wsChoiceIn .42s cubic-bezier(.2,.75,.25,1) forwards;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease,background .2s ease}
.workspace-choice:nth-child(2){animation-delay:.07s}
.workspace-choice:hover{transform:translateY(-4px);box-shadow:0 16px 38px rgba(0,0,0,.08);border-color:var(--accent)}
.workspace-choice:active{transform:translateY(-1px) scale(.99)}
.workspace-choice-icon{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);font-weight:700;font-size:16px}
.workspace-choice-copy{display:flex;flex-direction:column;gap:6px;min-width:0}.workspace-choice-copy strong{font-size:18px;letter-spacing:-.02em}.workspace-choice-copy small{font-size:12px;color:var(--ink-3);line-height:1.4}
.workspace-choice-arrow{font-size:20px;opacity:.38;transition:transform .2s ease,opacity .2s ease}.workspace-choice:hover .workspace-choice-arrow{transform:translateX(4px);opacity:.8}
@keyframes wsChoiceIn{to{opacity:1;transform:translateY(0)}}
@media(max-width:640px){.workspace-choice-grid{grid-template-columns:1fr}.workspace-select-card{padding-top:10px}.workspace-choice{min-height:100px}}
@media(prefers-reduced-motion:reduce){.workspace-choice{animation:none;opacity:1;transform:none;transition:none}.workspace-choice-arrow{transition:none}}

/* Keep workspace switching in the account/logout sheet, aligned left. */
.menu-workspaces{text-align:left}
.menu-workspaces .menu-section-label{text-align:left;padding-left:4px;padding-right:4px}
.menu-workspace{width:100%;text-align:left!important;justify-items:start;padding-left:4px!important;padding-right:4px!important}
.menu-workspace span:nth-child(2){text-align:left;justify-self:start}


/* ========================================================= v178 workspace picker refinement */
.workspace-select-kicker{margin-top:52px}
.workspace-choice-grid{grid-template-columns:1fr;gap:14px;max-width:620px}
.workspace-choice{min-height:104px}
.workspace-choice-copy{gap:0}
.workspace-choice-copy strong{font-size:clamp(24px,3vw,30px);font-weight:300;letter-spacing:-.025em;line-height:1.08}
.workspace-choice-copy small{display:none}
@media(max-width:640px){.workspace-select-kicker{margin-top:46px}.workspace-choice-copy strong{font-size:25px}}

/* ========================================================= v179 workspace picker spacing + mobile scale */
.workspace-select-kicker{
  margin-top:52px;
  margin-bottom:0;
  line-height:1;
}
.workspace-select-card h1{
  margin:4px 0 34px;
}
.workspace-choice-grid{
  gap:18px;
}
.workspace-choice-copy strong{
  font-size:clamp(22px,2.6vw,28px);
  font-weight:300;
}
@media(max-width:640px){
  .workspace-select-kicker{margin-top:44px}
  .workspace-select-card h1{margin:4px 0 30px;font-size:clamp(28px,8vw,34px)}
  .workspace-choice-grid{gap:16px}
  .workspace-choice{min-height:88px;padding:16px;grid-template-columns:40px minmax(0,1fr) 20px;gap:12px;border-radius:17px}
  .workspace-choice-icon{width:40px;height:40px;border-radius:12px;font-size:14px}
  .workspace-choice-copy strong{font-size:20px;line-height:1.1}
  .workspace-choice-arrow{font-size:18px}
}


/* ========================================================= v181 auth + workspace motion refinement */
/* Exact requested scale: large A2+ DESIGN = 20px; WORKSPACE/LOGIN kicker = 12px. */
.workspace-select-card .wordmark.lg,
.login-card .wordmark.lg{font-size:20px}
.workspace-select-kicker,
.login-kicker{font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;opacity:.5;line-height:1}

/* Workspace cards fade in and rise from lower on the screen. */
.workspace-choice{transform:translateY(72px);opacity:0;animation:wsChoiceRise .62s cubic-bezier(.16,.78,.22,1) forwards}
.workspace-choice:nth-child(2){animation-delay:.11s}
@keyframes wsChoiceRise{0%{opacity:0;transform:translateY(72px)}100%{opacity:1;transform:translateY(0)}}

/* Login now shares the same visual hierarchy and spacing as the workspace picker. */
.login-wrap{min-height:100dvh;display:grid;place-items:center;padding:24px;background:var(--bg)}
.login-card{width:min(620px,100%);max-width:none;background:transparent;border:0;border-radius:0;padding:30px 0;box-shadow:none}
.login-kicker{margin-top:52px;margin-bottom:0}
.login-card .app-name{margin:4px 0 34px;font-size:clamp(30px,5vw,46px);letter-spacing:-.045em;font-weight:650}
.login-card .app-name.stacked{gap:8px;letter-spacing:0}
.login-card .app-name.stacked .brand-line{font-size:clamp(14px,2.2vw,17px);letter-spacing:.18em}
.login-card .app-name.stacked .product-line{font-size:clamp(30px,5vw,46px);font-weight:650;letter-spacing:-.045em}
.login-fields{max-width:620px;opacity:0;transform:translateY(56px);animation:loginFieldsRise .58s .08s cubic-bezier(.16,.78,.22,1) forwards}
.login-card .field{margin-bottom:18px}
.login-card .field input{height:54px;border-radius:17px;background:var(--surface);padding:0 17px;box-shadow:0 10px 30px rgba(0,0,0,.035)}
.login-card .btn.block{height:54px;border-radius:17px;font-size:15px}
@keyframes loginFieldsRise{to{opacity:1;transform:translateY(0)}}

@media(max-width:640px){
  .workspace-select-card .wordmark.lg,.login-card .wordmark.lg{font-size:20px}
  .workspace-select-kicker,.login-kicker{font-size:12px}
  .login-card{padding-top:10px}
  .login-kicker{margin-top:44px}
  .login-card .app-name{margin:4px 0 30px;font-size:clamp(28px,8vw,34px)}
  .login-card .app-name.stacked .brand-line{font-size:13px}
  .login-card .app-name.stacked .product-line{font-size:clamp(28px,8vw,34px)}
  .login-fields{transform:translateY(48px)}
}
@media(prefers-reduced-motion:reduce){
  .workspace-choice,.login-fields{animation:none;opacity:1;transform:none}
}

/* ========================================================= v181 workspace alignment + slower entrance */
.workspace-select-card h1{
  transform:translateX(-6px);
}
.workspace-choice{
  animation-duration:.82s;
  animation-timing-function:cubic-bezier(.16,.72,.20,1);
}
.workspace-choice:nth-child(2){
  animation-delay:.16s;
}


/* ========================================================= v183 auth/workspace polish + status picker fix */
/* Requested alignment: nudge only the workspace title 10px left. */
.workspace-select-card h1{transform:translateX(-10px)}

/* Slower workspace-only entrance. Login is intentionally motionless. */
.workspace-choice{
  animation-duration:1s;
  animation-timing-function:cubic-bezier(.16,.72,.20,1);
}
.workspace-choice:nth-child(2){animation-delay:.18s}
.login-fields{
  opacity:1;
  transform:none;
  animation:none;
}

/* New Task status choices must remain directly tappable on touch screens. */
.task-progress-section .statuses button{
  touch-action:manipulation;
  pointer-events:auto;
  user-select:none;
  -webkit-tap-highlight-color:transparent;
}


/* ========================================================= v183 login rhythm */
/* Name, PIN and Sign In use one consistent 12px vertical rhythm. */
.login-fields{display:grid;gap:12px}
.login-card .field{margin-bottom:0}
.login-card .btn.block{margin:0}
.login-card .err{margin:0;min-height:20px}

/* ========================================================= v190 status control */
/* Strong tactile feedback for Site Progress status pills on touch screens. */
.task-progress-section .statuses button:active {
  transform: scale(.97);
}
.task-progress-section .statuses button.on {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
}

/* =====================================================================
   v197 — Site Progress DOM isolation test.
   #wsSite is layout-transparent so Site views participate in #scApp exactly
   as they did in v171. Design Team remains a separate workspace.
   ===================================================================== */

/* v198 — app-created Site tasks now receive project-relative sort_order in JS. */

/* v201 — Site Tasks and Timeline now share the same effective-status display rule. */

/* ========================================================= v202 login/workspace alignment */
/* Keep the visible control-to-control rhythm equal.  A field includes its
   11px label plus the existing 7px label-to-input gap, so the Sign In button
   receives the same 18px compensation after the shared 12px grid gap. */
.login-card .field > span { line-height: 1; }
.login-card .btn.block { margin-top: 18px; }

/* v183's -10px title nudge is too far left on the current mobile layout.
   Restore the calmer v181 alignment. */
.workspace-select-card h1 { transform: translateX(-6px); }


/* =====================================================================
   v203 — auth/workspace nudge, sheet layering, project task action.
   ===================================================================== */

/* User-requested 2px right nudges from v202. */
.login-kicker { transform: translateX(2px); }
.workspace-select-card h1 { transform: translateX(-4px); }

/* When a bottom sheet/account sheet is open, the Tasks/Timeline control rows
   must sit beneath the existing scrim.  Lowering the row (rather than raising
   every sheet) preserves confirmation and media-popup stacking. */
body.sheet-open #scopeBar,
body.sheet-open #timelineScopeBar {
  z-index: 2 !important;
}

/* Contextual task creation is visible only when a project is rolled open. */
.project-inline-add-task {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 8px 0 2px;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  color: var(--accent);
  font: inherit;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .01em;
  cursor: pointer;
}
.project-inline-add-task:active { opacity: .62; }
.project-inline-add-plus {
  font-size: 19px;
  font-weight: 400;
  line-height: 1;
  transform: translateY(-1px);
}

/* Rename Project now follows the same section/action geometry as Add Task. */
.project-rename-section { margin-top: 24px; }


/* =====================================================================
   v204 — Timeline centring/layering + visible project Add Task.
   ===================================================================== */

/* The Today guide belongs to the schedule grid, behind all task content.
   Keep bars, percentages, and task annotation text fully legible above it. */
#ganttInner .tl-today-line { z-index: 1 !important; }
#ganttInner .tl-bar,
#ganttInner .tl-overdue-tail,
#ganttInner .tl-task-info,
#ganttInner .tl-task-info.compact,
#ganttInner .tl-task-info.with-project { z-index: 2; }

/* Add Task is the first row revealed below the project header, so it is
   immediately discoverable even when a project contains a long task list. */
.project-inline-add-task {
  min-height: 44px;
  margin: 0;
  padding: 9px 14px;
  border-top: 0;
  border-bottom: 1px solid var(--divider);
  background: color-mix(in srgb, var(--surface-2) 44%, transparent);
}
.project-inline-add-task + .task { border-top: 0 !important; }

/* =====================================================================
   v205 — Timeline Today top-focus + floating Add Task action.
   ===================================================================== */

/* Add Task now lives with the floating project controls rather than inside
   the task rows. It intentionally shares Close Project's pill styling. */
.project-add-overlay {
  bottom: 59px !important;
}


/* =====================================================================
   v206 — side-by-side floating project actions.
   ===================================================================== */

/* Keep both project actions on one line: Close Project on the left and
   Add Task on the right. The wrapper owns the floating position so the
   button labels can keep their natural widths without overlap. */
.project-float-actions {
  position: absolute;
  right: 10px;
  bottom: 15px;
  z-index: 28;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  pointer-events: none;
}
.project-float-actions .project-close-overlay {
  position: static !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  pointer-events: auto;
}
.project-float-actions .project-add-overlay {
  bottom: auto !important;
}

/* =====================================================================
   v235 — managed workload overlap
   Red = conflict needs a decision. Amber = approved overlap.
   ===================================================================== */
.task-overlap-badge {
  display: inline-flex; align-items: center; min-height: 20px; padding: 2px 7px;
  border-radius: 999px; font-size: 9px; line-height: 1; font-weight: 800;
  letter-spacing: .035em; white-space: nowrap;
}
.task-overlap-badge.unresolved { background:#F4D9D7; color:#9D3733; box-shadow:inset 0 0 0 1px rgba(157,55,51,.22); }
.task-overlap-badge.approved { background:#F2E4C7; color:#8A5B17; box-shadow:inset 0 0 0 1px rgba(138,91,23,.20); }
.tl-overlap-segment { position:absolute; bottom:0; height:4px; z-index:3; pointer-events:none; }
.tl-overlap-segment.unresolved { background:#B8453F; }
.tl-overlap-segment.approved { background:#C88A2A; }
.tl-bar .tl-bar-pct { z-index:4; }
.overlap-confirm-wrap { position:fixed; inset:0; z-index:80; }
.overlap-confirm-card {
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%); width:min(360px,90vw);
  max-height:min(650px,82vh); overflow:auto; z-index:81; background:var(--surface); color:var(--ink);
  border-radius:22px; padding:22px 18px 18px; box-shadow:0 22px 54px rgba(0,0,0,.28);
}
.overlap-confirm-card h3 { margin:0 0 7px; font-size:19px; }
.overlap-confirm-intro { margin:0 0 14px; color:var(--ink-2); font-size:13px; line-height:1.4; }
.overlap-conflict-list { display:grid; gap:9px; }
.overlap-conflict-item {
  display:grid; gap:3px; padding:11px 12px; border-radius:13px;
  background:color-mix(in srgb,#B8453F 8%,var(--surface));
  border:1px solid color-mix(in srgb,#B8453F 28%,var(--line));
}
.overlap-conflict-item strong { font-size:14px; }
.overlap-conflict-item span { color:#9D3733; font-size:12px; font-weight:750; }
.overlap-conflict-item small { color:var(--ink-2); font-size:11px; line-height:1.35; }
.overlap-conflict-dates { font-variant-numeric:tabular-nums; }
.overlap-confirm-actions { display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:16px; }
.overlap-confirm-actions .overlap-allow { grid-column:1 / -1; }

/* =====================================================================
   v236 — exact workload conflict detail inside every affected task.
   Keeps the task's normal status colour; conflict state is communicated
   only by compact red/amber detail cards.
   ===================================================================== */
.workload-detail-section {
  margin: 14px 0 6px;
  padding: 14px 0 0;
  border-top: 1px solid var(--line);
}
.workload-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
}
.workload-detail-head > strong {
  font-size: 12px;
  letter-spacing: .08em;
  color: var(--ink-2);
}
.workload-detail-head > span {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .035em;
  padding: 4px 7px;
  border-radius: 999px;
}
.workload-detail-head > span.unresolved { background:#F4D9D7; color:#9D3733; }
.workload-detail-head > span.approved { background:#F2E4C7; color:#8A5B17; }
.workload-worker-group { display:grid; gap:7px; margin:0 0 12px; }
.workload-worker-name { font-size:14px; font-weight:800; color:var(--ink); }
.workload-conflict-card {
  display:grid;
  gap:4px;
  padding:10px 11px;
  border:1px solid var(--line);
  border-left-width:3px;
  border-radius:11px;
  background:var(--bg);
}
.workload-conflict-card.unresolved { border-left-color:#B8453F; }
.workload-conflict-card.approved { border-left-color:#C88A2A; }
.workload-conflict-card-top { display:flex; justify-content:space-between; gap:8px; align-items:flex-start; }
.workload-conflict-card-top strong { min-width:0; font-size:13px; line-height:1.25; }
.workload-conflict-card-top span {
  flex:0 0 auto;
  font-size:10px;
  font-weight:800;
  white-space:nowrap;
  color:var(--ink-2);
}
.workload-conflict-card.unresolved .workload-conflict-card-top span { color:#9D3733; }
.workload-conflict-card.approved .workload-conflict-card-top span { color:#8A5B17; }
.workload-conflict-workspace { font-size:10px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--teal); }
.workload-conflict-task { font-size:13px; line-height:1.3; color:var(--ink); }
.workload-conflict-days { font-size:12px; line-height:1.35; color:var(--ink-2); font-variant-numeric:tabular-nums; }

/* =====================================================================
   v237 — compact workload disclosure.
   One summary line; conflict cards stay hidden until explicitly opened.
   ===================================================================== */
.workload-disclosure {
  margin: 12px 0 4px;
}
.workload-disclosure-toggle {
  width: 100%;
  min-height: 38px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 0;
  border: 0;
  background: transparent;
  color: var(--ink-2);
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.workload-disclosure-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  color: var(--ink-3);
}
.workload-disclosure-icon svg { width: 19px; height: 19px; display: block; }
.workload-disclosure-text {
  min-width: 0;
  flex: 1 1 auto;
  line-height: 1.42;
}
.workload-disclosure-chevron {
  flex: 0 0 auto;
  color: var(--ink-3);
  font-size: 21px;
  line-height: 1;
  transform: rotate(0deg);
  transition: transform .16s ease;
}
.workload-disclosure-toggle[aria-expanded="true"] .workload-disclosure-chevron {
  transform: rotate(90deg);
}
.workload-detail-section {
  margin: 6px 0 10px;
  padding: 8px 0 0;
  border-top: 1px solid var(--line);
}
.workload-detail-section[hidden] { display: none !important; }
.workload-worker-group:last-child { margin-bottom: 0; }

/* Timeline detail: the disclosure replaces the old standalone fact row. */
.tl-detail-facts > .tl-detail-workload-disclosure {
  margin: -2px 0 0;
}
.timeline-detail-sheet .tl-detail-workload-disclosure .workload-disclosure-toggle {
  font-size: 14.5px;
  min-height: 34px;
  padding: 0;
}
.timeline-detail-sheet .tl-detail-workload-disclosure .workload-detail-section {
  margin-left: 30px;
}

/* Edit/read-only sheets use the same collapsed behaviour. */
.task-edit-workload-disclosure,
.task-readonly-workload-disclosure {
  margin: 14px 0 8px;
  padding-top: 4px;
  border-top: 1px solid var(--line);
}
.task-edit-workload-disclosure .workload-disclosure-toggle,
.task-readonly-workload-disclosure .workload-disclosure-toggle {
  font-size: 13.5px;
  font-weight: 650;
}

/* =====================================================================
   v238 — two-line workload disclosure with motion.
   "Check detail" sits under the summary and expands/collapses smoothly.
   ===================================================================== */
.workload-disclosure-toggle {
  align-items: flex-start;
}
.workload-disclosure-copy {
  min-width: 0;
  flex: 1 1 auto;
  display: grid;
  gap: 3px;
}
.workload-disclosure-text {
  display: block;
  flex: none;
}
.workload-disclosure-action {
  display: inline-flex;
  align-items: center;
  width: max-content;
  gap: 5px;
  color: var(--teal);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
}
.workload-disclosure-chevron {
  display: inline-block;
  color: currentColor;
  font-size: 15px;
  line-height: 1;
  transform: rotate(0deg);
  transform-origin: center;
  transition: transform .28s cubic-bezier(.2,.75,.25,1);
}
.workload-disclosure.is-open .workload-disclosure-chevron {
  transform: rotate(180deg);
}
.workload-disclosure-panel {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-4px);
  transition:
    grid-template-rows .30s cubic-bezier(.2,.75,.25,1),
    opacity .20s ease,
    transform .30s cubic-bezier(.2,.75,.25,1);
}
.workload-disclosure-panel-inner {
  min-height: 0;
  overflow: hidden;
}
.workload-disclosure.is-open .workload-disclosure-panel {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: translateY(0);
}
.workload-disclosure .workload-detail-section {
  margin-top: 7px;
}
.timeline-detail-sheet .tl-detail-workload-disclosure .workload-disclosure-action {
  font-size: 12px;
}

/* =====================================================================
   v239 — workload detail opens upward without moving the lower sections.
   The disclosure stays in normal flow; the detail panel floats above it.
   ===================================================================== */
.workload-disclosure {
  position: relative;
}
.workload-disclosure-action {
  align-items: center;
  gap: 7px;
  font-size: 14px;
  line-height: 1.1;
}
.workload-disclosure-chevron {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  line-height: 0;
  color: currentColor;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  transition: transform .28s cubic-bezier(.2,.75,.25,1);
}
.workload-disclosure-chevron::before {
  content: "";
  width: 7px;
  height: 7px;
  box-sizing: border-box;
  border-right: 1.7px solid currentColor;
  border-bottom: 1.7px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transform-origin: 50% 50%;
}
.workload-disclosure.is-open .workload-disclosure-chevron {
  transform: rotate(180deg);
}

/* The panel rises upward and does not consume document-flow height, so
   Progress / Attachments / action buttons below remain at the same level. */
.workload-disclosure-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 5px);
  z-index: 24;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(12px) scale(.985);
  transform-origin: bottom center;
  transition:
    opacity .20s ease,
    transform .30s cubic-bezier(.2,.75,.25,1),
    visibility 0s linear .30s;
}
.workload-disclosure-panel-inner {
  min-height: 0;
  max-height: min(44vh, 360px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 4px 10px 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg);
  box-shadow: 0 -9px 24px rgba(0,0,0,.10);
}
.workload-disclosure.is-open {
  z-index: 25;
}
.workload-disclosure.is-open .workload-disclosure-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0) scale(1);
  transition:
    opacity .20s ease,
    transform .30s cubic-bezier(.2,.75,.25,1),
    visibility 0s;
}
.workload-disclosure .workload-detail-section {
  margin: 0;
  padding-top: 4px;
  border-top: 0;
}
.timeline-detail-sheet .tl-detail-workload-disclosure .workload-disclosure-action {
  font-size: 13.5px;
}
.timeline-detail-sheet .tl-detail-workload-disclosure .workload-detail-section {
  margin-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  .workload-disclosure-panel,
  .workload-disclosure-chevron {
    transition-duration: .01ms !important;
  }
}


/* =====================================================================
   v240 — upward-only overlap reveal, desktop Timeline grab-pan,
   and scrollbar-free popup sheets (scrolling remains enabled).
   ===================================================================== */

/* Keep the disclosure's lower edge anchored. The content is revealed from
   bottom to top, so the motion reads like the same dropdown animation but
   only grows upward; Progress / Attachments below never move. */
.workload-disclosure-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 5px);
  z-index: 24;
  display: block;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(7px);
  clip-path: inset(100% 0 0 0 round 13px);
  transform-origin: bottom center;
  transition:
    clip-path .30s cubic-bezier(.2,.75,.25,1),
    opacity .20s ease,
    transform .30s cubic-bezier(.2,.75,.25,1),
    visibility 0s linear .30s;
}
.workload-disclosure.is-open .workload-disclosure-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  clip-path: inset(0 0 0 0 round 13px);
  transition:
    clip-path .30s cubic-bezier(.2,.75,.25,1),
    opacity .20s ease,
    transform .30s cubic-bezier(.2,.75,.25,1),
    visibility 0s;
}

/* v379 — Desktop/web Timeline canvases behave like grab-able boards in both
   axes. Native wheel/trackpad scrolling still works, and mobile keeps touch scrolling. */
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  #ganttScroll,
  #dGanttScroll {
    cursor: grab;
  }
  #ganttScroll.timeline-drag-panning,
  #dGanttScroll.timeline-drag-panning {
    cursor: grabbing;
    user-select: none;
    -webkit-user-select: none;
  }
  #ganttScroll.timeline-drag-panning *,
  #dGanttScroll.timeline-drag-panning * {
    user-select: none !important;
    -webkit-user-select: none !important;
  }
}

/* Popup pages remain vertically scrollable but no longer show a vertical
   scrollbar. This covers the standard sheets and the specialised popup/media
   surfaces that can scroll independently. */
.sheet,
.sheet *,
.team-sheet,
.timeline-month-grid,
.roll-menu,
.project-area-menu,
.roll-timeline-project-chooser.open,
.tl-media-popup-body,
.task-local-popup-body,
.tl-fullscreen-media-note,
.tl-fullscreen-photo-scroll,
.tl-pdf-note-tray,
.tl-pdf-page-scroll,
.tl-pdf-attachment-detail,
.workload-disclosure-panel-inner,
.overlap-confirm-card,
.confirm-card {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.sheet::-webkit-scrollbar,
.sheet *::-webkit-scrollbar,
.team-sheet::-webkit-scrollbar,
.timeline-month-grid::-webkit-scrollbar,
.roll-menu::-webkit-scrollbar,
.project-area-menu::-webkit-scrollbar,
.roll-timeline-project-chooser.open::-webkit-scrollbar,
.tl-media-popup-body::-webkit-scrollbar,
.task-local-popup-body::-webkit-scrollbar,
.tl-fullscreen-media-note::-webkit-scrollbar,
.tl-fullscreen-photo-scroll::-webkit-scrollbar,
.tl-pdf-note-tray::-webkit-scrollbar,
.tl-pdf-page-scroll::-webkit-scrollbar,
.tl-pdf-attachment-detail::-webkit-scrollbar,
.workload-disclosure-panel-inner::-webkit-scrollbar,
.overlap-confirm-card::-webkit-scrollbar,
.confirm-card::-webkit-scrollbar {
  width: 0 !important;
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .workload-disclosure-panel {
    transition-duration: .01ms !important;
  }
}


/* =====================================================================
   v242 — workload detail expands in normal flow without overlap.
   The following section stays visually anchored while the sheet scrolls
   upward by the same amount, so the newly revealed detail grows upward.
   ===================================================================== */
.workload-disclosure {
  position: relative;
}
.workload-disclosure-panel {
  position: relative;
  left: auto;
  right: auto;
  bottom: auto;
  z-index: auto;
  display: block;
  height: 0;
  max-height: none;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transform-origin: top center;
  clip-path: none;
  transition:
    height .30s cubic-bezier(.2,.75,.25,1),
    opacity .20s ease,
    transform .30s cubic-bezier(.2,.75,.25,1),
    visibility 0s linear .30s;
}
.workload-disclosure.is-open .workload-disclosure-panel {
  height: var(--workload-expanded-height, 280px);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  clip-path: none;
  transition:
    height .30s cubic-bezier(.2,.75,.25,1),
    opacity .20s ease,
    transform .30s cubic-bezier(.2,.75,.25,1),
    visibility 0s;
}
.workload-disclosure-panel-inner {
  box-sizing: border-box;
  height: 100%;
  max-height: none;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding: 4px 10px 6px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--bg);
  box-shadow: none;
}
.workload-disclosure-action,
.workload-disclosure-chevron {
  align-items: center;
  align-self: center;
}
@media (prefers-reduced-motion: reduce) {
  .workload-disclosure-panel {
    transition-duration: .01ms !important;
  }
}

/* =====================================================================
   v243 — workload expanded-detail visual spacing.
   Slightly lighter detail surface, more breathing room between conflict
   frames, and a clearer gap below the Check detail control.
   ===================================================================== */
.workload-disclosure-panel {
  box-sizing: border-box;
  padding-top: 11px;
}
.workload-disclosure-panel-inner {
  height: auto;
  min-height: 0;
  padding: 10px 11px 11px;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--bg) 72%, var(--surface) 28%);
}
.workload-worker-group {
  gap: 11px;
  margin-bottom: 17px;
}
.workload-conflict-card {
  padding: 11px 12px;
  background: var(--surface-2);
  background: color-mix(in srgb, var(--bg) 58%, var(--surface) 42%);
}
.workload-conflict-card + .workload-conflict-card {
  margin-top: 3px;
}

/* =====================================================================
   v245 — workload detail as a divider list, not cards.
   The expanded detail uses the same surface as the task-detail sheet.
   ===================================================================== */
.workload-disclosure-panel-inner {
  background: var(--option-panel);
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 10px 0 8px;
}
.workload-disclosure .workload-detail-section {
  background: transparent;
  border-top: 0;
  padding-top: 0;
}
.workload-worker-group {
  gap: 0;
  margin: 0;
  background: transparent;
}
.workload-worker-group + .workload-worker-group {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--divider);
}
.workload-worker-name {
  padding: 0 4px 8px;
}
.workload-conflict-card,
.workload-conflict-card.unresolved,
.workload-conflict-card.approved {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 10px 4px 13px;
  border: 0;
  border-bottom: 1px solid var(--divider);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.workload-conflict-card + .workload-conflict-card {
  margin-top: 0;
}
.workload-conflict-card:last-child {
  border-bottom: 0;
  padding-bottom: 4px;
}


/* =====================================================================
   v245 — overlap detail top divider + editor footer creation actions.
   ===================================================================== */
.workload-disclosure-panel-inner {
  border-top: 1px solid var(--divider);
  padding-top: 14px;
}
@media (max-width: 430px) {
  .tabbar .tab {
    letter-spacing: .035em !important;
    font-size: 9.5px !important;
  }
}


/* =====================================================================
   v246 — simpler Add Task glyph + tighter desktop footer navigation.
   Mobile keeps the existing full-width spacing.
   ===================================================================== */
@media (min-width: 768px) {
  .tabbar {
    justify-content: center;
    gap: 18px;
  }
  .tabbar .tab {
    flex: 0 0 92px;
  }
}


/* =====================================================================
   v247 — Add Task corner-plus glyph, 50px desktop footer spacing,
   thinner rounded workload-overlap timeline indicator.
   ===================================================================== */
.tl-overlap-segment {
  height: 3px;
  border-radius: 999px;
}
@media (min-width: 768px) {
  .tabbar {
    gap: 50px;
  }
}

/* =====================================================================
   v248 — Tasks-page action cleanup.
   The footer Add Task action is now the only Add Task entry point.
   ===================================================================== */

/* =====================================================================
   v250 — desktop Close Project aligned to actual task-row content edge.
   The v248 block was written with escaped newlines and therefore did not
   parse as CSS; this real rule intentionally mirrors the desktop Tasks list
   horizontal padding so the pill follows the row edge, not the viewport.
   ===================================================================== */
@media (min-width: 768px) {
  #vwTasks .project-float-actions,
  #dVwTasks .project-float-actions {
    right: max(20px, calc((100% - 860px) / 2 + 20px));
    bottom: 40px;
  }
}

/* =====================================================================
   v250 — desktop Close Project moved 40px lower toward the footer.
   Keep the v250 task-row right-edge alignment unchanged.
   ===================================================================== */
@media (min-width: 768px) {
  #vwTasks .project-float-actions,
  #dVwTasks .project-float-actions {
    bottom: 0;
  }
}


/* v251 · Add Task area reuse */
.task-area-create-control { display: grid; gap: 10px; width: 100%; }
.task-area-create-control select,
.task-area-create-control input { width: 100%; }
.task-area-new-input[hidden] { display: none !important; }

/* =====================================================================
   v251 — keep Close Project 40px above the footer on desktop.
   The Tasks view ends at the footer edge, so bottom:40px creates the
   requested visible gap while preserving task-row right-edge alignment.
   ===================================================================== */
@media (min-width: 768px) {
  #vwTasks .project-float-actions,
  #dVwTasks .project-float-actions {
    bottom: 40px;
  }
}

/* =====================================================================
   v252 — desktop Close Project 20px above the footer.
   Preserve task-row right-edge alignment; only reduce the footer gap.
   ===================================================================== */
@media (min-width: 768px) {
  #vwTasks .project-float-actions,
  #dVwTasks .project-float-actions {
    bottom: 20px;
  }
}

/* =====================================================================
   v255 — Timeline scheduled/actual On Hold periods.
   Hold dates are part of the schedule even before they become the task's
   effective status, so the bar shows the reserved hold span in-place.
   ===================================================================== */
.tl-hold-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
  background: var(--st-hold-bar);
  color: #fff;
  border-radius: 999px;
}
.tl-hold-segment-label {
  display: block;
  max-width: 100%;
  padding: 0 5px;
  overflow: hidden;
  color: inherit;
  font-size: 8px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .03em;
  text-transform: uppercase;
  text-overflow: clip;
  white-space: nowrap;
}
/* Keep the percentage readable above a hold segment, while workload overlap
   remains the top-most 3px signal. */
.tl-bar-pct { z-index: 2; }
.tl-overlap-segment { z-index: 3; }

/* ========================================================= v257 header controls
   Header order: Notifications, Theme, Account/Log out.  The final account
   icon keeps the existing account/menu sheet so workspace, team and language
   controls remain available alongside Log out. */
.mast-notify-btn.on {
  color: var(--accent);
}
.mast-notify-btn,
.mast-account-btn { position: relative; }
@media (max-width: 520px) {
  .mast-right { gap: 0; }
  .mast-right .icon-btn { width: 34px; }
}


/* ========================================================= v258 header account icon
   Use a neutral account/person icon rather than a logout symbol.  Nudge the
   complete header-action cluster 4px toward the right edge without changing
   the centered page title. */
.mast-right {
  transform: translateX(4px);
}

/* ========================================================= v267 activity notifications
   Bell is now an unread activity centre. Browser permission is optional and
   can be enabled inside the activity sheet. */
.mast-notify-btn .notify-badge {
  position: absolute;
  top: -2px;
  right: -3px;
  min-width: 17px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--magenta);
  color: #fff;
  font-size: 9px;
  font-weight: 800;
  line-height: 16px;
  text-align: center;
  box-sizing: border-box;
  pointer-events: none;
}
.mast-notify-btn .notify-badge.hidden { display: none; }
.mast-notify-btn,
.mast-notify-btn.on,
.mast-notify-btn.has-unread { color: var(--accent); }
.activity-sheet { padding-bottom: 28px; }
.activity-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
@media (max-width: 520px) {
  .activity-sheet-head { gap: 12px; }
  .activity-notify-copy { align-items: flex-start; }
}
.activity-sheet-head h2 { margin-bottom: 3px; }
.activity-sheet-head .where { margin-bottom: 0; }
.activity-notify-switch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
}
.activity-notify-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  line-height: 1.15;
}
.activity-notify-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
}
.activity-notify-state {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.activity-notify-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.activity-notify-slider {
  position: relative;
  width: 46px;
  height: 28px;
  border-radius: 999px;
  background: var(--magenta);
  box-shadow: inset 0 0 0 1px rgba(161, 26, 118, .12);
  transition: background .18s ease, box-shadow .18s ease;
}
.activity-notify-slider::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.18);
  transition: transform .18s ease;
}
.activity-notify-input:checked + .activity-notify-slider {
  background: var(--accent);
  box-shadow: inset 0 0 0 1px rgba(14, 110, 112, .12);
}
.activity-notify-input:checked + .activity-notify-slider::after {
  transform: translateX(18px);
}
.activity-notify-input:disabled + .activity-notify-slider { opacity: .65; }
.activity-list {
  border-top: 1px solid var(--line);
  margin-top: 20px;
}
.activity-row {
  position: relative;
  padding: 15px 2px 16px;
  border-bottom: 1px solid var(--line);
}
.activity-row.unread::before {
  content: '';
  position: absolute;
  left: -9px;
  top: 21px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}
.activity-row-top {
  display: flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  font-size: 11px;
  color: var(--ink-3);
}
.activity-row-top strong {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
}
.activity-row-top time { margin-left: auto; white-space: nowrap; }
.activity-workspace {
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 8px;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .055em;
}
.activity-row-title {
  margin-top: 7px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.activity-row-detail {
  margin-top: 4px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--ink-2);
  overflow-wrap: anywhere;
}
.activity-empty {
  padding: 28px 2px;
  color: var(--ink-3);
  font-size: 13px;
}
@media (max-width: 520px) {
  .activity-sheet-head { display: block; }
  .activity-notify-switch { margin-top: 12px; }
}

/* ========================================================= v268 per-save member notification choice */
.notify-members-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 0;
  margin-top: 10px;
  border-top: 1px solid var(--line);
}
.notify-members-copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 3px;
}
.notify-members-copy strong {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
}
.notify-members-copy span {
  font-size: 11px;
  line-height: 1.35;
  color: var(--ink-3);
}
.notify-members-choices {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 2px;
  border-radius: 999px;
  background: var(--soft);
  box-shadow: inset 0 0 0 1px var(--line);
}
.notify-members-choices button {
  min-width: 48px;
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.notify-members-choices button.on {
  background: var(--accent);
  color: var(--accent-ink);
  box-shadow: 0 1px 4px rgba(0,0,0,.12);
}
@media (max-width: 520px) {
  .notify-members-control { gap: 10px; }
  .notify-members-choices button { min-width: 44px; padding: 0 10px; }
}


/* ========================================================= v270 global Admin notify control
   This control belongs to the whole task/project Save, not to Media. */
.notify-members-control.admin-notify-global {
  margin: 14px 0 18px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, var(--line));
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}


/* =====================================================================
   v277 — Login logo spacing + Admin Timeline worker-name display toggle.
   ===================================================================== */
/* Requested geometry: exactly 100px between the A2+ DESIGN wordmark and
   Project Timeline on the login screen. */
.login-card .auth-wordmark {
  margin-bottom: 100px;
}
.login-card .app-name {
  margin-top: 0;
}

/* Admin-only switch shown inside Timeline Filters so the compact mobile
   Timeline toolbar does not gain another permanent top-level control. */
.roll-timeline-worker-switch {
  width: 100%;
  min-height: 48px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 7px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.roll-timeline-worker-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.roll-timeline-worker-label {
  font-size: 12px;
  font-weight: 690;
  line-height: 1.15;
}
.roll-timeline-worker-state {
  font-size: 9px;
  font-weight: 780;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.roll-timeline-worker-track {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-3) 22%, transparent);
  transition: background .16s ease;
}
.roll-timeline-worker-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  transition: transform .16s ease;
}
.roll-timeline-worker-switch.on .roll-timeline-worker-track {
  background: var(--accent);
}
.roll-timeline-worker-switch.on .roll-timeline-worker-thumb {
  transform: translateX(18px);
}

/* Worker names are deliberately secondary to AREA > TASK and remain on the
   same compact Timeline annotation line. */
#ganttInner .tl-info-workers,
#dGanttInner .tl-info-workers {
  flex: 0 0 auto;
  font-size: 10.6px;
  font-weight: 650;
  color: var(--ink-3);
  white-space: nowrap;
}


/* =====================================================================
   v278 — Login title alignment + Team-page Timeline worker switch.
   ===================================================================== */
/* Match Project Timeline to the same vertical title position used by
   "Choose where to work" on the workspace picker. The workspace title sits
   after a 52px kicker gap + 12px kicker line + 4px title margin (68px total).
   Mobile uses the workspace picker's 44px kicker gap (60px total). */
.login-card .auth-wordmark {
  margin-bottom: 0;
}
.login-card .app-name {
  margin-top: 68px;
  transform: translateX(-4px);
}
@media (max-width: 640px) {
  .login-card .app-name {
    margin-top: 60px;
  }
}

/* The Timeline worker-name preference lives on the main Team Management page,
   not in an individual member form or Timeline filter menu. */
.team-timeline-worker-control {
  margin: 4px 0 18px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
}
.team-timeline-worker-switch {
  width: 100%;
  min-height: 46px;
  border: 0;
  background: transparent;
  color: inherit;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  text-align: left;
  font: inherit;
  cursor: pointer;
}
.team-timeline-worker-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.team-timeline-worker-label {
  font-size: 12px;
  font-weight: 700;
  line-height: 1.2;
}
.team-timeline-worker-state {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  color: var(--ink-3);
}
.team-timeline-worker-track {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-3) 22%, transparent);
  transition: background .16s ease;
}
.team-timeline-worker-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0,0,0,.22);
  transition: transform .16s ease;
}
.team-timeline-worker-switch.on .team-timeline-worker-track {
  background: var(--accent);
}
.team-timeline-worker-switch.on .team-timeline-worker-thumb {
  transform: translateX(18px);
}

/* Requested Timeline reading order:
   AREA > TASK    DAYS    WORKERS */
#ganttInner .tl-info-days,
#dGanttInner .tl-info-days {
  margin-left: 3px;
}
#ganttInner .tl-info-workers,
#dGanttInner .tl-info-workers {
  margin-left: 8px;
}

/* =====================================================================
   v280 — Global worker-name visibility + balanced Timeline annotation.
   Admin controls visibility once in Team Management; every user sees the
   same worker-name state. Duration is visually centered between task and names.
   ===================================================================== */
#ganttInner .tl-info-days,
#dGanttInner .tl-info-days {
  margin-left: 10px;
  margin-right: 10px;
}
#ganttInner .tl-info-workers,
#dGanttInner .tl-info-workers {
  margin-left: 0;
}

/* =====================================================================
   v282 — Tighten Timeline duration spacing by one step.
   Keep DAYS centered between task title and worker names, with a slightly
   closer visual gap on both sides.
   ===================================================================== */
#ganttInner .tl-info-days,
#dGanttInner .tl-info-days {
  margin-left: 8px;
  margin-right: 8px;
}


/* =====================================================================
   v283 — Admin Recent Activity recovery + tighter Timeline annotation.
   ===================================================================== */
.activity-row-body {
  display: flex;
  align-items: center;
  gap: 12px;
}
.activity-row-copy {
  flex: 1 1 auto;
  min-width: 0;
}
.activity-recover-btn {
  flex: 0 0 auto;
  align-self: center;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent);
  padding: 7px 12px;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
}
.activity-recover-btn:hover { background: color-mix(in srgb, var(--accent) 9%, transparent); }
.activity-recover-btn:disabled { opacity: .58; cursor: default; }
.activity-recover-btn.done { border-color: var(--line); color: var(--ink-3); }
@media (max-width: 520px) {
  .activity-row-body { gap: 8px; }
  .activity-recover-btn { padding: 6px 9px; }
}

/* One step closer than v282 while keeping DAYS balanced between task/workers. */
#ganttInner .tl-info-days,
#dGanttInner .tl-info-days {
  margin-left: 6px;
  margin-right: 6px;
}

/* =====================================================================
   v284 — Recent Activity recovery is a dedicated far-right row action.
   Every Admin-visible deleted Task/Project row keeps a Recover/Recovered
   control in the right column, independent of the activity text layout.
   ===================================================================== */
.activity-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 12px;
  align-items: center;
}
.activity-row-content {
  min-width: 0;
}
.activity-row-action {
  align-self: center;
  justify-self: end;
  display: flex;
  align-items: center;
}
.activity-row-body {
  display: block;
}
@media (max-width: 520px) {
  .activity-row {
    column-gap: 8px;
  }
  .activity-row-action {
    min-width: max-content;
  }
}


/* ========================================================= v303 Admin delete notification choice */
.confirm-card .confirm-notify-control {
  margin: 12px 0 14px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

/* ========================================================= v327 external task parties */
.external-party-field {
  margin-bottom: 14px;
}
.external-party-control {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
}
.external-party-toggle {
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
}
.external-party-toggle.on {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
}
.external-party-field:not(.selected) .external-party-name {
  display: none;
}
.external-party-name {
  min-width: 0;
}
.task-external-party {
  white-space: nowrap;
}
body[data-workspace="design"] .external-party-toggle {
  border-radius: 0;
}

/* ========================================================= v329 Design freelancer picker */
body[data-workspace="design"] .freelancer-chooser {
  min-width: 0;
  width: 100%;
}
body[data-workspace="design"] .freelancer-select,
body[data-workspace="design"] .freelancer-new-input {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}
body[data-workspace="design"] .freelancer-select {
  min-height: 40px;
  padding: 0 34px 0 12px;
  border: 1px solid var(--line-2);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 12.5px;
}

/* =====================================================================
   v332 — Admin Recover notification choice in Recent Activity.
   Keep the choice compact beside Recover so each recovery can explicitly
   notify members or remain an Admin-only audit action.
   ===================================================================== */
.activity-row-action {
  gap: 8px;
}
.activity-recover-notify {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.activity-recover-notify-label {
  color: var(--ink-3);
  font-size: 9px;
  font-weight: 760;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.activity-recover-notify-choices {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 999px;
}
.activity-recover-notify-choices button {
  min-width: 28px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--ink-3);
  padding: 4px 7px;
  font: inherit;
  font-size: 9px;
  font-weight: 760;
  line-height: 1;
  cursor: pointer;
}
.activity-recover-notify-choices button:last-child {
  border-right: 0;
}
.activity-recover-notify-choices button.on {
  background: var(--ink);
  color: var(--surface, #fff);
}
@media (max-width: 520px) {
  .activity-row-action { gap: 5px; }
  .activity-recover-notify-label { display: none; }
  .activity-recover-notify-choices button {
    min-width: 24px;
    padding: 4px 5px;
    font-size: 8px;
  }
}


/* =====================================================================
   v333 — Recover controls stack vertically and Pick-date UX is direct.
   Keep NOTIFY YES/NO above the Recover button so the notification choice
   reads as part of the recovery action instead of a competing side control.
   ===================================================================== */
.activity-row-action {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 92px;
}
.activity-recover-notify {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
}
.activity-recover-btn {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .activity-row-action {
    gap: 5px;
    min-width: 84px;
  }
  .activity-recover-notify-label {
    display: inline;
    font-size: 8px;
  }
}


/* =====================================================================
   v334 — page pinch zoom + Recover control hierarchy.
   Browser page zoom is explicitly allowed across the app while preserving
   one-finger scroll directions. Dedicated drag handles keep touch-action:none.
   ===================================================================== */
html,
body,
.screen {
  touch-action: pan-x pan-y pinch-zoom;
}
.roll-menu,
.roll-option,
#vwTasks .list,
.task {
  touch-action: pan-y pinch-zoom;
}
.slide,
.task .mtext.slide,
.tl-ruler,
.tl-ruler * {
  touch-action: pan-x pinch-zoom;
}
.tl-scroll,
#ganttScroll,
.task .slide,
.task .mtext.slide,
.task-dates {
  touch-action: pan-x pan-y pinch-zoom;
}

/* Requested recovery stack:
   NOTIFY
   YES / NO
   Recover
*/
.activity-row-action {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-width: 92px;
}
.activity-recover-notify {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
}
.activity-recover-notify-label {
  display: block !important;
  width: 100%;
  text-align: center;
  line-height: 1.1;
}
.activity-recover-notify-choices {
  align-self: center;
}
.activity-recover-btn {
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .activity-row-action {
    min-width: 84px;
    gap: 5px;
  }
  .activity-recover-notify {
    gap: 3px;
  }
  .activity-recover-notify-label {
    display: block !important;
    font-size: 8px;
  }
}

/* =====================================================================
   v335 — Recovery action width alignment.
   NOTIFY, YES/NO and Recover share the same full control width.
   ===================================================================== */
.activity-row-action {
  width: 108px;
  max-width: 100%;
}
.activity-recover-notify,
.activity-recover-notify-label,
.activity-recover-notify-choices,
.activity-recover-btn {
  width: 100%;
  box-sizing: border-box;
}
.activity-recover-notify-choices {
  display: flex;
  align-self: stretch;
}
.activity-recover-notify-choices button {
  flex: 1 1 50%;
  width: 50%;
  min-width: 0;
  box-sizing: border-box;
}
@media (max-width: 520px) {
  .activity-row-action {
    width: 96px;
    max-width: 100%;
  }
}

/* =====================================================================
   v336 — Recover notification switch + dual-role assignment follow-through.
   The notification choice is one real switch-style button. Its control
   height is locked to the Recover button so the stack reads as one system.
   ===================================================================== */
.activity-row-action {
  --activity-recover-control-height: 30px;
}
.activity-recover-notify-choices {
  display: none;
}
.activity-recover-notify-switch,
.activity-recover-btn {
  width: 100%;
  height: var(--activity-recover-control-height);
  min-height: var(--activity-recover-control-height);
  box-sizing: border-box;
}
.activity-recover-notify-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink-3);
  padding: 3px 5px 3px 10px;
  font: inherit;
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.activity-recover-notify-switch.on {
  border-color: color-mix(in srgb, var(--accent) 52%, var(--line));
  color: var(--accent);
  background: color-mix(in srgb, var(--accent) 6%, transparent);
}
.activity-recover-notify-state {
  min-width: 28px;
  text-align: left;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.activity-recover-notify-track {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--ink-3) 22%, transparent);
  transition: background .16s ease;
}
.activity-recover-notify-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: 0 1px 3px rgba(0,0,0,.24);
  transition: transform .16s ease;
}
.activity-recover-notify-switch.on .activity-recover-notify-track {
  background: var(--accent);
}
.activity-recover-notify-switch.on .activity-recover-notify-thumb {
  transform: translateX(16px);
}
.activity-recover-notify-switch:disabled {
  opacity: .58;
  cursor: default;
}
.activity-recover-btn {
  padding-top: 0;
  padding-bottom: 0;
}
@media (max-width: 520px) {
  .activity-row-action {
    --activity-recover-control-height: 28px;
  }
  .activity-recover-notify-switch {
    padding-left: 8px;
    padding-right: 4px;
  }
}


/* =====================================================================
   v338 — Recover YES / switch / NO + Manager/Supervisor Timeline drag roles.
   ===================================================================== */
.activity-recover-notify-switch {
  display: grid;
  grid-template-columns: minmax(24px, 1fr) 36px minmax(24px, 1fr);
  align-items: center;
  justify-items: center;
  column-gap: 7px;
  padding: 3px 7px;
}
.activity-recover-notify-option {
  width: 100%;
  text-align: center;
  font-size: 9px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: .05em;
  color: var(--ink-3);
  transition: color .16s ease, opacity .16s ease;
}
.activity-recover-notify-switch.on .activity-recover-notify-option.yes {
  color: var(--accent);
  opacity: 1;
}
.activity-recover-notify-switch.on .activity-recover-notify-option.no {
  opacity: .58;
}
.activity-recover-notify-switch:not(.on) .activity-recover-notify-option.no {
  color: var(--ink);
  opacity: 1;
}
.activity-recover-notify-switch:not(.on) .activity-recover-notify-option.yes {
  opacity: .58;
}
.activity-recover-notify-switch:not(.on) .activity-recover-notify-track {
  background: color-mix(in srgb, var(--ink-3) 22%, transparent);
}
.activity-recover-notify-switch:not(.on) .activity-recover-notify-thumb {
  transform: translateX(0);
}
.activity-recover-notify-switch.on .activity-recover-notify-thumb {
  transform: translateX(16px);
}

.tl-bar.timeline-task-draggable {
  cursor: grab;
  -webkit-user-select: none;
  user-select: none;
  /* v382: keep pinch zoom native, but own one-finger movement so a mobile
     long-press can reliably switch from pan to task drag without pointercancel. */
  touch-action: pinch-zoom;
}
.tl-bar.timeline-task-dragging {
  z-index: 35;
  overflow: visible;
  cursor: grabbing;
  filter: none !important;
  box-shadow: 0 4px 14px rgba(0,0,0,.16), inset 0 0 0 1px color-mix(in srgb, currentColor 14%, transparent);
  transition: none !important;
}
.tl-task-info.timeline-task-dragging-info {
  z-index: 34;
  pointer-events: none;
  opacity: .72;
  transition: none !important;
}
.tl-bar.timeline-task-saving {
  pointer-events: none;
  opacity: .68;
}
.tl-drag-date {
  position: absolute;
  left: 50%;
  top: -30px;
  z-index: 60;
  transform: translateX(-50%);
  min-width: max-content;
  padding: 4px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  color: var(--ink);
  box-shadow: 0 3px 10px rgba(0,0,0,.14);
  font-size: 10px;
  font-weight: 750;
  line-height: 1.15;
  pointer-events: none;
}
@media (max-width: 639px) {
  .tl-bar.timeline-task-draggable { cursor: pointer; }
  .tl-bar.timeline-task-dragging { cursor: grabbing; }
}

/* =====================================================================
   v340 — Recover-only YES / NO segmented selector.
   Matches the visual behaviour of Site Timeline's MINE / ALL switch:
   one pill, two labels, and a sliding selected half. Other notification
   controls intentionally remain on the pre-v339 YES/NO button treatment.
   ===================================================================== */
.activity-recover-notify {
  width: 100%;
  display: block;
}
.activity-recover-notify-label,
.activity-recover-notify-switch,
.activity-recover-notify-choices {
  display: none !important;
}
.activity-recover-notify-segment {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 100%;
  height: var(--activity-recover-control-height);
  padding: 2px;
  gap: 0;
  overflow: hidden;
  border-radius: 999px;
  background: color-mix(in srgb, var(--bg) 76%, #000 24%);
  box-sizing: border-box;
}
.activity-recover-notify-segment::before {
  content: '';
  position: absolute;
  top: 2px;
  bottom: 2px;
  left: 2px;
  width: calc(50% - 2px);
  border-radius: 999px;
  background: #FFFFFF;
  transform: translateX(0);
  transition: transform .18s cubic-bezier(.2,.75,.25,1);
  pointer-events: none;
}
.activity-recover-notify-segment.no-on::before {
  transform: translateX(100%);
}
.activity-recover-notify-seg,
.activity-recover-notify-seg.on {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(var(--activity-recover-control-height) - 4px);
  padding: 0 6px;
  border: 0;
  background: transparent;
  color: color-mix(in srgb, var(--ink) 68%, transparent);
  font: inherit;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.activity-recover-notify-seg.on {
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .activity-recover-notify-segment {
    background: color-mix(in srgb, var(--bg) 74%, #000 26%);
  }
  :root:not([data-theme="light"]) .activity-recover-notify-segment::before {
    background: color-mix(in srgb, var(--surface) 94%, #fff 6%);
  }
}
:root[data-theme="dark"] .activity-recover-notify-segment {
  background: color-mix(in srgb, var(--bg) 74%, #000 26%);
}
:root[data-theme="dark"] .activity-recover-notify-segment::before {
  background: color-mix(in srgb, var(--surface) 94%, #fff 6%);
}


/* =====================================================================
   v341 — Compact Recover controls.
   Recover stack is 30px narrower than v340 while preserving its height.
   ===================================================================== */
.activity-row-action {
  width: 78px;
}
@media (max-width: 520px) {
  .activity-row-action {
    width: 66px;
  }
}

/* =====================================================================
   v342 — Dark-theme 0% In Progress contrast only.
   Roll back v341's dark text for started In Progress percentages. While
   schedule-driven progress is still 0% (normally Today before 17:00), the
   percentage sits on the light unfilled In Progress surface. Only that
   zero-percent label uses dark ink in Dark Theme. Once progress advances,
   the existing normal filled-bar percentage treatment applies again.
   ===================================================================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .tl-bar.s-inprogress .tl-bar-pct.dark {
    color: #2A2622;
    text-shadow: none;
  }
}
:root[data-theme="dark"] .tl-bar.s-inprogress .tl-bar-pct.dark {
  color: #2A2622;
  text-shadow: none;
}

/* v348 — Admin-only public Client Timeline publishing controls. */
.client-timeline-admin-section { margin-top: 2px; }
.client-share-status {
  margin: -2px 0 16px;
  color: var(--ink-3);
  font-size: 11px;
  line-height: 1.4;
}
.client-share-dates { gap: 10px; }
.client-share-link {
  width: 100%;
  font-size: 12px !important;
  direction: ltr;
}
.client-share-enable {
  display: flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 16px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 600;
}
.client-share-enable input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: var(--accent);
}
.client-share-actions {
  display: grid;
  grid-template-columns: minmax(0,1.35fr) repeat(3,minmax(0,1fr));
  gap: 8px;
  margin: 2px 0 14px;
}
.client-share-actions .btn {
  min-width: 0;
  padding-inline: 8px;
  font-size: 11px;
}
@media (max-width: 520px) {
  .client-share-actions { grid-template-columns: 1fr 1fr; }
  .client-share-actions .btn { min-height: 40px; }
}

/* v349 — keep the Admin Client Timeline publisher obvious at the top of Edit Project. */
.client-timeline-admin-section {
  margin: 8px 0 22px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface-2);
}
.client-timeline-admin-section .task-edit-section-title {
  margin-top: 0;
}

/* =====================================================================
   v375 — Site Timeline Today/landing safety restored to the known-good
   Site-specific layout. The active project title stays pinned directly
   below the sticky date ruler; the 13px protected gap is applied below
   that active project row by the Site snap logic. Design keeps the v374
   normal-flow fix because its timeline DOM/CSS stack is different.
   ===================================================================== */
#ganttInner .tl-project {
  position: sticky;
  top: var(--tl-ruler-h-z, 54px);
  z-index: 6;
}


/* =====================================================================
   v377 — Project-title handoff while vertically scrolling.
   Every Site project title sticks to the same ruler boundary. Because later
   project rows paint after earlier rows at the same stacking level, the next
   project title fully replaces/covers the previous title when it reaches the
   top instead of stacking below it.
   ===================================================================== */
#ganttInner .tl-project {
  position: sticky !important;
  top: var(--tl-ruler-h-z, 54px) !important;
  z-index: 50 !important;
}

/* =====================================================================
   v382 — Timeline task vertical sequence drag.
   Horizontal task drag still changes dates. Vertical task drag reorders only
   tasks in the same project with the same start date. The whole row lifts
   during ordering and the prospective destination row is marked subtly.
   ===================================================================== */
#ganttInner .tl-task.timeline-task-reordering {
  z-index: 42;
  isolation: isolate;
  pointer-events: none;
  box-shadow: 0 8px 22px rgba(0,0,0,.14);
  background-color: color-mix(in srgb, var(--timeline-board) 92%, var(--surface) 8%);
  transition: none !important;
  will-change: transform;
}
#ganttInner .tl-task.timeline-task-reorder-target {
  box-shadow: inset 0 2px 0 color-mix(in srgb, var(--accent) 72%, transparent),
              inset 0 -2px 0 color-mix(in srgb, var(--accent) 72%, transparent);
}
#ganttInner .tl-task.timeline-task-reordering .tl-bar,
#ganttInner .tl-task.timeline-task-reordering .tl-task-info {
  pointer-events: none;
}
.tl-drag-order {
  min-width: 38px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 639px) {
  #ganttInner .tl-task.timeline-task-reordering {
    box-shadow: 0 6px 18px rgba(0,0,0,.16);
  }
}

/* =====================================================================
   v383 — Timeline task multi-select + stable mobile reorder viewport.
   Selected Site/Design Timeline rows receive a clear accent treatment.
   Multi-selected rows can be dragged together horizontally; vertical block
   reorder remains restricted to one project + one shared start date.
   ===================================================================== */
#ganttInner .tl-task.timeline-task-selected,
#dGanttInner .tl-task.timeline-task-selected {
  background-color: color-mix(in srgb, var(--timeline-board) 92%, var(--accent) 8%);
}
#ganttInner .tl-task.timeline-task-selected .tl-bar,
#dGanttInner .tl-task.timeline-task-selected .tl-bar {
  outline: 2px solid color-mix(in srgb, var(--accent) 82%, transparent);
  outline-offset: 2px;
}
#ganttInner .tl-task.timeline-task-selected .tl-task-info,
#dGanttInner .tl-task.timeline-task-selected .tl-task-info {
  color: color-mix(in srgb, var(--ink) 72%, var(--accent) 28%);
}
#ganttInner .tl-task.timeline-task-selected.timeline-task-reordering,
#dGanttInner .tl-task.timeline-task-selected.timeline-task-reordering {
  background-color: color-mix(in srgb, var(--timeline-board) 84%, var(--accent) 16%);
}


/* =====================================================================
   v386 — Full Timeline task names + full day/day(s) wording.
   Timeline annotations no longer shrink/ellipsis the TASK name. The complete
   task title stays on one line and duration/worker metadata follows it.
   ===================================================================== */
#ganttInner .tl-task-info {
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
}
#ganttInner .tl-info-main {
  width: max-content !important;
  max-width: none !important;
  overflow: visible !important;
}
#ganttInner .tl-info-task {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
}

/* =====================================================================
   v405 — remove transient browser focus/tap highlight outlines app-wide.
   Intentional component borders remain unchanged; only focus/highlight
   rings generated by pointer/keyboard interaction are suppressed.
   ===================================================================== */
:focus,
:focus-visible {
  outline: none !important;
  outline-offset: 0 !important;
}
button,
input,
select,
textarea,
[tabindex] {
  -webkit-tap-highlight-color: transparent;
}

/* =====================================================================
   v430 — Site desktop Task Work Area selector.
   Use the app-controlled selector on desktop so the option highlight follows
   Site teal instead of the native Windows/Chrome blue. Edit Task uses the same full-width field geometry as Task. Design is untouched;
   mobile keeps its native select for touch ergonomics.
   ===================================================================== */
@media (min-width: 640px) {
  :is(.sheet.site-create-task-sheet, .sheet.site-edit-task-sheet) .task-area-create-control {
    position: relative;
    display: grid;
    gap: 10px;
    width: 100%;
  }
  :is(.sheet.site-create-task-sheet, .sheet.site-edit-task-sheet) .site-task-area-select + .roll-select.mini-roll {
    display: block;
    width: 100%;
    max-width: none;
    z-index: 32;
  }
  :is(.sheet.site-create-task-sheet, .sheet.site-edit-task-sheet) .site-task-area-select + .roll-select.mini-roll .roll-trigger {
    width: 100%;
    height: var(--tap);
    padding: 0 14px;
    border: 1px solid var(--line-2);
    border-radius: 11px;
    background: transparent;
    color: var(--ink);
    font-size: 16px;
    font-weight: 400;
    text-align: left;
  }
  :is(.sheet.site-create-task-sheet, .sheet.site-edit-task-sheet) .site-task-area-select + .roll-select.mini-roll .roll-trigger::after {
    margin-right: 1px;
  }
  :is(.sheet.site-create-task-sheet, .sheet.site-edit-task-sheet) .site-task-area-select + .roll-select.mini-roll .roll-menu {
    left: 0;
    right: auto;
    top: calc(100% + 4px);
    width: 100%;
    min-width: 100%;
    max-width: none;
    max-height: min(46dvh, 360px);
    padding: 4px;
    border: 1px solid var(--line-2);
    border-radius: 11px;
    background: var(--option-panel);
    box-shadow: 0 10px 24px rgba(29,24,21,.12);
    overflow-y: auto;
  }
  :is(.sheet.site-create-task-sheet, .sheet.site-edit-task-sheet) .site-task-area-select + .roll-select.mini-roll .roll-option {
    min-height: 38px;
    padding: 8px 12px;
    border-radius: 7px;
    background: transparent;
    color: var(--ink);
    font-size: 15px;
    font-weight: 400;
  }
  :is(.sheet.site-create-task-sheet, .sheet.site-edit-task-sheet) .site-task-area-select + .roll-select.mini-roll .roll-option.on {
    background: transparent;
    color: var(--accent);
    font-weight: 500;
  }
  :is(.sheet.site-create-task-sheet, .sheet.site-edit-task-sheet) .site-task-area-select + .roll-select.mini-roll .roll-option:active {
    background: var(--accent);
    color: var(--accent-ink);
  }
}
@media (min-width: 640px) and (hover: hover) and (pointer: fine) {
  :is(.sheet.site-create-task-sheet, .sheet.site-edit-task-sheet) .site-task-area-select + .roll-select.mini-roll .roll-option:hover {
    background: var(--accent);
    color: var(--accent-ink);
  }
}