/* ================ TaskMaster page (generated) ==================
   Generated by scripts/sync_taskmaster.py from PAGE_CSS. Do not hand-edit:
   the next build overwrites this file.

   A separate stylesheet for the same reason portal.css and safety.css are
   separate from style.css. style.css is hand-edited, and a build appending to
   a file someone has open in an editor loses one of the two saves. This file
   is linked only from /taskmaster. */

/* ---------- this week ---------- */
.tm-week-band { padding-top: 30px; }
.tm-week {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 28px;
  padding: 26px 30px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--blue);
  border-radius: 3px;
  background: var(--bg-tint);
}
.tm-week[data-state="none"] { border-left-color: var(--line); }
.tm-who { display: flex; align-items: center; gap: 20px; min-width: 0; }
.tm-who-text { min-width: 0; }
.tm-who-text .lbl { display: block; margin-bottom: 4px; }
.tm-face {
  flex: 0 0 auto;
  width: 76px; height: 76px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy-800);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 26px; font-weight: var(--fw-med); letter-spacing: .04em;
}
.tm-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tm-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-4);
  font-weight: var(--fw-book);
  letter-spacing: var(--tr-snug);
  color: var(--navy);
  overflow-wrap: anywhere;
}
.tm-dates { margin: 2px 0 0; font-size: var(--fs-0); color: var(--muted); }

.tm-meter { display: flex; align-items: center; gap: 14px; }
.tm-ring { width: 64px; height: 64px; transform: rotate(-90deg); flex: 0 0 auto; }
.tm-ring circle { fill: none; stroke-width: 5; }
.tm-ring-bg { stroke: var(--bg-soft-2); }
.tm-ring-fg { stroke: var(--blue); stroke-linecap: round; transition: stroke-dashoffset .3s ease; }
.tm-count {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2);
  color: var(--navy);
  white-space: nowrap;
}
.tm-count-sub { font-size: var(--fs--1); color: var(--muted); }
.tm-week-actions { display: flex; flex-direction: column; gap: 8px; }

.tm-btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid var(--navy);
  border-radius: 2px;
  background: var(--navy);
  color: #fff;
  font-family: var(--font-body);
  font-size: var(--fs--1);
  font-weight: var(--fw-med);
  text-align: center;
  cursor: pointer;
  white-space: nowrap;
}
.tm-btn:hover {
  background: var(--navy-700); border-color: var(--navy-700);
  color: #fff; text-decoration: none;
}
.tm-btn-quiet { background: transparent; color: var(--navy); border-color: var(--line); }
.tm-btn-quiet:hover { background: var(--bg-soft); color: var(--navy); border-color: var(--navy); }
.tm-week-empty {
  margin: 14px 0 0;
  padding: 12px 16px;
  border-left: 3px solid var(--blue-light);
  background: var(--bg-soft);
  font-size: var(--fs-0);
  color: var(--muted);
}

/* ---------- tools ---------- */
.tm-tools-band { padding-top: 34px; }
.tm-tools {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.tm-tool { display: block; min-width: 0; padding: 14px 16px; background: var(--bg); color: var(--ink); }
.tm-tool:hover { background: var(--bg-soft); text-decoration: none; }
.tm-tool-label {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  color: var(--navy);
  overflow-wrap: anywhere;
}
.tm-tool-ext .tm-tool-label::after { content: " \2197"; font-size: .8em; color: var(--muted); }
.tm-tool-note { display: block; margin-top: 2px; font-size: var(--fs--1); color: var(--muted); }

/* ---------- the checklist ---------- */
.tm-list-band { padding-top: 34px; }

/* Slim by design. Two bars are already stuck above this one, so the offset
   has to clear both or this bar slides under them. Measured in the browser,
   not guessed: .site-header 76px + .portal-bar 54px here, 76 + 48 below
   900px, 66 + 48 below 820px. Anything tall enough to hold controls would
   cover the row you just ticked, so only the progress line is sticky. */
.tm-bar {
  position: sticky; top: 130px; z-index: 4;
  display: flex; align-items: center; gap: 14px;
  padding: 9px 0;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}
.tm-bar-track {
  flex: 1 1 auto; height: 4px;
  background: var(--bg-soft-2); border-radius: 2px; overflow: hidden;
}
.tm-bar-fill { display: block; height: 100%; width: 0; background: var(--blue); transition: width .3s ease; }
.tm-bar-text { flex: 0 0 auto; font-size: var(--fs--1); color: var(--muted); white-space: nowrap; }

.tm-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 6px; }
.tm-jump a {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: var(--fs--1);
  color: var(--muted);
}
.tm-jump a:hover { border-color: var(--navy); color: var(--navy); text-decoration: none; }

