/* Time Utilization v2. Layout from docs/time-utilization-v2-preview.html, approved 2026-10-21, on
   the app's shared masthead, hero and tokens from app.css. Every class is prefixed tu- because
   app.css already styles .figs, .fig, .card and .tile for other pages. */

/* Time types. Client work is the warm family and internal work the cool family. Each mode's set
   was checked with the dataviz palette validator on 2026-10-21 against the app's own card surface
   (#FFFFFF light, #211E19 dark): lightness band, chroma floor, colorblind separation of neighbors
   and normal-vision separation all pass. Client service in light mode and client presales in dark
   mode sit under 3:1 against the card, so every figure they carry is also printed as a number on
   its chip, in the tooltip and in the table view.
   The target grid is diverging around a gray midpoint, red under target and blue over. */
:root{
  --c-proj:#D1531F; --c-pre:#9B2D4E; --c-svc:#D99A1E; --c-iproj:#1B63A8; --c-isvc:#14978A; --c-catch:#7B5FC4;
  --c-unl:#DDD6C8; --tu-sel:#EAF1F5;
  --tu-u3:#BF3B3B; --tu-u2:#E39191; --tu-u1:#F4D3D3; --tu-mid:#EFEDE8; --tu-o1:#D6E4F2; --tu-o2:#9DBFE2; --tu-o3:#3F78B5;
  --tu-strong-ink:#FFFFFF;
}
:root[data-theme="dark"]{
  --c-proj:#D96A35; --c-pre:#AE4067; --c-svc:#B98A26; --c-iproj:#4683CF; --c-isvc:#1FA08E; --c-catch:#8C74D8;
  --c-unl:#3A342B; --tu-sel:#1B2733;
  --tu-u3:#D0605A; --tu-u2:#8E3A35; --tu-u1:#4A2A28; --tu-mid:#34302A; --tu-o1:#22344A; --tu-o2:#2E5A88; --tu-o3:#5F96D4;
  --tu-strong-ink:#1A1713;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --c-proj:#D96A35; --c-pre:#AE4067; --c-svc:#B98A26; --c-iproj:#4683CF; --c-isvc:#1FA08E; --c-catch:#8C74D8;
    --c-unl:#3A342B; --tu-sel:#1B2733;
    --tu-u3:#D0605A; --tu-u2:#8E3A35; --tu-u1:#4A2A28; --tu-mid:#34302A; --tu-o1:#22344A; --tu-o2:#2E5A88; --tu-o3:#5F96D4;
    --tu-strong-ink:#1A1713;
  }
}

.tu-wrap{ max-width:1500px; margin-inline:auto; padding-inline:clamp(1rem,3vw,2rem); }
main.tu-wrap{ padding-bottom:1rem; }
.tu-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.tu-muted{ color:var(--muted); }


/* The masthead carries the page's name now the title band is gone (Alex, 2026-10-22). */
.mh h1.mh-title{ margin:0; line-height:inherit; }

/* ---- the filter band: views, dates, departments and people in one row ---- */
/* The blue band (views and filters) and the gray band (time type chips) stay at the top together. */
.tu-sticky{ position:sticky; top:0; z-index:30; box-shadow:0 4px 10px rgba(26,26,26,.06); }
.tu-fbar{ background:var(--canvas); border-bottom:1px solid var(--rule); padding-top:.6rem; }
.tu-frow{ display:flex; align-items:center; gap:.5rem .7rem; flex-wrap:wrap; padding:.6rem 0 .5rem; }
.tu-fbar button, .tu-fbar input, .tu-fbar select{ font:inherit; }
/* The blue band holds the three views and nothing else (Alex, 2026-10-22), sized to the tabs. */
/* Two fixed rows at every width: the filters on top, with the period on the left and Departments,
   People and Reset on the right, and the tabs on the lower edge where the chosen tab meets the
   gray band. One row beside the tabs needed about 1,545px against the page's 1,436px, so it
   wrapped and unwrapped as labels changed length, and the band jumped (Alex, 2026-10-22). The
   tabs come first in the markup and column-reverse draws them last. */
.tu-bandrow{ display:flex; flex-direction:column-reverse; align-items:stretch; }
.tu-band .tu-fright{ margin-left:auto; }
/* The filters on the blue band sit on a light surface so they stand out from it (Alex, 2026-10-22).
   Every control is the same height, and the ones whose text changes have a fixed width, so a
   click never changes how many lines the band takes and the page below does not jump. */
.tu-band{ --tu-ctl-h:38px; }
.tu-band .tu-wrap{ position:relative; padding-top:1.15rem; }
.tu-band .tu-frow{ padding:0 0 .8rem; gap:.6rem .55rem; }
.tu-band .tu-seg, .tu-band .tu-step, .tu-band .tu-ddb, .tu-band .tu-bbtn, .tu-band .tu-custom input{ height:var(--tu-ctl-h);
  box-sizing:border-box; background:var(--paper); border:1px solid transparent; box-shadow:0 1px 2px rgba(0,0,0,.18); }
.tu-band .tu-seg button{ height:100%; display:inline-flex; align-items:center; color:var(--ink); padding:0 .7rem; font-size:.9rem;
  border-right-color:var(--rule); }
