/* Task Helper — calendar (job-intake.md §22; slice C-1 BRIEF-820). Namespace .thc-
   Uses the app's own colour tokens (index.html :root). Touch targets ≥ 44 px (§14.7): small
   timeline blocks have a full-size twin in the list under the timeline. */

/* ── Top bar: four views. On a phone (≤ 767 px) the four become 44 px icons so the bar stays one
   line (§22 ruling D, G-1); from 768 px they are words. The words stay in the buttons (their
   accessible names) — only their size is zeroed. .thc-seg4 is set by calendar.js when the server
   has the calendar. (.topbar prefix + loaded after time.css: these win over its ≤ 419 px rules.) */
@media (max-width:767px) {
  .topbar.thc-seg4 { gap:6px; }
  .topbar.thc-seg4 .tb-projbtn { padding:0 4px; }
  .topbar.thc-seg4 .tb-projbtn .tb-caret { display:none; }
  .topbar.thc-seg4 .tb-seg { position:relative; flex:none; width:44px; padding:0; font-size:0; display:inline-flex; align-items:center; justify-content:center; }
  .topbar.thc-seg4 .tb-seg::before { content:''; width:22px; height:22px; background:currentColor;
    -webkit-mask:var(--thc-ico) center / contain no-repeat; mask:var(--thc-ico) center / contain no-repeat; }
  /* A running clock (G-2): the clock icon with a green dot; the elapsed time is in the Time view. */
  .topbar.thc-seg4 .tb-seg.tht-run .tht-segclock, .topbar.thc-seg4 .tb-seg.tht-run .tht-seglabel { display:none; }
  .topbar.thc-seg4 .tb-seg.tht-run .tht-dot { display:block; position:absolute; top:8px; right:7px; margin:0; }
  /* …and from 12 h the Time module's amber warning mark takes the dot's place. */
  .topbar.thc-seg4 .tb-seg.tht-run.tht-long .tht-dot { display:none; }
  .topbar.thc-seg4 .tb-seg.tht-run.tht-long .tht-warnmark { display:block; position:absolute; top:4px; right:3px; margin:0; }
}
#viewTasks { --thc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Cpath d='M4 6h.01M4 12h.01M4 18h.01' stroke-width='3'/%3E%3C/svg%3E"); }
#viewMap { --thc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11.5a7 7 0 0 1 14 0C19 14.8 12 21 12 21z'/%3E%3Ccircle cx='12' cy='9.5' r='2.5'/%3E%3C/svg%3E"); }
#viewTime { --thc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3.5 2'/%3E%3C/svg%3E"); }
#viewCal { --thc-ico:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E"); }

/* ── The view ── */
body.thc-calview #fab { display:none; }   /* no floating "+ New task" over the calendar */
.thc-view { max-width:640px; margin:0 auto; padding:12px 16px 32px; }
@media (min-width:768px) { .thc-view { max-width:none; } body.panel-open .thc-view { margin-right:436px; } }   /* S7: no 980 px cap — the whole width beside the Jobs panel */
.thc-view button { width:auto; margin:0; font:inherit; }

.thc-nav { display:flex; align-items:center; gap:8px; }
.thc-title { flex:1; min-width:0; margin:0; text-align:center; font-size:17px; color:var(--ink); text-transform:none; letter-spacing:0; }
.thc-title:focus-visible { outline:2px solid var(--accent); outline-offset:2px; border-radius:6px; }
.thc-view .thc-ibtn { flex:none; width:44px; height:44px; padding:0; font-size:24px; line-height:1; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; }
.thc-bar { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.thc-view .thc-today { height:44px; padding:0 14px; font-size:15px; font-weight:600; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; }
.thc-modes { display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--card); }
.thc-view .thc-mode { height:44px; min-width:64px; padding:0 14px; font-size:15px; font-weight:600; border-radius:0; background:transparent; color:var(--muted); }
.thc-view .thc-mode + .thc-mode { border-left:1px solid var(--line); }
.thc-view .thc-mode[aria-pressed="true"] { background:var(--ink); color:#fff; }
.thc-view .thc-ibtn:hover, .thc-view .thc-today:hover { background:var(--hover); }
.thc-plabel { flex:1 1 150px; min-width:0; margin:0; display:flex; align-items:center; gap:8px; font-size:14px; color:var(--muted); }
.thc-plabel select { flex:1; min-width:0; min-height:44px; padding:0 10px; font-size:15px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); }

/* The page's toolbar, while it sits here: search + Filter only. */
.thc-slot { margin-top:10px; }
.thc-slot #sortSel, .thc-slot #newTaskBtn, .thc-slot #resultCount { display:none; }

