/* 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:980px; } body.panel-open .thc-view { margin-right:436px; } }
.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; } }