.tu-band .tu-seg button:hover{ background:var(--tint); }
/* The chosen preset takes the warm highlight, not the band's own blue, so it reads as chosen
   rather than as a hole in the control. */
.tu-band .tu-seg button[aria-pressed="true"]{ background:var(--on-blue-hot); color:#1E1A15; font-weight:700; }
.tu-band .tu-seg button[aria-pressed="true"]:hover{ background:var(--on-blue-hot); }
/* The period arrows are tinted so they read as buttons beside the period. */
.tu-band .tu-step button{ height:100%; width:38px; font-size:1.2rem; font-weight:700; line-height:1; color:var(--blue); background:var(--ms-bg); }
.tu-band .tu-step button:first-child{ border-right-color:var(--ms-line); }
.tu-band .tu-step button:last-child{ border-left-color:var(--ms-line); }
.tu-band .tu-step button:hover:not(:disabled){ background:var(--ms-line); }
.tu-band .tu-step button:disabled{ opacity:.4; }
:root[data-theme="dark"] .tu-band .tu-step button{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tu-band .tu-step button{ color:var(--bluesub); } }
.tu-band .tu-lab{ display:inline-flex; align-items:center; justify-content:center; box-sizing:border-box; width:12.5rem; min-width:0;
  padding:0 .6rem; color:var(--ink); font-size:.92rem; overflow:hidden; text-overflow:ellipsis; }
.tu-band .tu-ddb{ display:inline-flex; align-items:center; gap:.3rem; padding:0 .85rem; color:var(--muted); font-size:.9rem; }
.tu-band .tu-ddb:hover{ background:var(--tint); }
.tu-band .tu-ddb b{ color:var(--ink); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:1 1 auto; text-align:left; }
.tu-band .tu-ddb::after{ color:var(--muted); margin-left:.2rem; }
/* A set filter shows a clear mark in place of its arrow. */
.tu-band .tu-ddb.set::after{ display:none; }
.tu-clr{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; margin-left:.15rem;
  border-radius:50%; font-size:1rem; line-height:1; font-weight:700; color:var(--ink); background:var(--track); }
.tu-clr:hover{ background:var(--accent); color:#fff; }
.tu-band #ddb-dept{ width:14.5rem; }
.tu-band #ddb-ppl{ width:9.75rem; }
.tu-band .tu-ddb.set{ border-color:var(--on-blue-hot); box-shadow:0 0 0 2px var(--on-blue-hot); }
/* Reset and the custom range's shortcuts take the same light surface and height. */
.tu-band .tu-bbtn{ display:inline-flex; align-items:center; font:inherit; font-size:.9rem; font-weight:600; color:var(--ink); border-radius:9px;
  padding:0 .9rem; cursor:pointer; }
.tu-band .tu-bbtn:hover{ background:var(--tint); }
.tu-band .tu-custom{ color:var(--on-blue); font-size:.9rem; gap:.35rem; }
.tu-band .tu-custom input{ padding:0 .55rem; font-size:.9rem; border-radius:9px; }
/* Loading sits above the controls rather than among them, so it cannot push them onto a new line. */
.tu-band .tu-busy{ position:absolute; top:.2rem; right:clamp(1rem,3vw,2rem); color:var(--on-blue); font-size:.78rem; }
.tu-band .tu-ddp{ color:var(--ink); }
.tu-band .tu-ddp .tu-link{ color:var(--blue); }
.tu-band .tu-tabs button{ font-size:.95rem; font-weight:700; padding:.6rem 1.1rem .65rem; }
.tu-band .tu-tabs button:not([aria-selected="true"]):hover{ background:rgba(255,255,255,.08); }
.tu-tabs{ display:flex; gap:.25rem; }
.tu-tabs button{ font-family:inherit; border:0; background:transparent; color:var(--bluesub); padding:.5rem 1rem .55rem; font-size:.9rem; font-weight:600;
  border-radius:10px 10px 0 0; cursor:pointer; }
.tu-tabs button:hover{ color:var(--on-blue); }
.tu-tabs button[aria-selected="true"]{ background:var(--canvas); color:var(--ink); }
.tu-seg{ display:inline-flex; border:1px solid var(--rule); border-radius:9px; overflow:hidden; background:var(--paper); }
.tu-seg button{ border:0; border-right:1px solid var(--rule); background:transparent; padding:.32rem .65rem; font-size:.82rem;
  cursor:pointer; color:var(--ink); }
.tu-seg button:last-child{ border-right:0; }
.tu-seg button:hover{ background:var(--tint); }
.tu-seg button[aria-pressed="true"]{ background:var(--blue); color:var(--on-blue); font-weight:700; }
/* The arrows and the period sit in one bordered control (Alex, 2026-10-22). */
.tu-step{ display:inline-flex; align-items:stretch; border:1px solid var(--rule); border-radius:9px; overflow:hidden; background:var(--paper); }
.tu-step button{ width:30px; border:0; background:transparent; cursor:pointer; color:var(--ink); font-size:1rem; }
.tu-step button:hover:not(:disabled){ background:var(--tint); }
.tu-step button:first-child{ border-right:1px solid var(--rule); }
.tu-step button:last-child{ border-left:1px solid var(--rule); }
.tu-step button:disabled{ opacity:.35; cursor:default; }
.tu-lab{ min-width:10.5rem; text-align:center; font-weight:700; font-size:.86rem; padding:.32rem .6rem; white-space:nowrap; }
.tu-custom{ display:inline-flex; gap:.4rem; align-items:center; font-size:.82rem; color:var(--muted); flex-wrap:wrap; }
.tu-custom input{ border:1px solid var(--rule); border-radius:8px; padding:.22rem .4rem; background:var(--paper); color:var(--ink); }
.tu-link{ border:0; background:none; color:var(--blue); font-size:.8rem; font-weight:600; cursor:pointer; padding:.2rem .3rem; }
.tu-link:hover{ text-decoration:underline; }
:root[data-theme="dark"] .tu-link{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tu-link{ color:var(--bluesub); } }
.tu-busy{ font-size:.8rem; color:var(--muted); }
.tu-sp{ flex:1 1 auto; }
.tu-fright{ display:inline-flex; align-items:center; gap:.5rem .7rem; flex-wrap:nowrap; }
.tu-dd{ position:relative; }
.tu-ddb{ border:1px solid var(--rule); background:var(--paper); border-radius:9px; padding:.32rem .7rem; font-size:.82rem;
  cursor:pointer; color:var(--muted); white-space:nowrap; }
.tu-ddb b{ color:var(--ink); }
.tu-ddb::after{ content:"▾"; margin-left:.4rem; color:var(--muted); }
.tu-ddb.set{ border-color:var(--blue); }
.tu-ddp{ position:absolute; top:calc(100% + 4px); right:0; width:300px; max-height:420px; overflow:auto; background:var(--paper);
  border:1px solid var(--rule); border-radius:10px; box-shadow:0 8px 28px rgba(26,26,26,.16); padding:.5rem; z-index:35; }
.tu-ddp input[type=search]{ width:100%; border:1px solid var(--rule); border-radius:8px; padding:.3rem .5rem; margin-bottom:.35rem;
  background:var(--paper); color:var(--ink); }
.tu-ddp label{ display:flex; gap:.5rem; align-items:center; padding:.22rem .3rem; border-radius:6px; font-size:.86rem; cursor:pointer; }
.tu-ddp label:hover{ background:var(--tint); }
.tu-ddp .top{ display:flex; justify-content:space-between; border-bottom:1px solid var(--rule); padding-bottom:.3rem; margin-bottom:.2rem; }

/* The legend is the time type filter: one row of pills, client work then internal work with a thin
   divider between, and each type's meaning on hover (Alex, 2026-10-22). */
/* Spacing kept tight so every time type, Unlogged and the button fit one line in the 1,500px page
   over four years of hours (Alex, 2026-10-23: the button had dropped to a second line). */
.tu-pills{ display:flex; flex-wrap:wrap; gap:.28rem; align-items:center; padding:0 0 .6rem; }
.tu-pills-end{ display:inline-flex; gap:.28rem; align-items:center; }
/* The band's own rule gives every button its 15px font, which beats the size on .tu-pill, so the
   chips take their size here. 14px with the spacing above fits four years of hours in one line. */
.tu-fbar .tu-pill, .tu-fbar .tu-allbtn{ font-size:.875rem; }
.tu-pill{ display:inline-flex; align-items:center; gap:.3rem; border:1px solid var(--rule); background:var(--paper); border-radius:5px;
  padding:.22rem .45rem .22rem .4rem; font-size:.8rem; font-weight:600; cursor:pointer; color:var(--ink); white-space:nowrap; }
.tu-pill:hover{ border-color:var(--muted); }
.tu-pill:focus-visible, .tu-code:focus-visible{ outline:2px solid var(--blue); outline-offset:1px; }
.tu-pill > i{ width:10px; height:10px; border-radius:2px; flex:0 0 10px; }
.tu-pill b{ font-weight:600; color:var(--muted); font-variant-numeric:tabular-nums; }
.tu-pill.off{ background:transparent; border-style:dashed; color:var(--muted); }
.tu-pill.off > i{ background:transparent !important; outline:2px solid var(--rule); outline-offset:-2px; }
.tu-pill .x{ margin-left:.1rem; padding:0 .15rem; color:var(--blue); font-size:.75rem; border-radius:4px; }
.tu-pill .x:hover{ background:var(--hover); }
:root[data-theme="dark"] .tu-pill .x{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tu-pill .x{ color:var(--bluesub); } }
.tu-div{ width:1px; height:20px; background:var(--rule); margin:0 .15rem; }
/* Show all or Hide all, after the last chip. */
.tu-allbtn{ font:inherit; font-size:.8rem; font-weight:700; color:var(--blue); background:transparent; border:1px solid var(--rule);
  border-radius:5px; padding:.22rem .55rem; cursor:pointer; white-space:nowrap; margin-left:.1rem; }
.tu-allbtn:hover{ background:var(--hover); border-color:var(--blue); }
:root[data-theme="dark"] .tu-allbtn{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tu-allbtn{ color:var(--bluesub); } }
.tu-codes-row{ display:flex; flex-wrap:wrap; gap:.3rem; padding:0 0 .6rem; }
.tu-code{ font:inherit; border:1px solid var(--oth-line); background:var(--oth-bg); color:var(--oth-ink); border-radius:999px;
  padding:.15rem .6rem; font-size:.78rem; cursor:pointer; }
.tu-code b{ font-weight:600; margin-left:.2rem; font-variant-numeric:tabular-nums; }
.tu-code.off{ background:transparent; color:var(--muted); border-style:dashed; border-color:var(--rule); }

/* An information mark beside a heading, with its sentence on hover or focus, in place of footnotes. */
.tu-i{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:15px; height:15px; border-radius:50%;
  border:1px solid var(--muted); color:var(--muted); font-size:.62rem; font-weight:700; font-style:italic; font-family:Georgia,serif;
  text-transform:none; letter-spacing:0; cursor:help; flex:0 0 auto; }
.tu-i:hover, .tu-i:focus-visible{ color:var(--ink); border-color:var(--ink); outline:none; }
.tu-i[data-tip]:hover::after, .tu-i[data-tip]:focus::after{ content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 6px);
  transform:translateX(-50%); width:320px; max-width:70vw; background:var(--paper); color:var(--ink); border:1px solid var(--rule);
  border-radius:8px; box-shadow:0 6px 20px rgba(26,26,26,.15); padding:.5rem .65rem; font:400 .8rem/1.4 'Hanken Grotesk',system-ui,sans-serif;
  text-align:left; z-index:40; white-space:normal; }
.tu-tools .tu-i[data-tip]:hover::after, .tu-tools .tu-i[data-tip]:focus::after{ left:auto; right:-8px; transform:none; }

/* ---- sections ---- */
.tu-h{ font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); margin:1.4rem 0 .5rem;
  display:flex; gap:.6rem; align-items:baseline; scroll-margin-top:11rem; }