.thc-note { margin:8px 0 0; padding:8px 12px; font-size:14px; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; }
.thc-note.thc-warn { border-color:var(--err); }
.thc-view .thc-retry { min-height:44px; padding:0 12px; margin-left:6px; background:transparent; color:var(--accent); font-weight:600; text-decoration:underline; }
.thc-sum { margin:12px 0 8px; font-size:15px; color:var(--muted); }
.thc-sum strong { color:var(--ink); font-size:17px; }
.thc-bad { color:#b3261e; font-weight:600; }
.thc-empty { margin:24px 0; text-align:center; color:var(--muted); }

/* ── Timeline (Day, and each Week column) ── */
.thc-tl { position:relative; display:flex; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.thc-hours { position:relative; flex:none; width:52px; }
.thc-hr { position:absolute; left:0; right:0; height:0; }
.thc-hr span { position:absolute; top:2px; right:6px; font-size:11px; color:var(--muted); white-space:nowrap; }
.thc-track { position:relative; flex:1; min-width:0; border-left:1px solid var(--line);
  background-image:linear-gradient(var(--line) 1px, transparent 1px); background-size:100% 72px; }   /* an hour = 60 × 1.2 px */
.thc-blk { position:absolute; display:flex; flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:1px; overflow:hidden;
  padding:3px 6px; text-align:left; font-size:13px; line-height:1.25; color:var(--ink); border:1px solid var(--card); border-left:3px solid var(--thc-time, var(--accent)); border-radius:6px;
  background:#dbe6fd; background:color-mix(in srgb, var(--thc-time, var(--accent)) 16%, var(--card)); }
.thc-view button.thc-blk { padding:3px 6px; }
.thc-blk-t { max-width:100%; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thc-blk-s { max-width:100%; font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thc-blk.thc-small { flex-direction:row; align-items:center; gap:6px; padding-top:0; padding-bottom:0; font-size:12px; }
.thc-view button.thc-blk.thc-small { padding-top:0; padding-bottom:0; }
.thc-blk.thc-run { border-left-color:var(--ok); background:#d9efe2; background:color-mix(in srgb, var(--ok) 16%, var(--card)); }
.thc-blk.thc-carry { opacity:.55; border-left-style:dashed; }
.thc-blk.thc-conflict { border-color:var(--err); border-left-color:var(--err); background:#f8e0e0; background:color-mix(in srgb, var(--err) 14%, var(--card)); }
.thc-mark { display:inline-block; width:15px; height:15px; margin-right:4px; border-radius:50%; background:#b3261e; color:#fff; font-size:11px; font-weight:700; line-height:15px; text-align:center; }
.thc-gap { position:absolute; left:0; right:0; display:flex; align-items:center; justify-content:center; overflow:hidden; padding:0 6px;
  font-size:12px; font-weight:600; color:var(--ink); border:1px dashed var(--branch); border-radius:6px;
  background:repeating-linear-gradient(135deg, var(--card) 0 6px, var(--line) 6px 12px); }
.thc-view button.thc-gap { width:100%; padding:0 6px; }
.thc-gap span { padding:0 6px; border-radius:4px; background:var(--card); white-space:nowrap; }
.thc-gap.thc-small span { display:none; }
.thc-view button.thc-blk:hover, .thc-view button.thc-gap:hover { filter:brightness(.96); }
.thc-now { position:absolute; left:0; right:0; height:0; border-top:2px solid var(--err); pointer-events:none; }

/* The day's items in order — the full-size controls */
.thc-h3 { margin:18px 0 6px; font-size:13px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.thc-list { list-style:none; margin:0; padding:0; background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.thc-list li + li { border-top:1px solid var(--line); }
.thc-view .thc-row { width:100%; min-height:52px; display:grid; grid-template-columns:1fr auto; gap:2px 10px; align-items:center; padding:8px 12px; text-align:left;
  background:transparent; color:var(--ink); border-radius:0; font-size:15px; }
.thc-view .thc-row:hover { background:var(--hover); }
.thc-row-a { grid-column:1; font-weight:600; font-variant-numeric:tabular-nums; }
.thc-row-b { grid-column:1; min-width:0; font-size:14px; color:var(--muted); overflow-wrap:anywhere; }
.thc-row-b em { font-style:normal; font-size:12px; padding:1px 6px; margin-left:4px; border:1px solid var(--line); border-radius:999px; white-space:nowrap; }
.thc-row-c { grid-column:2; grid-row:1 / span 2; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.thc-row.thc-conflict { box-shadow:inset 3px 0 0 var(--err); }
.thc-row.thc-carry .thc-row-a { color:var(--muted); }
.thc-row-gap { background:repeating-linear-gradient(135deg, transparent 0 6px, var(--hover) 6px 12px) !important; }
.thc-row-gap .thc-row-b { color:var(--accent); font-weight:600; }

/* ── Week ── */
.thc-week { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.thc-wk-row { display:grid; grid-template-columns:34px repeat(7, minmax(0, 1fr)); }
.thc-wk-heads { border-bottom:1px solid var(--line); }
.thc-view .thc-wk-head { position:relative; min-height:64px; padding:6px 0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  background:transparent; color:var(--ink); border-radius:0; border-left:1px solid var(--line); }
.thc-view .thc-wk-head:hover { background:var(--hover); }
.thc-wk-dow { font-size:11px; color:var(--muted); text-transform:uppercase; }
.thc-wk-num { font-size:16px; font-weight:700; }
.thc-wk-tot { font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--muted); }
.thc-wk-head.thc-today-col .thc-wk-num { color:var(--accent); }
.thc-wk-head .thc-wk-bad { position:absolute; top:6px; right:5px; }
.thc-wk-head .thc-dots { min-height:7px; }
.thc-wk-body { position:relative; }
.thc-wk-gutter.thc-hours { width:auto; }
.thc-wk-gutter .thc-hr span { right:3px; font-size:10px; }
.thc-wk-col { position:relative; min-width:0; border-left:1px solid var(--line);
  background-image:linear-gradient(var(--line) 1px, transparent 1px); background-size:100% 30px; }   /* an hour = 60 × 0.5 px */
.thc-wk-col[data-day] { cursor:pointer; }
.thc-wk-col.thc-today-col { background-color:var(--hover); }
.thc-wk-col .thc-blk { padding:0 3px; border-radius:4px; font-size:11px; }
.thc-view .thc-wk-col button.thc-blk { padding:0 3px; }
.thc-wk-col .thc-gap { border-radius:3px; }

/* ── Month ── */
.thc-month { background:var(--card); border:1px solid var(--line); border-radius:12px; overflow:hidden; }
.thc-mo-row { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); }
.thc-mo-heads > div { padding:6px 0; text-align:center; font-size:11px; color:var(--muted); text-transform:uppercase; }
.thc-mo-row + .thc-mo-row { border-top:1px solid var(--line); }
.thc-mo-row > div + div { border-left:1px solid var(--line); }
.thc-view .thc-cell { width:100%; min-height:58px; padding:4px 2px; display:flex; flex-direction:column; align-items:center; gap:1px; background:transparent; color:var(--ink); border-radius:0; }
.thc-view .thc-cell:hover { background:var(--hover); }
.thc-cell-n { font-size:14px; font-weight:600; width:24px; height:24px; line-height:24px; text-align:center; border-radius:50%; }
.thc-cell-t { min-height:15px; font-size:12px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--muted); }
.thc-cell.thc-out .thc-cell-n, .thc-cell.thc-out .thc-cell-t { color:var(--branch); font-weight:400; }
.thc-cell.thc-today-cell .thc-cell-n { background:var(--accent); color:var(--accent-ink); }
.thc-dots { display:flex; gap:3px; min-height:7px; }
.thc-cell .thc-dots { gap:2px; } .thc-cell .thc-dot { width:6px; height:6px; }
.thc-dot { display:inline-block; flex:none; width:7px; height:7px; border-radius:50%; background:var(--accent); }
.thc-dot-gap { background:transparent; border:1.5px dashed var(--muted); }
.thc-dot-bad { background:#b3261e; }
.thc-key { margin:10px 0 0; font-size:12px; color:var(--muted); display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; }
.thc-key > span { display:inline-flex; align-items:center; gap:4px; margin-right:10px; }
@media (min-width:768px) { .thc-view .thc-cell { min-height:84px; } .thc-cell-t { font-size:13px; } }

/* ── "Add time here": which task (only when a gap sits between two different tasks) ── */
.thc-pick-back { position:fixed; inset:0; z-index:70; display:flex; align-items:flex-end; justify-content:center; background:rgba(20,28,40,.45); }
.thc-pick { width:100%; max-width:480px; padding:18px 16px calc(16px + env(safe-area-inset-bottom)); background:var(--card); color:var(--ink); border-radius:16px 16px 0 0; }
.thc-pick h2 { margin:0 0 4px; font-size:17px; color:var(--ink); text-transform:none; letter-spacing:0; }
.thc-pick p { margin:0 0 10px; font-size:14px; color:var(--muted); }
.thc-view .thc-pick button { width:100%; min-height:48px; margin-top:8px; padding:8px 12px; text-align:left; font-size:15px; font-weight:600;
  background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; overflow-wrap:anywhere; }
.thc-view .thc-pick button.thc-pick-cancel { text-align:center; color:var(--muted); }
.thc-pick button small { display:block; font-size:12px; font-weight:500; color:var(--muted); }
.thc-pick { max-height:88vh; overflow-y:auto; }
.thc-pick-q { width:100%; min-height:48px; padding:0 12px; font-size:16px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); }
.thc-pick-list { list-style:none; margin:0; padding:0; max-height:44vh; overflow-y:auto; }
.thc-pick-none, .thc-pick-more { margin:10px 0 0; font-size:14px; color:var(--muted); }
.thc-pick-foot { display:flex; gap:8px; }
.thc-view .thc-pick .thc-pick-foot button { flex:1; text-align:center; color:var(--muted); }
.thc-addwrap { margin:12px 0 0; text-align:center; }
.thc-view .thc-add { min-height:48px; padding:0 20px; font-size:16px; font-weight:600; background:var(--accent); color:var(--accent-ink); border-radius:10px; }
@media (min-width:768px) { .thc-pick-back { align-items:center; } .thc-pick { max-width:380px; border-radius:14px; padding-bottom:16px; } }

/* ── Sources (slice C-2): what the calendar shows; a colour per source, per login ── */
.thc-view .thc-srcbtn { height:44px; padding:0 14px; font-size:15px; font-weight:600; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; }
.thc-view .thc-srcbtn:hover { background:var(--hover); }
.thc-view .thc-srcbtn[aria-expanded="true"] { border-color:var(--ink); }
.thc-src { margin-top:8px; padding:4px 12px; background:var(--card); border:1px solid var(--line); border-radius:12px; }
.thc-src-row { display:flex; align-items:center; gap:8px; min-height:48px; }
.thc-src-row + .thc-src-row { border-top:1px solid var(--line); }
.thc-src-row label { flex:1; min-width:0; min-height:44px; margin:0; display:flex; align-items:center; gap:10px; font-size:15px; color:var(--ink); cursor:pointer; }
.thc-src-row input { flex:none; width:20px; height:20px; margin:0; }
.thc-src-row .thc-dot { width:12px; height:12px; }
.thc-src-row small { margin-left:6px; font-size:12px; color:var(--muted); }
.thc-view .thc-src-col { flex:none; min-height:44px; padding:0 12px; font-size:14px; font-weight:600; background:transparent; color:var(--accent); border-radius:8px; }
.thc-view .thc-src-col:hover { background:var(--hover); }
.thc-src-note { margin:0; padding:8px 0; border-top:1px solid var(--line); font-size:13px; color:var(--muted); }

/* Task items: a list row (the full-size control), a marker line on the Day timeline, a tick in a Week column */
.thc-allday { margin-bottom:12px; }
.thc-view .thc-row-task { grid-template-columns:auto 1fr; gap:2px 12px; min-height:48px; }
.thc-row-task .thc-row-a { grid-column:1; grid-row:1; min-width:64px; color:var(--muted); font-weight:600; }
.thc-row-task .thc-row-b { grid-column:2; grid-row:1; color:var(--ink); font-size:15px; }
.thc-row-task .thc-dot { width:10px; height:10px; margin-right:2px; }
.thc-view .thc-mk { position:absolute; left:0; right:0; z-index:2; height:0; padding:0; overflow:visible; background:transparent; border-radius:0; border-top:2px dashed var(--thc-c, var(--accent)); text-align:right; }
.thc-mk > span { position:absolute; right:4px; top:-11px; display:inline-flex; align-items:center; gap:4px; max-width:80%; height:22px; padding:0 8px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:12px; font-weight:600; color:var(--ink); background:var(--card); border:1px solid var(--thc-c, var(--accent)); border-radius:999px; }
.thc-view .thc-mk:focus-visible { outline:none; }
.thc-view .thc-mk:focus-visible > span { outline:2px solid var(--accent); outline-offset:2px; }
.thc-tick { position:absolute; left:0; right:0; z-index:2; height:3px; border-radius:2px; }

/* ── Planned time (slice C-5a): never mistaken for time worked — a dashed outline, no fill, a "Plan" tag ── */
.thc-blk.thc-plan { background:transparent; border:2px dashed var(--thc-plan, var(--muted)); border-left:2px dashed var(--thc-plan, var(--muted)); }
.thc-view button.thc-blk.thc-plan:hover { background:var(--hover); filter:none; }
.thc-tag { display:inline-block; margin-right:5px; padding:0 4px; font-size:10px; font-weight:700; line-height:14px; letter-spacing:.03em; text-transform:uppercase; vertical-align:1px;
  color:var(--ink); border:1px solid var(--thc-plan, var(--muted)); border-radius:4px; }
.thc-lanes { display:flex; margin:0 0 4px 53px; font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.thc-lanes span:first-child { flex:0 0 33.333%; }
.thc-two .thc-track::after { content:''; position:absolute; top:0; bottom:0; left:33.333%; border-left:1px dashed var(--line); pointer-events:none; }
.thc-psum strong { font-size:15px; }
.thc-view .thc-row.thc-row-plan { border-left:3px dashed var(--thc-plan, var(--muted)); }
.thc-row-c small { display:block; font-size:11px; font-weight:500; color:var(--muted); text-align:right; }
.thc-wk-ptot { font-size:11px; font-variant-numeric:tabular-nums; color:var(--muted); }
.thc-wk-col .thc-blk.thc-plan { border-width:1.5px; }
.thc-dot.thc-dot-plan { background:transparent; border:1.5px solid var(--thc-plan, var(--muted)); }

/* ── Planning from the calendar (slice C-5b): the kind switch in the chooser; the tappable bare timeline ── */
.thc-pick-kinds { display:flex; margin:0 0 10px; border:1px solid var(--line); border-radius:10px; overflow:hidden; }
.thc-view .thc-pick .thc-pick-kinds button { flex:1; min-height:44px; margin:0; padding:0 8px; text-align:center; font-size:15px; border:0; border-radius:0; background:var(--card); color:var(--muted); }
.thc-view .thc-pick .thc-pick-kinds button + button { border-left:1px solid var(--line); }
.thc-view .thc-pick .thc-pick-kinds button[aria-pressed="true"] { background:var(--ink); color:#fff; }
.thc-track.thc-tap { cursor:cell; }

/* A plan without a task (BRIEF-914): what was typed, in italic — the same mark as on the roster. */
.thc-desc { font-style:italic; }

/* Holidays (R-5a, BRIEF-937, §24 J5): calm, information only — a hatch (never colour alone) BEHIND the entries,
   the name in a strip; screen readers hear "Holiday: <name>" from the day's own label. The hatch is shared with the roster. */
.thc-view { --thc-hatch:repeating-linear-gradient(135deg, transparent 0 6px, rgba(100, 116, 139, .16) 6px 8px);
            --thc-hatch:repeating-linear-gradient(135deg, transparent 0 6px, color-mix(in srgb, var(--muted) 18%, transparent) 6px 8px); }
.thc-hol { margin:0 0 10px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--bg); background-image:var(--thc-hatch); font-size:13px; font-weight:600; color:var(--muted); }
.thc-wk-head.thc-hol-col, .thc-wk-col.thc-hol-col, .thc-view .thc-cell.thc-hol-col { background-image:var(--thc-hatch); }
.thc-wk-hols { grid-template-rows:repeat(var(--thc-hol-lines, 1), 18px); row-gap:2px; padding:2px 0; border-bottom:1px solid var(--line); }
.thc-holbar { min-width:0; margin:0 2px; padding:0 4px; border:1px solid var(--line); border-radius:4px; background:var(--bg); font-size:11px; font-weight:600; line-height:16px; color:var(--muted); overflow:hidden; }
.thc-holbar span { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.thc-holbar.thc-cut-a { border-left-style:dashed; border-top-left-radius:0; border-bottom-left-radius:0; margin-left:0; }
.thc-holbar.thc-cut-b { border-right-style:dashed; border-top-right-radius:0; border-bottom-right-radius:0; margin-right:0; }
.thc-cell-h { max-width:100%; padding:0 2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:10px; font-weight:600; line-height:13px; color:var(--muted); }
.thc-keyhol { display:inline-block; width:14px; height:10px; border:1px solid var(--line); background:var(--bg); background-image:var(--thc-hatch); }

/* Planned time tools (BRIEF-1234 C1 + C2): Download CSV + Review double-booked (TIME's fixer). Phone first: full-size buttons that wrap. */
.thc-plantools { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:8px 0; }
.thc-pt-l { font-size:13px; font-weight:600; color:var(--muted); margin-right:2px; }
.thc-view .thc-plantools button { width:auto; min-height:44px; margin:0; padding:0 14px; font-size:14px; font-weight:600; background:var(--card); color:var(--ink); border:1px solid var(--line); border-radius:10px; }   /* quiet, like Today: secondary actions */
.thc-view .thc-plantools button:hover { background:var(--hover); }
.thc-view .thc-plantools .thc-pfix, .thc-view .thc-plantools .thr-pfix { color:var(--accent); }
@media (max-width:420px) { .thc-pt-l { flex-basis:100%; } .thc-view .thc-plantools button { flex:1 1 auto; } }

/* ── S1 look (ROUND 47, direction A "Soft cards", Gary d-cal1 = A): soft cards, status-coloured blocks (--sc = the task's own
   status colour from the page's statusColor; no status → the source colour, as before), initials, a now-line with a dot,
   today as a pill, a calmer grid with bigger hour labels. Running / overlapping / carried blocks keep their own marks. ── */
.thc-tl, .thc-week, .thc-month, .thc-list { border-color:transparent; border-radius:var(--th-soft-radius); box-shadow:var(--th-soft-shadow); }
.thc-track, .thc-wk-col { border-left-color:var(--th-soft-hairline); background-image:linear-gradient(var(--th-soft-hairline) 1px, transparent 1px); }
.thc-hr span { font-size:12.5px; font-weight:600; font-variant-numeric:tabular-nums; }
.thc-wk-gutter .thc-hr span { font-size:11px; }
.thc-blk { --c:var(--sc, var(--thc-time, var(--accent))); border:1px solid color-mix(in srgb, var(--c) 24%, var(--card)); border-left:4px solid var(--c); border-radius:var(--th-soft-radius-sm);
  background:color-mix(in srgb, var(--c) var(--th-soft-tint), var(--card)); box-shadow:var(--th-soft-shadow-sm); }
.thc-blk.thc-plan { --c:var(--sc, var(--thc-plan, var(--muted))); background:var(--card); border:1.5px dashed color-mix(in srgb, var(--c) 60%, var(--card)); border-left:4px dashed var(--c); box-shadow:none; }
.thc-blk-t { display:flex; align-items:center; gap:5px; font-weight:700; }
.thc-blk-t > .thc-desc, .thc-blk-t > .thc-tag { flex:none; }
.thc-blk-p { margin-top:4px; display:inline-flex; align-items:center; height:20px; padding:0 8px; border-radius:999px; font-size:11px; font-weight:700; color:color-mix(in srgb, var(--sc) 55%, var(--ink)); background:color-mix(in srgb, var(--sc) 14%, var(--card)); }
.thc-av { display:inline-grid; place-items:center; flex:none; width:20px; height:20px; border-radius:50%; background:var(--pc, var(--muted)); color:#fff; font-size:9px; font-weight:800; letter-spacing:.02em; box-shadow:0 0 0 2px var(--card); }
.thc-wk-col .thc-blk { border-radius:7px; border-left-width:3px; box-shadow:none; }
.thc-wk-col .thc-av { width:15px; height:15px; font-size:7px; box-shadow:none; }
.thc-blk.thc-small .thc-av { width:16px; height:16px; font-size:7.5px; }
.thc-now { border-top:2px solid var(--th-soft-now); z-index:3; }
.thc-now::before { content:''; position:absolute; left:-5px; top:-6px; width:10px; height:10px; border-radius:50%; background:var(--th-soft-now); }
.thc-wk-head.thc-today-col .thc-wk-num { min-width:30px; padding:0 6px; border-radius:10px; background:var(--th-soft-today); color:var(--accent-ink); line-height:28px; text-align:center; }
.thc-wk-head.thc-today-col .thc-wk-dow { color:var(--accent); font-weight:700; }
.thc-wk-col.thc-today-col { background-color:#f5f8ff; background-color:color-mix(in srgb, var(--accent) 4%, var(--card)); }
@media (prefers-reduced-motion: no-preference) { .thc-view button.thc-blk { transition:filter .15s, box-shadow .15s; } }
.thc-wk-row { grid-template-columns:44px repeat(7, minmax(0, 1fr)); }   /* S1: room for "12 am" at the bigger hour size */
.thc-wk-gutter .thc-hr span { right:4px; }

/* ── S2a (look A): the header in three short rows — ‹ title › Today · the view switch · a chip row — and the AGENDA view.
   Pieces from public/shared/soft/v1/soft.css (.th-soft-chip / -card / -pill / -today / -dayhead). ── */
.thc-view .thc-nav .thc-today { flex:none; height:40px; padding:0 14px; border-radius:999px; border:1.5px solid var(--th-soft-today); color:var(--th-soft-today); background:var(--card); font-size:14px; font-weight:700; }
.thc-bar { margin-top:8px; }
.thc-modes { display:flex; width:100%; border:0; border-radius:12px; padding:3px; background:#e4e8ee; background:color-mix(in srgb, var(--line) 80%, var(--bg)); overflow:visible; }
.thc-view .thc-modes .thc-mode { flex:1 1 0; min-width:0; height:38px; padding:0 6px; border:0; border-radius:9px; background:transparent; color:var(--muted); font-size:14px; font-weight:600; }
.thc-view .thc-modes .thc-mode[aria-pressed="true"] { background:var(--card); color:var(--ink); box-shadow:0 1px 3px rgba(16,24,40,.12); }
.thc-view .thc-modes .thc-mode + .thc-mode { border-left:0; }
.thc-chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; }
.thc-view .thc-chips .thc-srcbtn { height:40px; font-size:14px; border-radius:999px; }
.thc-chips .thc-plabel { flex:1 1 180px; }
.thc-chips .thc-plabel select { min-height:40px; border-radius:999px; padding:0 12px; font-weight:600; }
@media (max-width:767px) {
  .thc-chips { flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; padding-bottom:2px; }
  .thc-chips::-webkit-scrollbar { display:none; }
  .thc-chips .thc-plabel { flex:0 0 auto; } .thc-chips .thc-plabel > span { display:none; }
  .thc-chips .thc-plabel select { width:auto; max-width:170px; }
  .thc-view .thc-chips .thc-srcbtn, .thc-chips .thc-plabel select, .thc-view .thc-nav .thc-today { height:44px; min-height:44px; }   /* touch targets ≥ 44 px on a phone */
  .thc-view .thc-modes .thc-mode { font-size:13px; padding:0 2px; }
  .thc-plantools .thc-pt-l { display:none; }
  .thc-view .thc-plantools button { flex:0 0 auto; min-height:44px; border-radius:999px; }
}
/* Agenda */
.thc-ag-head { margin:16px 2px 8px; }
.thc-ag-head:first-child { margin-top:4px; }
.thc-ag-tot { font-size:13px; color:var(--muted); font-weight:700; }
.thc-ag-hol { padding:2px 8px; margin:0; font-size:11.5px; border-radius:6px; }
.thc-ag-none { margin:0 2px 4px; font-size:13px; color:var(--muted); }
.thc-ag-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:var(--th-soft-gap); }
.thc-view .thc-ag-row { width:100%; min-height:60px; margin:0; padding:10px 12px; display:flex; align-items:center; gap:10px; text-align:left; color:var(--ink); border:0; font:inherit; cursor:pointer; }
.thc-view .thc-ag-row:hover { background:var(--hover); }
.thc-view .thc-ag-row:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.thc-ag-when { flex:0 0 52px; display:flex; flex-direction:column; font-variant-numeric:tabular-nums; }
.thc-ag-when b { font-size:15px; } .thc-ag-when small { font-size:11.5px; color:var(--muted); }
.thc-ag-bar { flex:none; align-self:stretch; width:4px; border-radius:4px; background:var(--sc, var(--thc-time, var(--accent))); }
.thc-ag-plan .thc-ag-bar { background:repeating-linear-gradient(var(--sc, var(--thc-plan, var(--muted))) 0 4px, transparent 4px 7px); }
.thc-ag-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:4px; }
.thc-ag-t { font-size:15px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thc-ag-meta { display:flex; flex-wrap:wrap; align-items:center; gap:6px; font-size:12px; color:var(--muted); min-width:0; }
.thc-ag-tag { font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); }
.thc-ag-live { color:var(--ok); }
.thc-ag-key { font-family:ui-monospace,Menlo,monospace; font-size:11.5px; }
.thc-ag-av { width:30px; height:30px; font-size:11px; margin-left:auto; }
.thc-modes { max-width:560px; }   /* S2a: the switch stays a compact control on a wide screen */
@media (max-width:767px) { .thc-title { font-size:16px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .thc-modes { max-width:none; } }

/* ── S3 (look A): Month shows what is ON a day — two status-coloured chips, then "+N more"; road-blocked tasks carry ROAD
   BLOCKS' own badge (THRoadBlocks.pinBadge) on blocks, rows and chips. ── */
.thc-mchips { display:flex; flex-direction:column; gap:2px; width:100%; margin-top:2px; }
.thc-mchip { display:flex; align-items:center; gap:2px; min-width:0; height:16px; padding:0 4px; border-radius:4px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:10.5px; font-weight:700; line-height:16px; text-align:left; color:color-mix(in srgb, var(--sc, var(--thc-time, var(--accent))) 60%, var(--ink));
  background:color-mix(in srgb, var(--sc, var(--thc-time, var(--accent))) 16%, var(--card)); }
.thc-mchip-plan { background:var(--card); outline:1px dashed var(--sc, var(--thc-plan, var(--muted))); outline-offset:-1px; }
.thc-mchip .thc-desc { overflow:hidden; text-overflow:ellipsis; }
.thc-more { font-size:10.5px; font-weight:800; color:var(--th-soft-today); text-align:center; }
.thc-rb { display:inline-grid; place-items:center; flex:none; margin-left:2px; }
.thc-wk-col .thc-rb svg, .thc-mchip .thc-rb svg { width:11px; height:11px; }
@media (min-width:768px) { .thc-mchip { height:18px; font-size:11.5px; line-height:18px; } .thc-more { font-size:11.5px; } }

/* ── S5 (look A): "Plan time here" — a dashed hour slot over the bare timeline (hover on a mouse; kept while the chooser is open
   after a tap). Not a control itself: the timeline under it takes the tap (keyboard: the day's "Plan time" button, as before). ── */
.thc-slothint { position:absolute; left:3px; right:3px; z-index:2; display:flex; align-items:center; justify-content:center; pointer-events:none;
  border:1.5px dashed var(--th-soft-today); border-radius:var(--th-soft-radius-sm); background:color-mix(in srgb, var(--th-soft-today) 7%, transparent);
  color:var(--th-soft-today); font-size:12.5px; font-weight:700; overflow:hidden; white-space:nowrap; }
.thc-wk-col .thc-slothint { font-size:11px; left:2px; right:2px; }
.thc-wk-col.thc-tap { cursor:cell; }

/* ── S2b (look A): whose time — chips Me · Everyone · Crew… · a person · All my projects (soft.css .th-soft-chip; a chosen
   <select> = .is-on); a crowded time (Everyone / a crew) shows "+N" for the people that don't fit. ── */
.thc-chips select.th-soft-chip { appearance:auto; padding-right:8px; max-width:170px; }
.thc-chips .thc-plabel select.th-soft-chip { min-height:0; }
.thc-view .thc-moreblk { position:absolute; z-index:2; display:flex; align-items:flex-start; justify-content:center; height:22px; margin:0; padding:0 4px;
  border:1px solid var(--line); border-radius:999px; background:var(--card); color:var(--th-soft-today); font-size:11.5px; font-weight:800; line-height:20px; box-shadow:var(--th-soft-shadow-sm); }
@media (pointer: coarse) { .thc-view .thc-moreblk { height:28px; line-height:26px; } }

/* ── S6 (look A): drag to move / drag the bottom edge to resize; then a confirm bar (Save goes through TIME's moveEntry). ── */
.thc-canmove .thc-track .thc-blk:not(.thc-carry):not(.thc-run), .thc-canmove .thc-wk-col .thc-blk:not(.thc-carry):not(.thc-run) { cursor:grab; touch-action:manipulation; }
@media (hover:hover) {
  .thc-canmove .thc-track .thc-blk:not(.thc-carry):not(.thc-run):hover::after { content:''; position:absolute; left:50%; bottom:3px; width:28px; height:4px; margin-left:-14px; border-radius:2px; background:var(--c, var(--accent)); opacity:.7; cursor:ns-resize; }
}
.thc-blk.thc-dragging { z-index:6; cursor:grabbing; pointer-events:none; opacity:.92; box-shadow:0 10px 24px rgba(16,24,40,.22); outline:2px solid var(--th-soft-today); outline-offset:1px; transition:none; }
.thc-dragmode, .thc-dragmode * { user-select:none; -webkit-user-select:none; }
.thc-mv-label { position:absolute; z-index:7; padding:2px 8px; border-radius:999px; background:var(--ink); color:#fff; font-size:12px; font-weight:700; white-space:nowrap; pointer-events:none; font-variant-numeric:tabular-nums; }
.thc-mvbar { position:fixed; left:12px; right:12px; bottom:calc(76px + env(safe-area-inset-bottom, 0px)); z-index:60; display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; padding:12px 14px;
  border-radius:var(--th-soft-radius); background:#1b2430; color:#fff; box-shadow:0 12px 28px rgba(0,0,0,.28); font-size:14px; }
.thc-mvbar .thc-mv-t { flex:1 1 200px; min-width:0; }
.thc-view .thc-mvbar button { min-height:44px; margin:0; padding:0 14px; border-radius:10px; font-size:14px; font-weight:700; border:0; }
.thc-view .thc-mvbar .thc-mv-cancel { background:transparent; color:#cbd5e1; }
.thc-view .thc-mvbar .thc-mv-save { background:var(--accent); color:var(--accent-ink); }
@media (min-width:768px) { .thc-mvbar { left:auto; right:24px; bottom:24px; max-width:560px; } }
.thc-view .thc-notebtn { min-height:44px; padding:0 12px; margin-left:6px; background:transparent; color:var(--accent); font-weight:700; text-decoration:underline; border:0; }   /* S6: Undo / Review (not "Try again") */

/* ── S7 "the WHOLE screen" (Gary 2026-10-18; ≥ 768 px — a phone is unchanged): the calendar fills the window beside the Jobs panel and
   scrolls INSIDE its body (the header, the week's day headings and the roster's names / dates stay put). --thc-top = where the view
   starts (set by calendar.js: below the top bar and any banner). The hour zoom is calendar.js's (fitView). ── */
@media (min-width:768px) {
  .thc-view { height:calc(100vh - var(--thc-top, 58px)); height:calc(100dvh - var(--thc-top, 58px)); display:flex; flex-direction:column; padding:12px 24px 0; box-sizing:border-box; overflow:hidden; }
  .thc-view > .thc-head, .thc-view > .thc-slot, .thc-view > .thc-notes { flex:none; }
  .thc-view > .thc-body { flex:1 1 auto; min-height:0; overflow:auto; position:relative; padding-bottom:16px; overscroll-behavior:contain; }
  .thc-week { overflow:clip; }   /* clip, not hidden: the sticky day headings keep working inside the scrolling body */
  .thc-wk-heads { position:sticky; top:0; z-index:5; background:var(--card); }
  /* Month: the six weeks stretch to the window */
  .thc-view:has(.thc-month) > .thc-body { display:flex; flex-direction:column; }
  .thc-month { flex:1 1 auto; display:flex; flex-direction:column; min-height:520px; }
  .thc-month > .thc-mo-row:not(.thc-mo-heads) { flex:1 1 0; min-height:84px; }
  .thc-month > .thc-mo-row:not(.thc-mo-heads) > [role="gridcell"] { display:flex; }
  .thc-view .thc-month .thc-cell { flex:1; height:auto; min-height:84px; }
}
/* From 1280 px the header is ONE line: ‹ title › Today · views · chips */
@media (min-width:1280px) {
  .thc-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px 12px; }
  .thc-head > .thc-nav { flex:0 1 460px; min-width:320px; }
  .thc-head > .thc-bar { flex:0 0 auto; margin-top:0; }
  .thc-head .thc-modes { width:auto; max-width:none; }
  .thc-head > .thc-chips { flex:1 1 auto; margin-top:0; }
  .thc-head > .thc-src { flex-basis:100%; }
}
/* From 1400 px the Agenda is two columns of days (SHERIFF ruling 1) */
@media (min-width:1400px) {
  .thc-ag { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; align-items:start; }
  .thc-ag .thc-ag-day:nth-child(-n+2) .thc-ag-head { margin-top:4px; }
}