.tm-sec { padding: 26px 0 4px; scroll-margin-top: 150px; }
.tm-sec-head {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
  font-family: var(--font-display);
  font-size: var(--fs-2);
  font-weight: var(--fw-book);
  color: var(--navy);
}
.tm-sec-name { flex: 1 1 auto; min-width: 0; }
.tm-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.tm-sec-icon { color: var(--blue); }
.tm-sec-count {
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-caps);
  color: var(--muted);
}
.tm-sec-done .tm-sec-icon, .tm-sec-done .tm-sec-name { color: var(--muted); }

.tm-list, .tm-subs { list-style: none; margin: 0; padding: 0; }
.tm-task { padding: 3px 0; border-bottom: 1px solid var(--line); }
.tm-task:last-child { border-bottom: 0; }

.tm-check {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 8px 9px 2px;
  border-radius: 2px;
  cursor: pointer;
}
.tm-check:hover { background: var(--bg-tint); }
.tm-check input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tm-box {
  flex: 0 0 auto;
  position: relative;
  width: 20px; height: 20px;
  margin-top: 1px;
  border: 1.5px solid var(--muted);
  border-radius: 3px;
  background: var(--bg);
}
.tm-check input:checked + .tm-box { background: var(--blue); border-color: var(--blue); }
.tm-check input:checked + .tm-box::after {
  content: "";
  position: absolute; left: 6px; top: 2px;
  width: 5px; height: 10px;
  border: solid #fff; border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.tm-check input:focus-visible + .tm-box { outline: 2px solid var(--blue); outline-offset: 2px; }

.tm-task-text { min-width: 0; }
.tm-task-title { display: block; font-size: var(--fs-1); color: var(--ink); overflow-wrap: anywhere; }
.tm-task-note, .tm-big-note {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-0);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.tm-task.is-done .tm-task-title { color: var(--muted); text-decoration: line-through; }

.tm-subs { margin: 0 0 6px 32px; }
.tm-check-sub { padding: 5px 8px 5px 2px; }
.tm-check-sub .tm-box { width: 16px; height: 16px; margin-top: 2px; }
.tm-check-sub input:checked + .tm-box::after { left: 4.5px; top: 1px; width: 4px; height: 8px; }
.tm-sub-text { font-size: var(--fs-0); color: var(--muted); overflow-wrap: anywhere; }
.tm-check-sub input:checked ~ .tm-sub-text { text-decoration: line-through; }

/* The doc's own inline formatting arrives on these spans. Inside a checklist
   row the doc's greys, bolds and italics fight the row's own hierarchy, so
   neutralise them and let the row decide. Links keep working. */
.tm-task-text .hb-c-muted, .tm-sub-text .hb-c-muted, .tm-big-note .hb-c-muted { color: inherit; }
.tm-check .hb-b, .tm-big-list .hb-b { font-weight: inherit; }
.tm-check .hb-i, .tm-big-list .hb-i { font-style: normal; }
.tm-check .hb-u, .tm-big-list .hb-u { text-decoration: none; }
.tm-check a, .tm-big-list a { color: var(--blue); text-decoration: underline; }

/* ---------- big lab jobs ---------- */
.tm-band-lead { max-width: var(--maxw-text); margin: 0 0 22px; font-size: var(--fs-0); color: var(--muted); }
.tm-big-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  align-items: start;                   /* else a short card is stretched to
                                           the tallest in its row and ends in
                                           a large empty box */
  gap: 22px;
}
.tm-big-card {
  min-width: 0;
  padding: 20px 22px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.tm-big-card h3 {
  display: flex; align-items: center; flex-wrap: wrap; gap: 9px;
  margin: 0 0 12px;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: var(--fw-med);
  color: var(--navy);
}
.tm-big-name { min-width: 0; overflow-wrap: anywhere; }
.tm-big-icon { color: var(--blue); }
.tm-owner {
  padding: 2px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
  color: var(--muted);
}
.tm-big-list, .tm-big-subs { list-style: none; margin: 0; padding: 0; }
.tm-big-list > li { padding: 7px 0; border-top: 1px solid var(--line); }
.tm-big-list > li:first-child { padding-top: 0; border-top: 0; }
.tm-big-title { display: block; font-size: var(--fs-0); color: var(--ink); overflow-wrap: anywhere; }
.tm-big-subs { margin: 4px 0 0 14px; }
.tm-big-subs li {
  position: relative;
  padding-left: 12px;
  font-size: var(--fs--1);
  color: var(--muted);
  overflow-wrap: anywhere;
}
.tm-big-subs li::before {
  content: "";
  position: absolute; left: 0; top: 9px;
  width: 4px; height: 1px; background: var(--muted);
}

/* ---------- standing roles ---------- */
.tm-roles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 24px;
}
.tm-role { min-width: 0; padding-top: 14px; border-top: 2px solid var(--navy); }
.tm-role h3 {
  margin: 0 0 4px;
  font-family: var(--font-display);
  font-size: var(--fs-1);
  font-weight: var(--fw-med);
  color: var(--navy);
  overflow-wrap: anywhere;
}
.tm-role-who { display: block; margin-bottom: 8px; font-size: var(--fs-0); color: var(--blue); }
.tm-role-none { color: var(--muted); font-style: italic; }
.tm-role p { margin: 0; font-size: var(--fs--1); color: var(--muted); }
.tm-role-subs { margin: 8px 0 0; padding-left: 16px; font-size: var(--fs--1); color: var(--muted); }