.tu-h .r{ margin-left:auto; text-transform:none; letter-spacing:0; font-size:.8rem; font-weight:400; }
.card.tu-flush{ padding:0; overflow:hidden; }
.tu-scrollx{ overflow-x:auto !important; }
.tu-note{ font-size:.85rem; color:var(--muted); margin:.4rem 0 0; max-width:110ch; }
.tu-state{ color:var(--muted); padding:2rem 0; }
.tu-state.err{ color:var(--red-ink); }
.tu-warn{ margin-top:1rem; background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--amber-ink);
  border-radius:var(--radius); padding:.6rem .9rem; font-size:.88rem; }
.tu-warn p{ margin:.15rem 0; }
.tu-allhidden{ margin-bottom:0; }
.tu-allhidden .tu-link{ font-size:.88rem; color:inherit; font-weight:700; text-decoration:underline; padding:0 .15rem; }

/* ---- figures and bars ---- */
.tu-figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; padding:1rem 1.1rem .7rem; }
.tu-fig .v{ font-size:1.8rem; line-height:1; font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tu-fig .v small{ font-size:.95rem; color:var(--muted); margin-left:.3rem; }
.tu-fig .l{ font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); margin-top:.3rem; }
.tu-fig .n{ font-size:.78rem; color:var(--muted); }
.tu-gap{ color:var(--accent); font-weight:700; }
.tu-bar{ display:flex; gap:2px; height:22px; border-radius:6px; overflow:hidden; min-width:120px; }
.tu-bar span{ display:block; height:100%; }
.tu-bigbar{ padding:0 1.1rem 1rem; }
.tu-bigbar .tu-bar{ height:30px; }

/* ---- tables ---- */
.tu-table{ width:100%; border-collapse:collapse; }
.tu-table th{ text-align:left; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--muted);
  font-weight:700; padding:.55rem .8rem; border-bottom:1px solid var(--rule); white-space:nowrap; }
.tu-table td{ padding:.5rem .8rem; border-bottom:1px solid var(--rule); vertical-align:middle; font-variant-numeric:tabular-nums; }
.tu-table tbody tr:last-child td{ border-bottom:0; }
.tu-table th.num, .tu-table td.num{ text-align:right; white-space:nowrap; }
.tu-table tr.click{ cursor:pointer; }
.tu-table tr.click:hover td{ background:var(--tint); }
.tu-table tr.click:focus-visible{ outline:2px solid var(--blue); outline-offset:-2px; }
.tu-table tr.sel td, .tu-table tr.sel:hover td{ background:var(--tu-sel); }
.tu-table tr.tot td{ border-top:2px solid var(--rule); font-weight:700; background:var(--tint); }
.tu-name{ font-weight:700; }
.tu-sub{ display:block; font-size:.75rem; color:var(--muted); font-weight:500; }
.tu-chipx{ display:inline-block; margin-left:.4rem; font-size:.64rem; font-weight:700; letter-spacing:.04em;
  border:1px solid var(--rule); color:var(--muted); border-radius:4px; padding:0 .3rem; vertical-align:1px; }