/* ---------- intro ---------- */
.tm-intro-band { padding-top: 34px; }
.tm-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 44px; }
.tm-intro-text p { margin: 0 0 14px; font-size: var(--fs-0); color: var(--muted); }
.tm-intro-side { min-width: 0; padding-top: 12px; border-top: 2px solid var(--navy); }
.tm-intro-side p { margin: 8px 0 12px; font-size: var(--fs--1); color: var(--muted); }
.tm-stamp {
  font-size: var(--fs-micro) !important;
  letter-spacing: var(--tr-caps);
  text-transform: uppercase;
}

/* ---------- phone ---------- */
@media (max-width: 900px) {
  .tm-week { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px; }
  .tm-week-actions { flex-direction: row; flex-wrap: wrap; }
  .tm-week-actions .tm-btn { flex: 1 1 auto; }
  .tm-intro { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .tm-bar { top: 124px; }               /* portal bar drops to 48px */
}
@media (max-width: 820px) {
  .tm-bar { top: 114px; }               /* and the nav drops to 66px */
}
@media (max-width: 640px) {
  .tm-face { width: 60px; height: 60px; font-size: 21px; }
  .tm-who { gap: 14px; }
  .tm-tools { grid-template-columns: minmax(0, 1fr); }
  .tm-sec { padding-top: 20px; }
  .tm-subs { margin-left: 20px; }
  /* Bigger targets: this list gets worked through one-handed, at the bench,
     usually with a glove on. */
  .tm-check { padding: 12px 8px 12px 2px; }
  .tm-check-sub { padding: 8px 8px 8px 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .tm-ring-fg, .tm-bar-fill { transition: none; }
}

/* ---------- print ----------
   The lab keeps paper in the safety binder, so a printed copy has to stand on
   its own: no chrome, no sticky bar, and an empty box beside every task. */
@media print {
  .site-header, .portal-bar, .site-footer, .tm-bar, .tm-jump,
  .tm-week-actions, .tm-tools-band, .tm-intro-side { display: none !important; }
  /* The page head is a solid navy band on screen. Printed, that is a full
     inch of toner across the top of every copy. */
  .page-head.portal { padding: 0 0 10px; background: none !important; }
  .page-head.portal h1, .page-head.portal p { color: #000 !important; }
  .page-head.portal .portal-badge { display: none !important; }
  .tm-week-band, .tm-list-band { padding: 8px 0; }
  .tm-big-band, .tm-roles-band, .tm-intro-band { padding: 16px 0; }
  .tm-week-empty { border-left-color: #999; background: none; }
  .tm-week { padding: 12px 0; border: 0; border-bottom: 1px solid #999; background: none; }
  .tm-meter { display: none; }
  .tm-sec, .tm-big-card, .tm-task { break-inside: avoid; page-break-inside: avoid; }
  .tm-sec { padding: 14px 0 0; }
  .tm-check:hover { background: none; }
  .tm-box { border-color: #333; }
  .tm-check input:checked + .tm-box { background: none; }
  .tm-check input:checked + .tm-box::after { border-color: #333; }
  .tm-task.is-done .tm-task-title { color: #000; text-decoration: none; }
  .tm-big-grid { grid-template-columns: 1fr 1fr; }
}