.tu-chipx.warn{ background:var(--amber-bg); border-color:var(--amber-line); color:var(--amber-ink); }
.tu-tag{ display:inline-block; font-size:.66rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  border-radius:4px; padding:.05rem .35rem; border:1px solid var(--rule); color:var(--muted); white-space:nowrap; }
.tu-ai{ background:var(--oth-bg); color:var(--oth-ink); border-color:var(--oth-line); }
.tu-fc{ background:var(--ms-bg); color:var(--ms-ink); border-color:var(--ms-line); }
.tu-codes td{ font-size:.88rem; padding:.38rem .8rem; }
.tu-codes tr.off td{ color:var(--muted); }

/* ---- the logged strip ---- */
.tu-weeks{ display:flex; gap:3px; }
.tu-wk{ width:var(--wk,34px); height:22px; border-radius:4px; background:var(--c-unl); position:relative; overflow:hidden; flex:0 0 auto; }
.tu-wk span{ position:absolute; left:0; bottom:0; width:100%; background:var(--blue); opacity:.8; }
:root[data-theme="dark"] .tu-wk span{ background:var(--bluesub); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tu-wk span{ background:var(--bluesub); } }
.tu-wk.short span{ background:var(--accent); }
.tu-wk.off{ background:transparent; border:1px dashed var(--rule); }
.tu-wkl{ font-size:.66rem; color:var(--muted); display:flex; gap:3px; margin-top:2px; }
.tu-wkl span{ width:var(--wk,34px); flex:0 0 auto; white-space:nowrap; }

/* ---- the person, in a side panel on the right (Alex, 2026-10-22) ----
   The page gives up the panel's width rather than sitting under it, so departments and people
   stay in view, and the panel scrolls on its own. */
:root{ --tu-panel-w:clamp(380px,50vw,960px); }
/* The panel starts below the masthead and bands and narrows only the content, so opening it never
   reflows the bands (Alex, 2026-10-22: the banner "auto adjusting" on clicks). Its top follows the
   bands' lower edge, set from time.js as the page scrolls. */
body.tu-has-panel main.tu-wrap{ margin-right:var(--tu-panel-w); margin-left:max(0px, calc((100vw - 1500px) / 2)); }
.tu-panel{ position:fixed; top:var(--tu-panel-top, 0px); right:0; bottom:0; width:var(--tu-panel-w); z-index:40; background:var(--paper);
  border-left:1px solid var(--rule); box-shadow:-8px 0 24px rgba(26,26,26,.08); display:flex; flex-direction:column; }
.tu-pn-head{ display:flex; gap:.75rem; align-items:flex-start; padding:.9rem 1.1rem .75rem; border-bottom:1px solid var(--rule); }
.tu-pn-who{ flex:1 1 auto; min-width:0; }
.tu-pn-who h2{ margin:0; font-size:1.15rem; font-weight:700; }
.tu-pn-sub{ font-size:.8rem; color:var(--muted); margin-top:.15rem; }
.tu-pn-nav{ display:inline-flex; border:1px solid var(--rule); border-radius:9px; overflow:hidden; flex:0 0 auto; }
.tu-pn-nav button{ font:inherit; width:32px; height:30px; border:0; border-left:1px solid var(--rule); background:var(--paper);
  color:var(--ink); cursor:pointer; font-size:1rem; }
.tu-pn-nav button:first-child{ border-left:0; }
.tu-pn-nav button:hover:not(:disabled){ background:var(--tint); }
.tu-pn-nav button:disabled{ opacity:.35; cursor:default; }
.tu-pn-body{ flex:1 1 auto; overflow-y:auto; overscroll-behavior:contain; padding:.2rem 0 1.5rem; }
.tu-pn-figs{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; padding:.9rem 1.1rem .6rem; }
.tu-pn-figs .v{ font-size:1.4rem; }
.tu-pn-bar{ padding:0 1.1rem .7rem; }
.tu-pn-strip{ padding:.1rem 1.1rem .4rem; }
.tu-pn-h{ font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); font-weight:700; margin:1rem 1.1rem .35rem;
  display:flex; gap:.5rem; align-items:center; }
.tu-tk{ display:flex; align-items:center; gap:.5rem; padding:.3rem 1.1rem; font-size:.86rem; border-top:1px solid var(--rule); }
.tu-tk:hover{ background:var(--tint); }
.tu-tk > i{ width:9px; height:9px; border-radius:50%; flex:0 0 9px; }
.tu-tk .s{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tu-tk .s .co{ color:var(--muted); }
.tu-tk .h{ flex:0 0 auto; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600; }
.tu-tk.more{ color:var(--muted); }
/* Ticket time as three columns: client, ticket and hours. */
.tu-pn-tk{ width:100%; border-collapse:collapse; table-layout:fixed; font-size:.86rem; }
.tu-pn-tk td{ padding:.3rem .5rem; border-top:1px solid var(--rule); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tu-pn-tk td:first-child{ padding-left:1.1rem; width:32%; }
.tu-pn-tk td.h{ width:5.5rem; text-align:right; padding-right:1.1rem; font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600; }
.tu-pn-tk tr:hover td{ background:var(--tint); }
.tu-pn-tk i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:.45rem; vertical-align:0; }
.tu-pn-tk tr.more td{ color:var(--muted); }
.tu-sum{ border-top:1px solid var(--rule); padding:.65rem 1.1rem; }
.tu-sumhead{ display:flex; justify-content:space-between; gap:1rem; font-weight:700; }
.tu-sumhead .h{ font-variant-numeric:tabular-nums; color:var(--muted); font-weight:600; }
.tu-sum p{ margin:.3rem 0 0; font-size:.9rem; }
.tu-sum p .m{ color:var(--muted); font-size:.8rem; font-weight:600; margin-right:.35rem; }
.tu-sum p.none{ color:var(--muted); font-style:italic; }
.tu-older summary{ margin-top:.35rem; font-size:.8rem; font-weight:600; color:var(--blue); cursor:pointer; }
:root[data-theme="dark"] .tu-older summary{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .tu-older summary{ color:var(--bluesub); } }
.tu-empty{ padding:1rem 1.1rem; color:var(--muted); }

/* The charge code table and the entries to review are folded away until opened (decision v2-collapse). */
details.tu-fold{ margin-top:1.4rem; }
details.tu-fold > summary{ cursor:pointer; font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  font-weight:700; list-style:none; }
details.tu-fold > summary::-webkit-details-marker{ display:none; }
details.tu-fold > summary::before{ content:"▸"; display:inline-block; width:1rem; }
details.tu-fold[open] > summary::before{ content:"▾"; }
details.tu-fold > summary .c{ text-transform:none; letter-spacing:0; font-weight:600; margin-left:.4rem; }
details.tu-fold > .card{ margin-top:.5rem; }

/* ---- project targets ---- */
.tu-tools{ display:flex; gap:.6rem 1rem; align-items:center; flex-wrap:wrap; padding:.7rem 1.1rem; border-top:1px solid var(--rule); font-size:.85rem; }
.tu-tools.tu-tools-top{ border-top:0; border-bottom:1px solid var(--rule); }
/* Entries to correct, at the foot of every tab, as a quiet line with its link. */
.tu-revnote{ color:var(--muted); font-size:.85rem; margin:1.6rem 0 .4rem; }
.tu-revnote .tu-link{ font-size:.85rem; padding:0 .15rem; }
/* Part time, as a small marker after the name, with the daily hours in its tooltip. */
.tu-pt{ font-size:.64rem; font-weight:700; letter-spacing:.05em; color:var(--muted); margin-left:.35rem; cursor:help; vertical-align:1px; }
/* The year selector in the Weeks logged header, for ranges longer than a year. */
.tu-yr{ font:inherit; font-size:.7rem; font-weight:700; color:var(--ink); background:var(--paper); border:1px solid var(--rule);
  border-radius:5px; padding:0 .2rem; margin-left:.35rem; text-transform:none; letter-spacing:0; }
/* Project targets: the forecast people first, the rest of the project teams folded below. */
.tu-tgrid tr.grp td{ background:var(--tint); padding:.45rem 1rem; }
.tu-grp-btn{ font:inherit; font-size:.82rem; font-weight:700; color:var(--ink); background:none; border:0; cursor:pointer; padding:0; }
.tu-grp-btn::before{ content:"▸"; display:inline-block; width:1rem; color:var(--muted); }
.tu-grp-btn[aria-expanded="true"]::before{ content:"▾"; }
/* Review entries: who acknowledged one and when, and the action to do it. */
.tu-ackbtn{ font:inherit; font-size:.78rem; font-weight:600; border:1px solid var(--rule); background:var(--paper); color:var(--ink);
  border-radius:6px; padding:.15rem .5rem; cursor:pointer; white-space:nowrap; }
.tu-ackbtn:hover{ border-color:var(--muted); }
.tu-table tr.acked td{ color:var(--muted); }
.tu-warn a, .tu-warn button.tu-link{ color:inherit; font-weight:700; text-decoration:underline; }
.tu-tools select, .tu-tools button{ font:inherit; font-size:.85rem; border:1px solid var(--rule); border-radius:8px; padding:.25rem .5rem;
  background:var(--paper); color:var(--ink); }
.tu-tools button{ cursor:pointer; }
.tu-gridwrap{ overflow-x:auto; }
.tu-tgrid th, .tu-tgrid td{ padding:.35rem .4rem; }
.tu-tgrid th.wk{ text-align:center; font-size:.64rem; letter-spacing:.02em; padding-inline:1px; }
.tu-tgrid th.wk .ml{ display:block; width:0; overflow:visible; text-align:left; }
.tu-tgrid th.first{ padding-left:1rem; }
.tu-tgrid th.last{ padding-right:1rem; }
.tu-tgrid td.who{ white-space:nowrap; padding-left:1rem; }
.tu-tgrid td.share{ white-space:nowrap; width:1%; }
.tu-share{ display:flex; align-items:center; gap:.45rem; }
.tu-share input{ width:96px; accent-color:var(--blue); }
.tu-share output{ width:2.8rem; text-align:right; font-weight:700; }
.tu-share .dot{ width:7px; height:7px; border-radius:50%; background:transparent; }
.tu-share .dot.moved{ background:var(--accent); }
.tu-tgrid td.c{ padding:1px; }
.tu-cell{ height:38px; border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:700; line-height:1.1; color:var(--ink); min-width:var(--cw,14px); width:100%; }
.tu-cell small{ font-size:.66rem; font-weight:600; opacity:.85; }
.tu-cell.strong{ color:var(--tu-strong-ink); }
.tu-cell.off{ background:repeating-linear-gradient(135deg,transparent 0 4px,var(--rule) 4px 5px); }
.tu-cell.none{ background:var(--tint); color:var(--muted); font-weight:500; }
.tu-tgrid td.who{ cursor:pointer; }
.tu-tgrid tr.sel td.who, .tu-tgrid tr.sel td.fcc, .tu-tgrid tr.sel td.share{ background:var(--tu-sel); }
.tu-tgrid td.fcc{ white-space:nowrap; width:1%; }
.tu-cell.miss{ background:transparent; border:1px dashed var(--rule); }
/* Target, Actual, Over or under and Of target as fixed columns, hours right-aligned (Alex, 2026-10-22). */
.tu-tgrid th.fig, .tu-tgrid td.fig{ text-align:right; white-space:nowrap; width:4.6rem; padding-inline:.5rem; }
.tu-tgrid td.fig{ font-weight:600; }
.tu-tgrid td.fig.pct{ color:var(--muted); width:3.6rem; }
.tu-tgrid th.last, .tu-tgrid td.last{ padding-right:1rem; }
.tu-tgrid tr.foot td{ border-top:2px solid var(--rule); background:var(--tint); font-weight:700; }
.tu-scale{ display:flex; align-items:center; gap:.3rem; flex-wrap:wrap; font-size:.78rem; color:var(--muted); padding:.7rem 1.1rem;
  border-top:1px solid var(--rule); }
.tu-scale .s{ width:26px; height:14px; border-radius:3px; display:inline-block; }
.tu-scale .s.off{ border:1px solid var(--rule); background:repeating-linear-gradient(135deg,transparent 0 4px,var(--rule) 4px 5px); }
.tu-scale .lbl{ margin:0 .5rem 0 .2rem; }

/* ---- trends ---- */
.tu-chartbar{ display:flex; align-items:center; gap:.5rem 1.2rem; flex-wrap:wrap; padding:.8rem 1.1rem .2rem; font-size:.84rem; }
.tu-chartbar .ttl{ font-weight:700; }
.tu-line{ display:inline-flex; align-items:center; gap:.35rem; color:var(--muted); }
.tu-line svg{ width:26px; height:10px; }
.tu-toggle{ display:inline-flex; gap:.4rem; align-items:center; cursor:pointer; margin-left:auto; font-weight:600; }
.tu-toggle.tu-toggle-inline{ margin-left:0; }
.tu-sw{ display:inline-block; width:12px; height:12px; border-radius:2px; }
.tu-chart-hc{ border-top:1px solid var(--rule); }
.tu-chart{ position:relative; padding:.2rem .6rem .6rem; }
.tu-chart svg{ display:block; width:100%; }
.tu-chart .grid{ stroke:var(--rule); stroke-width:1; }
.tu-chart .axis{ fill:var(--muted); font-size:11px; }
.tu-chart .halo{ fill:none; stroke:var(--paper); stroke-width:5; stroke-linejoin:round; stroke-linecap:round; opacity:.9; }
.ln-target, .ln-unl, .ln-former, .ln-proj, .ln-hc{ fill:none; stroke-width:2; stroke-linejoin:round; stroke-linecap:round; }
.ln-proj{ stroke:var(--c-proj); }
.ln-hc{ stroke:var(--blue); }
:root[data-theme="dark"] .ln-hc{ stroke:var(--bluesub); }
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) .ln-hc{ stroke:var(--bluesub); } }
.ln-target{ stroke:var(--ink); }
.ln-unl{ stroke:var(--accent); stroke-dasharray:5 3; }
.ln-former{ stroke:var(--muted); stroke-dasharray:1.5 3; }
.tu-tip{ position:absolute; pointer-events:none; background:var(--paper); border:1px solid var(--rule); border-radius:8px;
  box-shadow:0 6px 20px rgba(26,26,26,.15); padding:.5rem .65rem; font-size:.78rem; min-width:220px; z-index:5; }
.tu-tip .h{ font-weight:700; margin-bottom:.25rem; }
.tu-tip .r{ display:flex; justify-content:space-between; gap:1rem; }
.tu-tip .r i{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:.35rem; }
.tu-tip .r b{ font-weight:600; font-variant-numeric:tabular-nums; }
.tu-tip .sep{ border-top:1px solid var(--rule); margin:.3rem 0; }

/* While the next range loads, the current one stays on screen, dimmed (Alex, 2026-10-22). */
#page{ transition:opacity .15s; }
#page.tu-loading{ opacity:.5; pointer-events:none; }
.tu-figs.tu-figs3{ grid-template-columns:repeat(3,1fr); }

@media (max-width:900px){
  .tu-figs, .tu-figs.tu-figs3{ grid-template-columns:repeat(2,1fr); }
  .tu-table{ display:block; overflow-x:auto; }
  .tu-sticky{ position:static; }
  body.tu-has-panel main.tu-wrap{ margin-right:auto; margin-left:auto; }
  .tu-panel{ width:100%; }
}

/* ---------------------------------------------------------------- insights (Alex, 2026-10-23)
   Interruptions, Alert load and Logging quality, from docs/time-insights-preview.html. Project burn
   moved to Project Efficiency in the Client Hub on 2026-10-23.
   Alerts and requests were checked with the dataviz validator on 2026-10-23 in both modes: CVD and
   normal-vision separation pass. Other is the neutral remainder, as unlogged time is elsewhere,
   and its hours are printed beside the bar. */
:root{
  --tu-alert:#B84A62; --tu-req:#3F78B5; --tu-good:#1B6E43; --tu-good-bg:#E9F1EC; --tu-bad:#8F2A13; --tu-bad-bg:#F8E9E4;
  --tu-ahead:#C9932E;
}
:root[data-theme="dark"]{
  --tu-alert:#D0697F; --tu-req:#5F96D4; --tu-good:#7BC896; --tu-good-bg:#1E3326; --tu-bad:#F0A58E; --tu-bad-bg:#3E2620;
  --tu-ahead:#D9A443;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --tu-alert:#D0697F; --tu-req:#5F96D4; --tu-good:#7BC896; --tu-good-bg:#1E3326; --tu-bad:#F0A58E; --tu-bad-bg:#3E2620;
    --tu-ahead:#D9A443;
  }
}
/* The controls a tab does not use stay in place, dimmed, so the bands never change size. */
body.tu-nofilters .tu-fright .tu-dd{ opacity:.4; pointer-events:none; }
body.tu-notypes #fbar{ display:none; }
.tu-name .sub, .tu-sub{ display:block; font-size:.76rem; color:var(--muted); font-weight:500; }
.tu-pill-s{ display:inline-block; font-size:.7rem; font-weight:700; border-radius:999px; padding:.1rem .55rem; white-space:nowrap; }
.tu-pill-s.good{ background:var(--tu-good-bg); color:var(--tu-good); }
.tu-pill-s.warn{ background:var(--amber-bg); color:var(--amber-ink); }
.tu-pill-s.bad{ background:var(--tu-bad-bg); color:var(--tu-bad); }
.tu-pill-s.none{ background:var(--tint); color:var(--muted); border:1px solid var(--rule); }
.tu-flag{ background:var(--amber-bg); border:1px solid var(--amber-line); color:var(--amber-ink); border-radius:10px; padding:.55rem .8rem;
  font-size:.85rem; margin:.6rem 0; max-width:120ch; }
.tu-v-bad{ color:var(--tu-bad); }

/* Interruptions and alert load */
.tu-split{ display:flex; height:18px; border-radius:5px; overflow:hidden; gap:2px; min-width:160px; }
.tu-split span{ display:block; height:100%; }
.tu-sw{ display:inline-block; width:9px; height:9px; border-radius:2px; margin-right:.35rem; vertical-align:baseline; }
.tu-bins{ display:flex; gap:2px; align-items:flex-end; height:30px; }
.tu-bins span{ flex:0 0 auto; width:var(--bw,10px); background:var(--c-svc); border-radius:2px 2px 0 0; min-height:1px; }
.tu-bins span.hi{ background:var(--accent); }
.tu-cchips{ display:flex; gap:.3rem; flex-wrap:wrap; }
.tu-cchip{ font-size:.75rem; border:1px solid var(--rule); border-radius:5px; padding:.05rem .45rem; background:var(--tint); white-space:nowrap; }
.tu-spark{ display:block; }
.tu-recur{ font-size:.8rem; }
.tu-recur div{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:360px; }
.tu-recur b{ font-variant-numeric:tabular-nums; }

/* Logging quality */
.tu-score{ display:inline-flex; align-items:center; justify-content:center; width:46px; height:30px; border-radius:7px; font-weight:800; font-size:1rem; }
.tu-score.good{ background:var(--tu-good-bg); color:var(--tu-good); }
.tu-score.warn{ background:var(--amber-bg); color:var(--amber-ink); }
.tu-score.bad{ background:var(--tu-bad-bg); color:var(--tu-bad); }
.tu-score.big{ width:70px; height:40px; font-size:1.4rem; }
.tu-meter{ display:inline-block; width:54px; height:6px; background:var(--tint); border:1px solid var(--rule); border-radius:3px; vertical-align:middle;
  margin-left:.4rem; position:relative; overflow:hidden; }
.tu-meter span{ position:absolute; left:0; top:0; bottom:0; background:var(--tu-good); }
.tu-meter span.warn{ background:var(--tu-ahead); }
.tu-meter span.bad{ background:var(--accent); }
.tu-table td .w{ color:var(--accent); font-weight:700; }

/* Sortable headings on the insight tables (Alex, 2026-10-23). */
.tu-table th.tu-sortable{ cursor:pointer; user-select:none; }
.tu-table th.tu-sortable:hover{ color:var(--ink); }
.tu-sarr{ margin-left:.3rem; font-size:.62rem; opacity:.45; }
.tu-table th[aria-sort="ascending"], .tu-table th[aria-sort="descending"]{ color:var(--ink); }
.tu-table th[aria-sort="ascending"] .tu-sarr, .tu-table th[aria-sort="descending"] .tu-sarr{ opacity:1; }