/* XcodeFix Projects — what this app adds to the shared Graphite core.
   Anything general enough for another app belongs in the platform sheet. */

.auth-title { font-size: var(--text-xl); margin: 0 0 4px; }
.auth-sub   { color: var(--text-2); font-size: var(--text-label); margin: 0 0 var(--space-6); }
.auth-alt   { color: var(--text-2); font-size: var(--text-sm); margin: var(--space-5) 0 0; text-align: center; }
.btn-block  { width: 100%; justify-content: center; }

/* A date that has already gone past, on work that is still open. */
.is-overdue { color: var(--danger); font-weight: 500; }

/* Status tallies beside the segmented control. */
.seg-count { padding: 6px 10px; font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; }
.seg-count b { color: var(--text); }

/* ---------- Comments ---------- */
.comment-list { list-style: none; margin: 0; padding: 0 var(--space-5); display: grid; gap: var(--space-5); }
.comment { display: flex; gap: var(--space-3); }
.comment-body { flex: 1; min-width: 0; }
.comment-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 4px; font-size: var(--text-label); }
/* Imported bodies carry their own markup, so give it somewhere sane to live. */
.comment-text { font-size: var(--text-md); color: var(--text-2); overflow-wrap: anywhere; }
.comment-text img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.comment-text p:last-child { margin-bottom: 0; }
.comment-form { padding: var(--space-5); border-top: 1px solid var(--border-card); margin-top: var(--space-5); }
.card-note { color: var(--muted); padding: 0 var(--space-5) var(--space-5); margin: 0; }
.card-body.rich { padding: 0 var(--space-5) var(--space-5); overflow-wrap: anywhere; }
.card-body.rich img { max-width: 100%; height: auto; }

/* A details panel in a narrow column reads better as one column. */
.def-grid-1 { grid-template-columns: 1fr; }

.inline-form { display: inline-flex; }

/* An image the history could not bring with it. Inline, so it sits where the
   picture was rather than interrupting the paragraph. */
.missing-image { display: inline-block; margin: var(--space-2) 0; font-size: var(--text-sm); }

/* A select small enough to sit inside a table cell. */
.input-sm { padding: 4px 26px 4px 8px; font-size: var(--text-sm); height: auto; min-width: 110px; }

/* An explanatory note above a table, not a flash message. */
.note { display: flex; gap: var(--space-3); align-items: flex-start; margin-bottom: var(--space-5); }

/* ---------- Bulk actions ---------- */
.bulk-bar {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card);
}
.bulk-all { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-label); }
.bulk-bar .grow { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Colour swatches ---------- */
.swatches { display: flex; gap: var(--space-4); flex-wrap: wrap; padding: 0 var(--space-5) var(--space-5); }
.swatch { display: grid; gap: 2px; font-size: var(--text-sm); }
.swatch-chip { display: block; width: 68px; height: 34px; border-radius: var(--radius-sm); border: 1px solid var(--border-card); }
.swatch-chip.sm { display: inline-block; width: 18px; height: 12px; vertical-align: middle; }

/* ---------- Report tiles and bars ---------- */
.report-tile {
  display: grid; gap: 4px; padding: var(--space-5); background: var(--surface);
  border: 1px solid var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  color: var(--text); text-decoration: none;
}
.report-tile:hover { border-color: var(--brand); }
.report-tile-icon { color: var(--brand); }
.report-tile small { color: var(--text-2); }

/* One series, drawn in CSS. A chart runtime for this would be more machinery
   than the picture is worth. */
.bars { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-5); display: grid; gap: var(--space-2); }
.bars li { display: grid; grid-template-columns: 90px 1fr 80px; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
.bars-track { background: var(--bg); border-radius: var(--radius-pill); height: 10px; overflow: hidden; }
.bars-fill { display: block; height: 100%; background: var(--brand); border-radius: var(--radius-pill); }
.bars-value { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-6); align-items: start; }
.form-grid > .field, .form-grid > div > .field { margin: 0; }
.card-body.form-grid { padding: var(--space-5); }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 720px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.form-actions { display: flex; gap: var(--space-3); align-items: center; margin-top: var(--space-5); }

/* Running timer in the topbar ------------------------------------------- */
.timer-pill {
  display: inline-flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 4px 0 12px; max-width: 340px;
  border: 1px solid var(--brand-tint); border-radius: 999px;
  background: var(--brand-soft); color: var(--text);
  font-size: 13px;
}
.timer-pill-dot {
  width: 8px; height: 8px; border-radius: 50%; flex: none;
  background: var(--danger, #DC2626);
  animation: timer-pulse 1.6s ease-in-out infinite;
}
@keyframes timer-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .timer-pill-dot { animation: none; } }
.timer-pill-task {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: inherit; text-decoration: none; font-weight: 500;
}
.timer-pill-task:hover { text-decoration: underline; }
.timer-pill-clock { font-family: var(--font-mono, monospace); font-variant-numeric: tabular-nums; flex: none; }
.timer-pill-stop {
  display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px;
  border: 0; border-radius: 999px; cursor: pointer;
  background: var(--danger, #DC2626); color: #fff; font: inherit; font-weight: 600; font-size: 12px;
}
.timer-pill-stop:hover { filter: brightness(.92); }
.timer-pill-stop .icon { width: 12px; height: 12px; }
@media (max-width: 768px) {
  .timer-pill { max-width: none; padding-left: 10px; }
  .timer-pill-task, .timer-pill-stop span { display: none; }
}

/* =======================================================================
   Phase 1: working in place. Task rows, the side panel, the board, the
   timesheet, Home and My work.
   ======================================================================= */

/* ---------- Task rows (partials/task-line) ---------- */
.task-lines {
  list-style: none; margin: 0; padding: 0;
  background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card);
}
.task-lines-compact { border: 0; border-radius: 0; }
.task-line {
  display: flex; align-items: center; gap: var(--space-4);
  padding: 10px var(--space-5); border-top: 1px solid var(--border-card);
  transition: background-color .12s ease;
}
.task-line:first-child { border-top: 0; }
.task-line:hover { background: #FAFBFC; }
.task-line.is-new { background: var(--brand-soft); }
.task-group { padding: var(--space-4) var(--space-5) var(--space-2); border-top: 1px solid var(--border-card); background: var(--bg); }
.task-group:first-child { border-top: 0; border-radius: var(--radius-card) var(--radius-card) 0 0; }
.task-group h3 { margin: 0; font-size: var(--text-sm); font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; }

.tl-check, .step-check {
  appearance: none; flex: none; width: 20px; height: 20px; margin: 0; cursor: pointer;
  border: 1.5px solid var(--border-table); border-radius: 50%; background: var(--surface);
  display: inline-grid; place-items: center; transition: background-color .12s, border-color .12s;
}
.tl-check:hover, .step-check:hover { border-color: var(--success); }
.tl-check:checked, .step-check:checked { background: var(--success); border-color: var(--success); }
.tl-check:checked::after, .step-check:checked::after {
  content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg);
}
.tl-check:focus-visible, .step-check:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.tl-check-static { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1.5px dashed var(--border-table); display: inline-grid; place-items: center; color: var(--success); }

.tl-main { flex: 1; min-width: 0; }
.tl-title { display: block; color: var(--text); font-weight: 500; font-size: var(--text-md); line-height: 1.35; overflow-wrap: anywhere; }
.tl-title:hover { color: var(--brand-text); }
.task-line.is-done .tl-title { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--border-table); }
.tl-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; margin: 3px 0 0; font-size: var(--text-sm); color: var(--text-2); }
.tl-meta > * { display: inline-flex; align-items: center; gap: 4px; }
.tl-meta .icon { width: 13px; height: 13px; color: var(--muted); }
.tl-project { font-weight: 600; color: var(--text-2); font-family: var(--font-mono); font-size: 11.5px; }
.tl-parent { color: var(--text-2); }
.tl-steps { display: inline-flex; align-items: center; gap: 4px; font-variant-numeric: tabular-nums; }
.tl-steps.is-complete { color: var(--success); }
.tl-steps.is-complete .icon { color: var(--success); }
.tl-prio { padding: 0 6px; border-radius: 4px; font-size: 11px; font-weight: 600; }
.tl-prio-urgent { background: var(--danger-soft); color: var(--danger); }
.tl-prio-high { background: var(--warning-soft); color: var(--warning); }
.tl-prio-medium { background: var(--info-soft); color: var(--info); }
.tl-prio-low { background: var(--bg); color: var(--text-2); }

.tl-side { display: flex; align-items: center; gap: var(--space-3); flex: none; }
.tl-people {
  display: inline-flex; align-items: center; padding: 2px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; min-width: 32px;
}
button.tl-people:hover, button.tl-people[aria-expanded="true"] { background: var(--bg); }
.tl-people .avatar + .avatar { margin-left: -5px; box-shadow: 0 0 0 2px var(--surface); }
.avatar.xs { width: 22px; height: 22px; font-size: 9.5px; }
.avatar-empty { background: transparent; border: 1.5px dashed var(--border-table); color: var(--muted); }
.avatar-empty .icon { width: 14px; height: 14px; }
.avatar-more { background: var(--bg); color: var(--text-2); border: 1px solid var(--border-card); }

.tl-due {
  width: 128px; height: 30px; padding: 0 6px; border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-2); font: inherit; font-size: var(--text-sm); cursor: pointer;
}
.tl-due:hover, .tl-due:focus { border-color: var(--border-table); background: var(--surface); }
/* The picker icon appears on hover; an empty date shows a faint calendar
   instead of a placeholder the browser would render as "dd/mm/yyyy". */
.tl-due::-webkit-calendar-picker-indicator { opacity: 0; cursor: pointer; }
.tl-due:hover::-webkit-calendar-picker-indicator, .tl-due:focus::-webkit-calendar-picker-indicator { opacity: .6; }
.tl-due.is-empty:not(:focus) { color: transparent; }
.tl-due.is-empty:not(:focus)::-webkit-datetime-edit { color: transparent; }
.tl-due.is-empty:not(:focus) {
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239CA3AF' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M8 3v4M16 3v4M3 10h18'/%3E%3C/svg%3E") no-repeat right 8px center;
}
.tl-due.is-empty:not(:focus):hover { background-color: var(--surface); }
.tl-due.is-overdue { color: var(--danger); font-weight: 600; }
.tl-due.is-today { color: var(--warning); font-weight: 600; }

.tl-status {
  --status: #64748B;
  appearance: none; height: 28px; width: 124px; padding: 0 24px 0 22px;
  border: 1px solid var(--border-card); border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 600; color: var(--text);
  background:
    radial-gradient(circle at 11px 50%, var(--status) 0 4px, transparent 4.5px),
    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center,
    var(--surface);
  text-overflow: ellipsis;
}
.tl-status:hover { border-color: var(--border-table); }
.tl-status:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.tl-status-static { display: inline-flex; align-items: center; background: radial-gradient(circle at 11px 50%, var(--status) 0 4px, transparent 4.5px), var(--surface); }
.is-saving { opacity: .55; }

@media (max-width: 768px) {
  .task-line { flex-wrap: wrap; align-items: flex-start; padding: 12px var(--space-4); gap: var(--space-2) var(--space-3); }
  .tl-main { flex-basis: calc(100% - 40px); }
  .tl-side { flex-basis: 100%; padding-left: 32px; justify-content: flex-start; gap: var(--space-2); }
  .tl-due { width: 112px; }
  .tl-status { width: 116px; }
  .quick-add-bar { flex-wrap: wrap; padding: 4px var(--space-3) var(--space-3); }
  .quick-add-bar .quick-add-input { flex-basis: calc(100% - 30px); }
  .quick-add-bar select.input { flex: 1; max-width: none; }
  .filter-bar > select.input { flex: 1 1 100%; max-width: none; }
}

/* ---------- Filter bar and chip filters ---------- */
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-bottom: var(--space-4); }
.filter-bar > select.input { width: auto; min-width: 160px; max-width: 260px; }
.filter-search { position: relative; flex: 1 1 240px; max-width: 360px; }
.filter-search .icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.filter-search .input { padding-left: 34px; }
.chip-filters { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--space-4); }
.fchip {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px;
  border: 1px solid var(--border-card); border-radius: 999px; background: var(--surface);
  color: var(--text-2); font-size: var(--text-sm); font-weight: 500; text-decoration: none; white-space: nowrap;
}
.fchip:hover { border-color: var(--border-table); color: var(--text); }
.fchip b { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; }
.fchip[aria-current="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }
.fchip[aria-current="true"] b { color: var(--brand-text); }
.fchip-sep { width: 1px; height: 20px; background: var(--border-card); margin: 0 4px; }

/* ---------- Quick add ---------- */
.quick-add { display: flex; align-items: center; gap: var(--space-3); color: var(--muted); }
.quick-add-input {
  flex: 1; min-width: 0; height: 36px; border: 0; background: transparent; font: inherit; font-size: var(--text-md); color: var(--text);
}
.quick-add-input:focus { outline: none; }
.quick-add-input::placeholder { color: var(--muted); }
.quick-add-bar {
  padding: 4px var(--space-4); margin-bottom: var(--space-3);
  background: var(--surface); border: 1px dashed var(--border-table); border-radius: var(--radius-card);
}
.quick-add-bar:focus-within { border-style: solid; border-color: var(--teal); box-shadow: 0 0 0 3px var(--brand-soft); }
.quick-add-bar select.input { width: auto; max-width: 220px; }
.quick-add-bar .checkbox-inline { white-space: nowrap; font-size: var(--text-sm); color: var(--text-2); }

/* ---------- Page tabs ---------- */
.page-tabs { margin-bottom: var(--space-5); }
.page-tabs .tab { text-decoration: none; }
.page-tabs .tab[aria-current="page"] { color: var(--teal-text); border-bottom-color: var(--teal); }

/* ---------- Side panel (drawer) and the task page ---------- */
.drawer-scrim {
  position: fixed; inset: 0; z-index: 90; background: rgb(11 18 32 / .32);
  opacity: 0; transition: opacity .18s ease;
}
.drawer-scrim.is-open { opacity: 1; }
.task-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 91;
  width: min(640px, 100vw); background: var(--surface); box-shadow: var(--shadow-pop);
  transform: translateX(24px); opacity: 0; transition: transform .18s ease, opacity .18s ease;
  display: flex; flex-direction: column;
}
.task-drawer.is-open { transform: none; opacity: 1; }
.task-drawer-body { flex: 1; overflow-y: auto; overscroll-behavior: contain; }
.drawer-loading { padding: var(--space-8); color: var(--muted); text-align: center; }
body.has-drawer { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .task-drawer, .drawer-scrim { transition: none; } }

.tp { padding: var(--space-5) var(--space-7) var(--space-8); }
.tp-page { max-width: 860px; }
.tp-page .tp { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); }
.tp-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.tp-path { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; font-size: var(--text-sm); color: var(--text-2); }
.tp-path a { color: var(--text-2); }
.tp-path a:hover { color: var(--brand-text); }
.tp-head-actions { display: flex; align-items: center; gap: var(--space-2); }
.tp-title {
  display: block; width: 100%; margin: var(--space-4) 0 var(--space-3); padding: 4px 6px; margin-left: -6px;
  border: 1px solid transparent; border-radius: var(--radius-sm); resize: none; overflow: hidden;
  font: inherit; font-size: 20px; font-weight: 600; line-height: 1.3; color: var(--text); background: transparent;
}
.tp-title:hover { border-color: var(--border-card); }
.tp-title:focus { outline: none; border-color: var(--teal); background: var(--surface); }
.tp-title-static { padding: 0; margin-left: 0; }

.tp-props {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-3) var(--space-5);
  margin: 0 0 var(--space-5); padding: var(--space-4); background: var(--bg); border-radius: var(--radius-card);
}
.tp-props dt { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.tp-props dd { margin: 0; font-size: var(--text-label); min-height: 30px; display: flex; align-items: center; }
.tp-props .input-sm { width: 100%; min-width: 0; height: 30px; }
.picker-btn {
  width: 100%; min-height: 30px; padding: 4px 8px; text-align: left; cursor: pointer;
  border: 1px solid var(--border-table); border-radius: var(--radius-btn); background: var(--surface);
  font: inherit; font-size: var(--text-sm); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.picker-btn:hover { border-color: var(--muted); }

.tp-section { margin-top: var(--space-6); }
.tp-section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.tp-section-head h3 { margin: 0; font-size: var(--text-md); font-weight: 600; }
.tp-progress { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.tp-progress-bar { width: 96px; height: 6px; background: var(--border-card); border-radius: 999px; overflow: hidden; }
.tp-progress-bar span { display: block; height: 100%; background: var(--success); border-radius: 999px; }
.tp-rich { font-size: var(--text-md); color: var(--text-2); overflow-wrap: anywhere; }
.tp-rich img { max-width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--border-card); }
.tp-foot { margin-top: var(--space-7); font-size: var(--text-sm); }
.tp-missing { padding: var(--space-8); text-align: center; color: var(--muted); }

.steps { list-style: none; margin: 0 0 var(--space-2); padding: 0; border: 1px solid var(--border-card); border-radius: var(--radius-card); }
.steps:empty { display: none; }
.step { display: flex; align-items: center; gap: var(--space-3); padding: 8px var(--space-4); border-top: 1px solid var(--border-card); }
.step:first-child { border-top: 0; }
.step-title { flex: 1; min-width: 0; color: var(--text); font-size: var(--text-label); }
.step.is-done .step-title { color: var(--muted); text-decoration: line-through; }
.step-meta { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); flex: none; }
.tp .quick-add { padding: 0 var(--space-4); border: 1px dashed var(--border-table); border-radius: var(--radius-card); }
.tp .quick-add:focus-within { border-style: solid; border-color: var(--teal); }

.tp-time { list-style: none; margin: 0 0 var(--space-3); padding: 0; }
.tp-time li { display: flex; justify-content: space-between; padding: 6px 0; border-top: 1px solid var(--border-card); font-size: var(--text-label); }
.tp-time li:first-child { border-top: 0; }
.tp-log { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.tp-log .input-sm { height: 32px; min-width: 0; padding: 0 8px; }
.tp-log input[type=date] { width: 140px; }
.tp-log-dur { width: 80px; }
.tp-log-note { flex: 1 1 180px; }
.tp .comment-list { padding: 0; margin-bottom: var(--space-4); }
.tp-comment { display: grid; gap: var(--space-2); justify-items: end; }
.tp-comment textarea.input { height: auto; min-height: 64px; padding: 10px 12px; resize: vertical; }

@media (max-width: 640px) {
  .tp { padding: var(--space-4); }
  .tp-props { grid-template-columns: 1fr 1fr; }
}

/* ---------- Assignee picker ---------- */
.picker-pop {
  position: absolute; z-index: 120; width: 280px; padding: var(--space-3);
  background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
  display: grid; gap: var(--space-2);
}
.picker-search { height: 34px; }
.picker-me { justify-self: start; font-size: var(--text-sm); }
.picker-list { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.picker-list label { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-label); }
.picker-list label:hover { background: var(--bg); }
.picker-list input { margin: 0; accent-color: var(--brand); }
.picker-foot { display: flex; justify-content: space-between; align-items: center; padding-top: var(--space-2); border-top: 1px solid var(--border-card); }
.picker-outside { margin-left: auto; color: var(--muted); font-size: var(--text-xs, 11px); }
.picker-note { margin: 0; color: var(--muted); font-size: var(--text-sm); }

/* ---------- Toasts ---------- */
.pms-toasts { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 200; display: grid; gap: 8px; justify-items: center; pointer-events: none; }
.pms-toast {
  padding: 8px 16px; border-radius: 999px; background: #111827; color: #fff; font-size: var(--text-label); font-weight: 500;
  box-shadow: var(--shadow-pop); animation: toast-in .16s ease; transition: opacity .3s ease;
}
.pms-toast.is-error { background: var(--danger); border-radius: var(--radius-btn); max-width: 420px; text-align: center; }
.pms-toast.is-leaving { opacity: 0; }
@keyframes toast-in { from { transform: translateY(6px); opacity: 0; } }

/* ---------- Board ---------- */
.board { display: flex; gap: var(--space-4); overflow-x: auto; padding-bottom: var(--space-4); align-items: flex-start; scroll-snap-type: x proximity; }
.board-col {
  flex: 0 0 288px; background: var(--bg); border: 1px solid var(--border-card);
  border-radius: var(--radius-card); display: flex; flex-direction: column; max-height: calc(100vh - 240px);
  scroll-snap-align: start; transition: border-color .12s, background-color .12s;
}
.board-col.is-over { border-color: var(--brand); background: var(--brand-soft); }
.board-col.is-done { opacity: .85; }
.board-col-head { --status: #64748B; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.board-col-head h3 { margin: 0; font-size: var(--text-label); font-weight: 600; display: flex; align-items: center; gap: 8px; }
.board-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--status); }
.board-count { font-size: var(--text-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.board-col-body { padding: 0 var(--space-3) var(--space-3); overflow-y: auto; display: grid; gap: var(--space-2); min-height: 60px; align-content: start; }
.board-empty { color: var(--muted); font-size: var(--text-sm); margin: 0; text-align: center; padding: var(--space-5) 0; border: 1px dashed var(--border-table); border-radius: var(--radius-btn); }
.board-card {
  background: var(--surface); border: 1px solid var(--border-card);
  border-radius: var(--radius-btn); padding: var(--space-3); box-shadow: var(--shadow-card); cursor: grab;
}
.board-card:hover { border-color: var(--border-table); }
.board-card.is-dragging { opacity: .4; }
.board-card.is-new { border-color: var(--brand); }
.board-card-title { display: block; font-size: var(--text-label); font-weight: 500; color: var(--text); line-height: 1.35; overflow-wrap: anywhere; }
.board-card-meta, .board-card-foot { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; margin: 6px 0 0; font-size: var(--text-sm); }
.board-card-foot { justify-content: space-between; }
.board-card-foot .icon { width: 13px; height: 13px; }
.board-card-people { display: inline-flex; }
.board-card-people .avatar + .avatar { margin-left: -6px; box-shadow: 0 0 0 2px var(--surface); }
.board-due { font-size: 12px; color: var(--text-2); }
.board-more { display: block; text-align: center; font-size: var(--text-sm); padding: var(--space-2); }
.board-add { padding: 0 var(--space-3) var(--space-2); }
.board-add .quick-add-input { height: 32px; font-size: var(--text-label); }

/* ---------- Timesheet ---------- */
.sheet-head { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-bottom: var(--space-4); }
.sheet-nav { display: flex; align-items: center; gap: var(--space-2); }
.sheet-nav h2 { margin: 0 var(--space-2); font-size: var(--text-lg); }
.sheet-total { margin-left: auto; font-size: var(--text-md); }
.sheet-total b { font-size: var(--text-lg); font-variant-numeric: tabular-nums; }
.sheet th.sheet-task { min-width: 260px; text-align: left; font-weight: 400; padding: 8px var(--space-4); }
.sheet th.sheet-task a { display: block; font-weight: 500; color: var(--text); }
.sheet th.sheet-task small { display: block; }
.sheet td { padding: 4px; }
.sheet .is-today { background: var(--brand-soft); }
.sheet th.is-weekend { color: var(--muted); }
.sheet-cell {
  width: 64px; height: 34px; padding: 0 6px; text-align: right; font: inherit; font-variant-numeric: tabular-nums;
  border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent;
}
.sheet-cell:hover { border-color: var(--border-card); background: var(--surface); }
.sheet-cell:focus { outline: none; border-color: var(--teal); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); }
.sheet-empty td { padding: var(--space-6); text-align: center; color: var(--muted); }
.sheet-add { margin-top: var(--space-5); max-width: 560px; }
.sheet-add label { display: block; font-size: var(--text-label); font-weight: 600; margin-bottom: 6px; }
.sheet-hint { margin-top: var(--space-4); }

/* ---------- Home ---------- */
.home-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--space-5); }
.home-head h2 { margin: 0; font-size: var(--text-2xl); }
.home-head .sub { margin: 4px 0 0; color: var(--text-2); }
.attention { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-5); }
.attention-item {
  display: grid; grid-template-columns: auto 1fr; align-items: baseline; column-gap: 10px; padding: var(--space-4) var(--space-5);
  background: var(--surface); border: 1px solid var(--border-card); border-left: 3px solid var(--muted); border-radius: var(--radius-card);
  color: var(--text); text-decoration: none;
}
.attention-item:hover { border-color: var(--border-table); box-shadow: var(--shadow-card); }
.attention-count { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; grid-row: span 2; }
.attention-label { font-weight: 600; font-size: var(--text-md); }
.attention-hint { font-size: var(--text-sm); color: var(--text-2); }
.attention-item.tone-danger { border-left-color: var(--danger); }
.attention-item.tone-danger .attention-count { color: var(--danger); }
.attention-item.tone-warning { border-left-color: #D97706; }
.attention-item.tone-warning .attention-count { color: var(--warning); }
.attention-item.tone-info { border-left-color: var(--info); }

.home-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-5); align-items: start; }
.home-side { display: grid; gap: var(--space-5); }
.home-focus .task-lines { border-top: 1px solid var(--border-card); }
.home-empty { padding: var(--space-6) var(--space-5); }
.home-empty p { margin: 0 0 4px; }
@media (max-width: 1100px) { .home-grid { grid-template-columns: minmax(0, 1fr); } }

.week-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; padding: 0 var(--space-5) var(--space-5); height: 150px; }
.week-bar { display: grid; grid-template-rows: 18px 1fr 18px; justify-items: center; gap: 4px; font-size: 11px; color: var(--text-2); }
.week-bar-value { font-variant-numeric: tabular-nums; white-space: nowrap; }
.week-bar-track { width: 100%; max-width: 28px; background: var(--bg); border-radius: 6px; display: flex; align-items: flex-end; overflow: hidden; }
.week-bar-track span { display: block; width: 100%; background: #0D9488; border-radius: 6px; min-height: 0; }
.week-bar.is-today .week-bar-day { color: var(--brand-text); font-weight: 700; }
.week-bar.is-future { opacity: .45; }

.notice-list { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-4); display: grid; }
.notice-list li { padding: 10px 0; border-top: 1px solid var(--border-card); display: grid; gap: 2px; }
.notice-list li:first-child { border-top: 0; }
.notice-list a { display: grid; gap: 2px; color: var(--text); font-size: var(--text-label); }
.notice-list a b { font-weight: 600; }
.notice-page { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 0; }
.notice-page li { padding: var(--space-4) var(--space-5); }
.notice-page li.is-unread { background: var(--brand-soft); box-shadow: inset 3px 0 0 var(--brand); }

.jump-list { list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-3); }
.jump-list a { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-btn); color: var(--text); font-size: var(--text-label); }
.jump-list a:hover { background: var(--bg); }
.jump-code { font-family: var(--font-mono); font-size: 11.5px; color: var(--text-2); background: var(--bg); padding: 1px 6px; border-radius: 4px; flex: none; }

/* ---------- My work ---------- */
.work-group { margin-bottom: var(--space-6); }
.work-group-head { display: flex; align-items: center; gap: 8px; margin: 0 0 var(--space-2); font-size: var(--text-md); font-weight: 600; }
.work-group-head .count { font-size: var(--text-sm); color: var(--text-2); font-weight: 500; background: var(--bg); border: 1px solid var(--border-card); border-radius: 999px; padding: 0 8px; }
.work-group-head.is-overdue { color: var(--danger); }
.work-done summary { cursor: pointer; list-style: none; color: var(--text-2); }
.work-done summary::-webkit-details-marker { display: none; }
.work-done summary::before { content: "▸"; font-size: 11px; transition: transform .12s; }
.work-done[open] summary::before { transform: rotate(90deg); }

/* ---------- Search, profile ---------- */
.search-page { display: flex; gap: var(--space-3); align-items: center; max-width: 720px; margin-bottom: var(--space-5); position: relative; }
.search-page > .icon { position: absolute; left: 12px; color: var(--muted); }
.search-page .input { padding-left: 36px; height: 44px; font-size: var(--text-md); }
.search-group { margin-bottom: var(--space-5); }
.result-list { list-style: none; margin: 0; padding: 0 var(--space-3) var(--space-3); }
.result-list li { display: flex; justify-content: space-between; gap: var(--space-4); padding: 8px; border-radius: var(--radius-btn); }
.result-list li:hover { background: var(--bg); }
.result-list a { display: flex; gap: 10px; align-items: center; color: var(--text); min-width: 0; }
.result-list .muted { font-size: var(--text-sm); white-space: nowrap; }
.profile-card { max-width: 860px; }
.profile-head { display: flex; gap: var(--space-5); align-items: center; padding: var(--space-6); }
.profile-head h2 { margin: 0 0 4px; }
.profile-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); border-top: 1px solid var(--border-card); }
.profile-stats a { display: grid; gap: 2px; padding: var(--space-5) var(--space-6); color: var(--text); border-left: 1px solid var(--border-card); }
.profile-stats a:first-child { border-left: 0; }
.profile-stats b { font-size: var(--text-xl); }
.profile-stats span { font-size: var(--text-sm); color: var(--text-2); }
.card-actions { padding: 0 var(--space-5) var(--space-5); gap: var(--space-3); }

/* =======================================================================
   Phase 2: project workspace, templates, requests, files.
   ======================================================================= */

/* ---------- Project header ---------- */
.project-head {
  display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-5); flex-wrap: wrap;
  margin-bottom: var(--space-4);
}
.project-head-main { min-width: 0; flex: 1 1 360px; }
.project-head-main h2 { margin: 4px 0 8px; font-size: var(--text-2xl); line-height: 1.25; }
.project-head-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0; font-size: var(--text-sm); color: var(--text-2); }
.project-head-meta a { display: inline-flex; align-items: center; gap: 4px; }
.project-head-meta .icon { width: 13px; height: 13px; }
.project-head-progress { display: flex; align-items: center; gap: 10px; font-size: var(--text-sm); }
.project-head-progress .tp-progress-bar { width: 180px; }
.project-head-side { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.project-head-side .tl-status { width: 128px; height: 34px; }
.tl-assignee {
  height: 30px; max-width: 170px; padding: 0 22px 0 10px; border: 1px solid var(--border-card); border-radius: 999px;
  font: inherit; font-size: 12px; color: var(--text); cursor: pointer; appearance: none;
  background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 7px center, var(--surface);
  text-overflow: ellipsis;
}
.project-head-side .tl-assignee { height: 34px; }
.tl-assignee:hover { border-color: var(--border-table); }

.cycle-banner {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  background: var(--info-soft); border: 1px solid var(--info-border); border-radius: var(--radius-card); color: var(--text);
}
.cycle-banner > .icon { color: var(--info); flex: none; }
.cycle-banner span { flex: 1 1 280px; }

/* ---------- Overview ---------- */
.phase-progress { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-4); display: grid; gap: 2px; }
.phase-progress li { display: grid; grid-template-columns: minmax(0, 1fr) 120px 48px; align-items: center; gap: var(--space-3); padding: 7px 0; font-size: var(--text-label); }
.phase-progress a { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phase-progress .tp-progress-bar { width: 100%; }
.phase-progress .muted { text-align: right; font-variant-numeric: tabular-nums; font-size: var(--text-sm); }
.phase-progress li.is-complete a { color: var(--success); }
.attention-compact { grid-template-columns: repeat(3, 1fr); margin: 0; }
.attention-compact .attention-item { grid-template-columns: 1fr; padding: var(--space-3) var(--space-4); }
.attention-compact .attention-count { grid-row: auto; font-size: 22px; }
.attention-compact .attention-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-2); }
.attention-item.tone-neutral .attention-count { color: var(--text-2); }
.about-list { margin: 0; padding: 0 var(--space-5) var(--space-4); display: grid; gap: 8px; }
.about-list div { display: grid; grid-template-columns: 120px 1fr; gap: var(--space-3); font-size: var(--text-label); }
.about-list dt { color: var(--text-2); }
.about-list dd { margin: 0; }
.about-notes { padding: 0 var(--space-5) var(--space-5); border-top: 1px solid var(--border-card); padding-top: var(--space-4); }
.people-mini, .activity-mini { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-4); }
.people-mini li { display: flex; align-items: center; gap: 10px; padding: 5px 0; font-size: var(--text-label); }
.people-mini li span:nth-child(2) { flex: 1; }
.people-mini .muted { font-size: var(--text-sm); }
.activity-mini li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; padding: 8px 0; border-top: 1px solid var(--border-card); font-size: var(--text-label); }
.activity-mini li:first-child { border-top: 0; }
.activity-mini small { margin-left: auto; }
.activity-page { padding: var(--space-3) var(--space-5); }
.activity-page .avatar { align-self: center; }

/* ---------- Tasks by phase ---------- */
.phase-sections { display: grid; gap: var(--space-5); }
.phase-section { background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); overflow: hidden; }
.phase-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-5); background: var(--bg); border-bottom: 1px solid var(--border-card); }
.phase-head h3 { margin: 0; font-size: var(--text-md); font-weight: 600; }
.phase-section .task-lines { border: 0; border-radius: 0; }
.phase-empty { padding: var(--space-3) var(--space-5); font-size: var(--text-sm); list-style: none; }
.phase-add { padding: 2px var(--space-5); border-top: 1px dashed var(--border-card); }
.phase-add:focus-within { background: var(--brand-soft); }
.phase-new { margin-top: var(--space-5); }

/* ---------- Files ---------- */
.file-drop-zone {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4);
  border: 1.5px dashed var(--border-table); border-radius: var(--radius-card); background: var(--surface); color: var(--text-2);
}
.file-drop-zone span { flex: 1 1 240px; }
.file-drop-zone.is-busy { opacity: .6; pointer-events: none; }
.file-drop-zone label { cursor: pointer; }
.file-list { list-style: none; margin: 0; padding: 0; background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); }
.file-list li { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-5); border-top: 1px solid var(--border-card); }
.file-list li:first-child { border-top: 0; }
.file-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--radius-btn); background: var(--bg); color: var(--text-2); flex: none; }
.file-main { flex: 1; min-width: 0; display: grid; }
.file-main a:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; }

/* ---------- People ---------- */
.people-add { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-bottom: var(--space-4); }
.people-add .row { gap: var(--space-2); }
.people-add select.input { width: 240px; }
.people-list .task-line { align-items: center; }
.workflow-row { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: 0 var(--space-5) var(--space-5); }
.workflow-row .tl-status { width: auto; padding-right: 12px; }

/* ---------- New project: template picker ---------- */
.template-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-3); padding: 0 var(--space-5) var(--space-5); }
.template-card { position: relative; cursor: pointer; }
.template-card input { position: absolute; opacity: 0; }
.template-card-body {
  display: grid; gap: 6px; height: 100%; padding: var(--space-4); border: 1.5px solid var(--border-card); border-radius: var(--radius-card);
  background: var(--surface); transition: border-color .12s, box-shadow .12s;
}
.template-card:hover .template-card-body { border-color: var(--border-table); }
.template-card input:checked + .template-card-body { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-soft); }
.template-card input:focus-visible + .template-card-body { outline: 2px solid var(--teal); outline-offset: 2px; }
.template-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.template-card-desc { font-size: var(--text-sm); color: var(--text-2); }
.template-card-meta { font-size: 12px; color: var(--muted); }
.form-more > summary { cursor: pointer; list-style: none; }
.form-more > summary::-webkit-details-marker { display: none; }
.form-more > summary::after { content: "▸"; color: var(--muted); }
.form-more[open] > summary::after { content: "▾"; }
.team-checks { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); margin-top: var(--space-3); }
.project-form .card { margin-bottom: var(--space-4); }

/* ---------- Requests ---------- */
.new-request { margin-bottom: var(--space-4); }
.new-request-summary { display: flex; align-items: center; gap: 10px; padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; font-weight: 600; color: var(--brand-text); }
.new-request-summary::-webkit-details-marker { display: none; }
.new-request-summary small { font-weight: 400; }
.new-request[open] .new-request-summary { border-bottom: 1px solid var(--border-card); }
.new-request-form { padding: var(--space-5); }
.seg-radio { display: inline-flex; }
.seg-radio label { position: relative; cursor: pointer; }
.seg-radio input { position: absolute; opacity: 0; }
.seg-radio span { display: inline-block; padding: 6px 12px; border-radius: 6px; font-size: var(--text-sm); font-weight: 500; color: var(--text-2); }
.seg-radio input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow-card); }
.seg-radio input:focus-visible + span { outline: 2px solid var(--teal); }
.field-label { display: block; font-size: var(--text-label); font-weight: 600; margin-bottom: 6px; }
.request-line { position: relative; padding-left: calc(var(--space-5) + 4px); }
.sev-mark { position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; }
.sev-critical .sev-mark { background: var(--danger); }
.sev-major .sev-mark { background: #D97706; }
.sev-minor .sev-mark { background: var(--border-table); }

@media (max-width: 768px) {
  .project-head-side { width: 100%; }
  .attention-compact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .phase-progress li { grid-template-columns: minmax(0, 1fr) 70px 40px; }
  .about-list div { grid-template-columns: 1fr; gap: 0; }
  .people-add select.input { width: 100%; }
  .tl-assignee { max-width: 130px; }
}

/* ---------- Templates ---------- */
.template-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.template-tile { display: flex; flex-direction: column; padding: var(--space-5); gap: var(--space-3); }
.template-tile.is-archived { opacity: .6; }
.template-tile-head { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.template-tile-head h3 { margin: 0; font-size: var(--text-lg); }
.template-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: var(--text-sm); color: var(--text-2); flex: 1; }
.template-facts li::before { content: "·"; margin-right: 6px; color: var(--muted); }
.template-tile-foot { display: flex; align-items: center; gap: var(--space-2); padding-top: var(--space-3); border-top: 1px solid var(--border-card); }
.template-editor { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--space-5); align-items: start; }
.template-editor-side { display: grid; gap: var(--space-4); position: sticky; top: calc(var(--topbar-h, 56px) + 16px); }
textarea[data-outline] { height: auto; min-height: 460px; padding: 12px; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; resize: vertical; }
.outline-help { margin: 0; padding: 0 var(--space-5) var(--space-4); display: grid; gap: 8px; font-size: var(--text-sm); }
.outline-help dt code, .outline-help dd code { font-family: var(--font-mono); font-size: 12px; background: var(--bg); padding: 1px 5px; border-radius: 4px; }
.outline-help dd { margin: 2px 0 0; color: var(--text-2); }
.outline-preview { padding: 0 var(--space-5) var(--space-4); max-height: 60vh; overflow-y: auto; font-size: var(--text-label); }
.op-phase { padding: 8px 0; border-top: 1px solid var(--border-card); }
.op-phase:first-child { border-top: 0; }
.op-phase ul { margin: 4px 0 0; padding-left: 18px; color: var(--text-2); }
.op-flow { font-weight: 600; }
@media (max-width: 1000px) { .template-editor { grid-template-columns: minmax(0, 1fr); } .template-editor-side { position: static; } }

/* ---------- Project cards ---------- */
.project-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.project-card {
  display: flex; flex-direction: column; gap: 6px; padding: var(--space-4) var(--space-5); color: var(--text); text-decoration: none;
  background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.project-card:hover { border-color: var(--brand); box-shadow: 0 4px 14px rgb(11 18 32 / .08); }
.project-card:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.project-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.project-card-top .tl-status { height: 24px; width: auto; padding: 0 10px 0 20px; font-size: 11px; }
.project-card-name { font-size: var(--text-md); line-height: 1.3; }
.project-card-sub { font-size: var(--text-sm); color: var(--text-2); }
.project-card-progress { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--text-sm); }
.project-card-progress .tp-progress-bar { flex: 1; }
.project-card-facts { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: var(--text-sm); color: var(--text-2); }
.project-card-idle { margin-left: auto; }
.project-card-owner { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-2); padding-top: 8px; margin-top: auto; border-top: 1px solid var(--border-card); }
.tl-status-static { height: 26px; padding: 0 12px 0 22px; border: 1px solid var(--border-card); border-radius: 999px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.new-request.card { padding: 0; }
.request-line .tl-status { width: 144px; }

/* ---------- Clean-up ---------- */
.triage-list { display: grid; gap: var(--space-4); margin-top: var(--space-4); }
.triage-card { padding: var(--space-5); display: grid; gap: var(--space-3); }
.triage-head { display: flex; justify-content: space-between; gap: var(--space-5); align-items: flex-start; }
.triage-head h3 { margin: 0 0 4px; font-size: var(--text-lg); }
.triage-head p { margin: 0; max-width: 720px; }
.triage-count { white-space: nowrap; font-size: var(--text-md); color: var(--text-2); }
.triage-count b { font-size: 26px; color: var(--text); font-variant-numeric: tabular-nums; }
.triage-examples summary { cursor: pointer; color: var(--brand-text); font-size: var(--text-label); }
.triage-examples ul { margin: var(--space-2) 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--text-label); }
.triage-foot { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; padding-top: var(--space-3); border-top: 1px solid var(--border-card); }
@media (max-width: 768px) {
  .request-line .tl-side { flex-wrap: wrap; padding-left: 0; }
  .request-line .tl-assignee { max-width: 150px; }
  .request-line .tl-status { width: 136px; }
}

/* =======================================================================
   Phase 3: sprints, insights, timeline, reports, saved views.
   ======================================================================= */
.tl-points { width: 58px; height: 30px; padding: 0 6px; border: 1px solid var(--border-card); border-radius: var(--radius-sm); font: inherit; font-size: 12px; text-align: center; background: var(--surface); }
.tl-points:focus { outline: 2px solid var(--teal); outline-offset: -1px; }
.tl-sprint { max-width: 120px; }
.sprint-head { align-items: flex-start; }
.sprint-head h3 { display: flex; align-items: center; gap: 8px; }
.sprint-head p { margin: 4px 0 0; font-size: var(--text-sm); }
.sprint-actions { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; justify-content: flex-end; }
.sprint-total { font-size: var(--text-sm); color: var(--text-2); white-space: nowrap; }
.sprint-total b { color: var(--text); font-size: var(--text-md); }
.sprint-section.is-active { border-color: var(--info-border); box-shadow: 0 0 0 1px var(--info-border); }
.sprint-section.is-active .phase-head { background: var(--info-soft); }
.sprint-complete { position: relative; }
.sprint-complete > summary { list-style: none; cursor: pointer; }
.sprint-complete > summary::-webkit-details-marker { display: none; }
.sprint-complete-form {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30; width: 320px; display: grid; gap: 8px; padding: var(--space-4);
  background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
}
.sprint-complete-form label { font-size: var(--text-label); font-weight: 600; }
.sprint-complete-form textarea.input { height: auto; padding: 8px 10px; }
.sprint-review { display: block; width: 100%; margin-top: 4px; color: var(--text-2); font-size: var(--text-sm); }
.sprint-new { margin-bottom: var(--space-4); }
.sprint-banner { background: var(--brand-soft); border-color: var(--brand-tint); }
.sprint-banner > .icon { color: var(--brand); }

.kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); margin-bottom: var(--space-4); }
.kpi-tile { display: grid; gap: 2px; padding: var(--space-4) var(--space-5); background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); }
.kpi-tile b { font-size: 26px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kpi-tile .muted { font-size: var(--text-sm); }
.kpi-tile-label { font-size: var(--text-sm); font-weight: 600; color: var(--text-2); }
.card-body { padding: 0 var(--space-5) var(--space-5); }
.wip-bars { padding: 0; }
.wip-bars li { grid-template-columns: 110px 1fr 90px; }
.wip-bars li.is-over .bars-value { color: var(--danger); font-weight: 600; }
.wip-bars .icon { width: 13px; height: 13px; vertical-align: -2px; }

/* ---------- Timeline ---------- */
.timeline-card { padding: var(--space-4) 0; }
.timeline-scroll { overflow-x: auto; }
.timeline { min-width: max(100%, calc(240px + var(--months) * 90px)); padding: 0 var(--space-5); }
.tl-row { display: grid; grid-template-columns: 240px 1fr; align-items: center; min-height: 32px; }
.tl-label { padding-right: var(--space-3); font-size: var(--text-label); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tl-label a { color: var(--text); }
.tl-track { position: relative; height: 32px; border-left: 1px solid var(--border-card); }
.tl-axis .tl-track { height: 24px; border-bottom: 1px solid var(--border-card); }
.tl-month { position: absolute; top: 2px; padding-left: 6px; border-left: 1px solid var(--border-card); height: 100vh; font-size: 11px; color: var(--muted); white-space: nowrap; pointer-events: none; }
.tl-axis { position: sticky; top: 0; background: var(--surface); z-index: 2; overflow: hidden; }
.tl-section { margin: var(--space-4) 0 var(--space-1); font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.tl-today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--danger); opacity: .5; }
.tl-bar { position: absolute; top: 8px; height: 16px; border-radius: 4px; background: var(--info-soft); border: 1px solid var(--info-border); overflow: hidden; }
.tl-bar-fill { display: block; height: 100%; background: var(--info); opacity: .55; }
.tl-bar.is-done { background: var(--success-soft); border-color: var(--success-border); }
.tl-bar.is-done .tl-bar-fill { background: var(--success); }
.tl-bar-task { top: 11px; height: 10px; background: var(--brand); border-color: var(--brand); }
.tl-bar-task.is-late { background: var(--danger); border-color: var(--danger); }
.tl-none { position: absolute; left: 8px; top: 8px; font-size: 12px; }
.timeline-legend { padding: var(--space-3) var(--space-5) 0; }
.tl-key { display: inline-block; width: 22px; height: 10px; border-radius: 3px; background: var(--info-soft); border: 1px solid var(--info-border); vertical-align: middle; }
.tl-key-late { background: var(--danger); border-color: var(--danger); }
@media (max-width: 768px) { .tl-row { grid-template-columns: 140px 1fr; } .timeline { min-width: calc(140px + var(--months) * 70px); } }

/* Chart legend, tooltip and donut legend — the same rules HRMS ships with charts.js. */
.chart-legend { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 12.5px; color: var(--text-2, #4b5563); }
.chart-legend button { display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; color: inherit; font-weight: 500; }
.chart-legend button[aria-pressed="false"] { opacity: .45; text-decoration: line-through; }
.donut-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut-legend { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.donut-legend li, .donut-legend a { display: flex; align-items: center; gap: 8px; color: inherit; }
.donut-legend a:hover { text-decoration: none; color: var(--teal-text); }
.donut-legend b { font-weight: 600; }
.donut-legend small { color: #6b7280; min-width: 42px; text-align: right; }

.chart-tip {
  position: fixed; z-index: 120; pointer-events: none;
  background: #111827; color: #fff; padding: 8px 10px; border-radius: 8px;
  font-size: 12.5px; line-height: 1.45; box-shadow: var(--shadow-pop); max-width: 280px;
}
.chart-tip b { display: block; margin-bottom: 4px; font-weight: 600; color: #fff; }
.chart-tip .row { display: flex; justify-content: space-between; gap: 16px; }
.chart-tip .row span:first-child { display: inline-flex; align-items: center; gap: 6px; color: #cbd5e1; }
.chart-tip .num { font-variant-numeric: tabular-nums; }

.page-tabs .tab, .page-tabs .tab .icon { flex: none; }

/* Data bars are data, not brand: a tenant whose brand is red should not see
   every bar as an alarm. */
.bars-fill { background: #0D9488; }
.bars-wide li { grid-template-columns: 150px 1fr 60px; }
.bars-wide li > :first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Saved views ---------- */
.saved-views { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: var(--space-3); }
.saved-view { display: inline-flex; align-items: center; height: 30px; border: 1px solid var(--border-card); border-radius: 999px; background: var(--surface); overflow: hidden; }
.saved-view a { display: inline-flex; align-items: center; gap: 6px; padding: 0 4px 0 12px; color: var(--text); font-size: var(--text-sm); font-weight: 500; }
.saved-view a .icon { width: 13px; height: 13px; color: #B45309; }
.saved-view.is-current { border-color: var(--brand); background: var(--brand-soft); }
.saved-view-x { display: inline-grid; place-items: center; width: 26px; height: 28px; border: 0; background: transparent; color: var(--muted); cursor: pointer; }
.saved-view-x:hover { color: var(--danger); }
.saved-view-x .icon { width: 12px; height: 12px; }
.saved-view-new > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); }
.saved-view-new > summary::-webkit-details-marker { display: none; }
.saved-view-new[open] > summary { display: none; }
.saved-view-form { display: inline-flex; gap: 6px; align-items: center; }
.saved-view-form .input { width: 200px; height: 30px; }

/* =======================================================================
   Phase 4: polish and accessibility.
   ======================================================================= */

/* One title per page. The content carries the visible heading; where it does,
   the topbar's copy is kept for screen readers (it is the page's h1) but not
   shown twice. The breadcrumb above it stays. */
body:has(.content .page-head h2, .content .project-head h2, .content .home-head h2, .content .tp-title) .topbar .page-title {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* The platform's muted grey (#9CA3AF) is 2.5:1 on white — too faint for the
   small text it is used on. Projects uses a darker grey that passes WCAG AA. */
.muted, .hint, .card-note, .tl-meta .icon, .template-card-meta, .pagination-summary { color: #5F6672; }
/* Fainter greys the platform uses for small text, raised to AA. */
.crumb a, .crumb span, .board-empty, .sheet-empty td, .sheet th.is-weekend, .task-line.is-done .tl-title,
.step.is-done .step-title, .project-head-meta .muted, small.muted { color: #5F6672; }
/* Initials on the brand colour: white reads on any brand, the light tint does not on red. */
.avatar { color: #fff; }
.avatar-empty { color: #5F6672; }
.avatar-more { color: var(--text-2); }
/* The sidebar's small grey text on navy. */
.sidebar .tenant, .sidebar-foot > span:not(.avatar), .sidebar .nav-section-label { color: #94A3B8; }
.footer, .footer span, .content small { color: #5F6672; }
/* A link inside grey text must not rely on colour alone. */
.muted a, .hint a, .card-note a, .home-empty a { text-decoration: underline; text-underline-offset: 2px; }
/* Done columns are told apart by their header, not by fading every card in them. */
.board-col.is-done { opacity: 1; }
.board-col.is-done .board-col-head h3 { color: var(--success); }
.tl-steps.is-complete, .tl-steps.is-complete .icon { color: #15803D; }
/* Every platform rule that uses the muted grey gets the AA-passing one. */
:root { --muted: #5F6672; --sidebar-muted: #94A3B8; }
.sidebar .submenu-link, .sidebar .submenu-link span { color: #A3B1C6; }
.sidebar .submenu-link.is-active, .sidebar .submenu-link.is-active span { color: #fff; }
.week-bar.is-future { opacity: 1; } .week-bar.is-future .week-bar-track { opacity: .45; } .week-bar.is-future .week-bar-day { color: #5F6672; }

/* ---------- HRMS links ---------- */
.hrms-group { margin-bottom: var(--space-4); }
.hrms-group > summary { cursor: pointer; list-style: none; }
.hrms-link-form select.input { min-width: 260px; max-width: 340px; }

/* ---------- People & utilisation ---------- */
.people-export { margin-left: auto; }
.people-table td { vertical-align: middle; }
.util { display: inline-flex; align-items: center; gap: 8px; min-width: 150px; }
.util-track { flex: 1; height: 8px; min-width: 80px; background: var(--border-card); border-radius: 999px; overflow: hidden; }
.util-fill { display: block; height: 100%; background: #0D9488; border-radius: 999px; }
.util-value { font-variant-numeric: tabular-nums; font-weight: 600; min-width: 44px; text-align: right; }
.people-method { margin-top: var(--space-4); max-width: 900px; }

/* ---------- Leavers' work ---------- */
.handover { margin-bottom: var(--space-4); }
.handover-summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; flex-wrap: wrap; }
.handover-summary::-webkit-details-marker { display: none; }
.handover-who { display: grid; flex: 1 1 260px; }
.handover-who .muted { font-size: var(--text-sm); }
.handover-counts { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--text-2); }
.handover-counts b { color: var(--text); font-variant-numeric: tabular-nums; }
.handover-counts .is-overdue b { color: var(--danger); }
.handover[open] .handover-summary { border-bottom: 1px solid var(--border-card); }
.handover-form { padding: var(--space-4) var(--space-5) var(--space-5); }
.handover-bulk { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); flex-wrap: wrap; }
.handover-bulk label { font-size: var(--text-label); font-weight: 600; }
.handover-bulk select.input, .handover-to { width: auto; min-width: 240px; max-width: 340px; }
.handover-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-4); }

/* Reports → Export book */
.export-card .card-body > p { margin: 0 0 8px; color: var(--text-2); }
.export-card .card-head .icon { vertical-align: -3px; margin-right: 4px; }
.export-list { margin: 0 0 16px; padding-left: 20px; line-height: 1.6; }
.export-list li { margin: 2px 0; }

/* ---- Work modes --------------------------------------------------------- */
/* Work-type colours are fixed: the brand variables are the org's own colour and
   must never carry meaning in data. */
:root {
  --wt-content: #D97706; --wt-design: #7C3AED; --wt-onpage: #2563EB; --wt-offpage: #16A34A;
  --wt-gmb: #0D9488; --wt-pages: #0891B2; --wt-report: #0F766E; --wt-admin: #64748B;
}
.wt-chip { --wt: var(--wt-admin); color: var(--wt); border-color: color-mix(in srgb, var(--wt) 35%, transparent); background: color-mix(in srgb, var(--wt) 9%, var(--surface)); font-weight: 600; }
.wt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--wt, var(--wt-admin)); margin-right: 6px; vertical-align: middle; }
.mode-switch { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 var(--space-4); padding: 8px 14px; border: 1px dashed var(--border-card); border-radius: var(--radius-card); background: var(--surface); font-size: var(--text-sm); color: var(--text-2); }
.mode-switch .icon { width: 14px; height: 14px; }
body[data-mode="seo"] .data-table td, body[data-mode="seo"] .data-table th { padding-top: 7px; padding-bottom: 7px; }
/* Today (SEO mode): the pod strip and a member's client groups */
.pod-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }
.pod-strip.is-compact { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.pod-card { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--border-card); border-radius: var(--radius-card); background: var(--surface); }
.pod-card.is-hot { border-color: var(--danger-border); }
.pod-card.is-empty { border-style: dashed; }
.pod-card-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.pod-card-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 6px; margin: 0; }
.pod-card-facts div { display: grid; gap: 1px; }
.pod-card-facts dt { font-size: var(--text-xs); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.pod-card-facts dd { margin: 0; font-size: var(--text-label); font-weight: 600; font-variant-numeric: tabular-nums; }
.pod-card-bar { display: block; }
.pod-card-flags { margin: 0; }
.pod-card-links { margin: 0; display: flex; gap: 12px; font-size: var(--text-sm); }
.client-today .task-lines { margin-bottom: var(--space-2); }
.task-today { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 8px; }
.task-today > .task-line { border: 0; }
.task-today-time { display: flex; gap: 6px; align-items: center; padding-right: 12px; }
.task-today-time .tp-log-dur { width: 64px; }
@media (max-width: 720px) { .task-today { grid-template-columns: 1fr; } .task-today-time { padding: 0 12px 8px; } }
.checklist li { display: grid; grid-template-columns: 110px 1fr; gap: 10px; align-items: center; }
.check-state { width: 110px; }
.check-state.is-done { border-color: var(--success-border); background: var(--success-soft); }
.check-state.is-pending { border-color: var(--warning-border); background: var(--warning-soft); }

/* ---- UX pass (Oct 2026) ------------------------------------------------- */
/* Sidebar sub-menu: the icon sat flush against its label. */
.sidebar .submenu-link { display: flex; align-items: center; gap: 10px; }
.sidebar .submenu-icon { flex: none; width: 16px; height: 16px; }
/* The classic-layout switch: one quiet line, not a card. */
.mode-switch { padding: 6px 12px; margin-bottom: var(--space-3); border-style: solid; background: transparent; gap: 8px; }
.mode-switch .icon { color: var(--muted); }
/* One line about team-wide logging. */
.logging-banner { display: flex; gap: 10px; align-items: flex-start; margin-bottom: var(--space-4); }
.logging-banner .icon { flex: none; margin-top: 2px; }
/* Checklist: three-way toggle instead of a text box per item. */
.checklist li { grid-template-columns: auto 1fr; }
.check-toggle { display: inline-flex; border: 1px solid var(--border-card); border-radius: 999px; overflow: hidden; background: var(--surface); }
.check-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.check-toggle label { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; font-size: var(--text-sm); font-weight: 600; color: var(--text-2); cursor: pointer; border-right: 1px solid var(--border-card); user-select: none; }
.check-toggle label:last-of-type { border-right: 0; }
.check-toggle label .icon { width: 13px; height: 13px; }
.check-toggle input:focus-visible + label { outline: 2px solid var(--info); outline-offset: -2px; }
.check-toggle input:checked + label.is-done { background: var(--success-soft); color: var(--success); }
.check-toggle input:checked + label.is-pending { background: var(--warning-soft); color: var(--warning); }
.check-toggle input:checked + label.is-na { background: var(--bg); color: var(--text); }
/* Who-does-what on the monthly cycle. */
.assign-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--space-3); }
.assign-col { border: 1px solid var(--border-card); border-radius: var(--radius-card); padding: 8px 12px 10px; margin: 0; max-height: 240px; overflow: auto; }
.assign-col legend { font-weight: 600; font-size: var(--text-label); padding: 0 4px; }
.assign-person { display: flex; align-items: center; gap: 6px; font-size: var(--text-label); padding: 2px 0; }
/* An empty state that says what to do next. */
.empty-cta .card-body { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5); flex-wrap: wrap; }
.empty-cta .card-body > div { flex: 1; min-width: 220px; }
.empty-cta .card-body p { margin: 4px 0 0; }
.empty-cta-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--info-soft); color: var(--info); }
/* Client health. */
.health-table td { vertical-align: middle; }
.flag-row { display: flex; flex-wrap: wrap; gap: 4px; }
.flag-row .chip, .health-table .chip { white-space: nowrap; }
.mini-progress { display: inline-block; width: 54px; height: 6px; border-radius: 3px; background: var(--border-card); overflow: hidden; vertical-align: middle; margin-right: 6px; }
.mini-progress > span { display: block; height: 100%; background: #16A34A; }
.trend-up { color: #15803D; }
.trend-down { color: #B91C1C; }
.chip .icon { width: 12px; height: 12px; margin-right: 3px; vertical-align: -1px; }
/* The classic switch as a plain line above the page, not a box. */
form.mode-switch { border: 0; padding: 0; margin: -6px 0 var(--space-3); background: none; min-height: 0; font-size: var(--text-sm); }
.card-actions { display: flex; align-items: center; flex-wrap: wrap; }

/* ---- Client page (Oct 2026, round 2) ------------------------------------ */
/* What we do for a client: fixed colours, never the brand red. */
.eng-chip { --eng: #64748B; color: var(--eng); border-color: color-mix(in srgb, var(--eng) 35%, transparent); background: color-mix(in srgb, var(--eng) 9%, var(--surface)); font-weight: 600; }
.client-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 4px 0 4px; }
.client-head .project-head-main h2 { margin: 0; }
.grade-badge { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: 999px; font-size: var(--text-sm); font-weight: 700; color: #334155; background: #F1F5F9; border: 1px solid #E2E8F0; }
.grade-badge.grade-a { color: #92400E; background: #FEF3C7; border-color: #FDE68A; }
.grade-badge.grade-b { color: #1E40AF; background: #DBEAFE; border-color: #BFDBFE; }
.client-aliases { margin: 0 0 6px; font-size: var(--text-sm); color: var(--muted); }
.client-facts { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: var(--text-label); }
.client-facts li { display: inline-flex; align-items: center; gap: 6px; }
.client-facts .icon { color: var(--muted); width: 15px; height: 15px; }
.client-fact-label { color: var(--muted); font-size: var(--text-sm); }
.client-grid { grid-template-columns: minmax(0, 1fr) 360px; }
.client-main, .client-side { display: grid; gap: var(--space-4); align-content: start; min-width: 0; }
.client-main > .card, .client-side > .card { margin: 0; }
.card-head .count { margin-left: 6px; }
.card-link .icon { width: 14px; height: 14px; vertical-align: -2px; }
.card-note .icon { width: 15px; height: 15px; vertical-align: -3px; color: var(--success); }

/* This month: the report first, then a bar per kind of work. */
.month-callout { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 0 var(--space-5) var(--space-4); padding: 10px 14px; border-radius: 10px; border: 1px solid var(--info-border); background: var(--info-soft); }
.month-callout > div { flex: 1 1 200px; display: grid; gap: 1px; min-width: 0; }
.month-callout small { color: var(--text-2); font-size: var(--text-sm); }
.month-callout-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface); color: var(--info); flex: none; }
.month-callout.is-late { border-color: var(--danger-border); background: var(--danger-soft); }
.month-callout.is-late .month-callout-icon, .month-callout.is-late b { color: var(--danger); }
.month-callout.is-done { border-color: var(--success-border); background: var(--success-soft); }
.month-callout.is-done .month-callout-icon { color: var(--success); }
.month-callout.is-idle { border-color: var(--border-card); background: var(--bg); }
.month-callout.is-idle .month-callout-icon { color: var(--muted); }
.wt-progress { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-4); display: grid; gap: 9px; }
.wt-progress li { display: grid; grid-template-columns: 116px minmax(0, 1fr) 72px; align-items: center; gap: 12px; font-size: var(--text-label); }
.wt-progress-name { display: inline-flex; align-items: center; font-weight: 600; }
.wt-progress-bar { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--wt) 15%, var(--surface)); overflow: hidden; }
.wt-progress-bar > span { display: block; height: 100%; background: var(--wt); border-radius: 999px; }
.wt-progress-count { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
.wt-progress-count b { color: var(--text); }
.month-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 24px; margin: 0; padding: var(--space-3) var(--space-5) var(--space-4); border-top: 1px solid var(--border-card); }
.month-facts dt, .contract-dates dt, .src-cells dt { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.month-facts dd { margin: 3px 0 0; font-size: var(--text-label); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mini-progress.is-over > span { background: #DC2626; }

/* Client work as rows, not a wide table. */
.client-projects { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-3); }
.client-projects li { display: grid; grid-template-columns: minmax(0, 1fr) auto 64px 64px 92px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border-card); font-size: var(--text-label); }
.client-projects li:first-child { border-top: 0; }
.client-projects li.is-closed { opacity: .72; }
.client-project-main { display: grid; min-width: 0; }
.client-project-main small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.client-projects .tl-status { width: auto; height: 26px; padding: 0 10px 0 22px; font-size: var(--text-sm); }
.client-project-num { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-2); white-space: nowrap; }
.client-project-num b { color: var(--text); }

/* What happened lately. */
.feed { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-3); }
.feed li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 8px 0; border-top: 1px solid var(--border-card); font-size: var(--text-label); }
.feed li:first-child { border-top: 0; }
.feed-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--bg); color: var(--muted); }
.feed-icon .icon { width: 14px; height: 14px; }
.feed-change .feed-icon { color: var(--info); background: var(--info-soft); }
.feed-main { padding-top: 4px; min-width: 0; }
.feed-main small { margin-left: 4px; }
.feed-when { font-size: var(--text-sm); white-space: nowrap; padding-top: 4px; }

/* Side cards. */
.side-list { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-3); }
.side-list > li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--border-card); font-size: var(--text-label); }
.side-list > li:first-child { border-top: 0; }
.side-list > li > div { display: grid; gap: 3px; min-width: 0; overflow-wrap: anywhere; }
.side-list small { font-size: var(--text-sm); }
.side-list-icon { color: var(--muted); padding-top: 1px; }
.side-list-icon .icon { width: 15px; height: 15px; }
.side-list-links { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: var(--text-sm); }
.side-list-links a, .side-details summary { display: inline-flex; align-items: center; gap: 4px; }
.side-list-links .icon { width: 13px; height: 13px; }
.side-details summary { cursor: pointer; color: var(--info); list-style: none; }
.side-details summary::-webkit-details-marker { display: none; }
.side-details[open] { flex-basis: 100%; }
.side-list .inline-form { margin-top: 2px; }
.side-list .btn-link .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.flag-dot, .sev-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; background: #D97706; }
.flag-dot.is-error { background: #DC2626; }
.sev-dot.is-show_stopper, .sev-dot.is-critical { background: #DC2626; }
.sev-dot.is-major { background: #D97706; }
.sev-dot.is-minor, .sev-dot.is-none { background: #94A3B8; }

/* A contract as a span of time. */
.contract-mini .card-body { display: grid; gap: 8px; }
.contract-mini-title { margin: 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contract-mini-left { margin: 0; font-size: var(--text-label); }
.contract-mini-left.is-soon b, .span-left.is-soon { color: #B45309; font-weight: 600; }
.contract-mini-scope { margin: 0; font-size: var(--text-sm); }
.span-bar { position: relative; height: 8px; border-radius: 999px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--border-card); }
.span-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: #2563EB; }
.span-bar.is-completed .span-fill { background: #16A34A; }
.span-bar.is-stopped .span-fill { background: #B45309; }
.span-bar.is-dropped .span-fill { background: #94A3B8; }
.span-mark { position: absolute; top: -3px; width: 2px; height: 14px; margin-left: -1px; background: #334155; border-radius: 1px; }
.span-today { position: absolute; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--surface); border: 2px solid #2563EB; }
.span-ends { display: flex; justify-content: space-between; gap: 8px; margin: 0; font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; }
.contract-list { display: grid; gap: var(--space-4); }
.contract-card { margin: 0; padding: var(--space-4) var(--space-5); display: grid; gap: var(--space-4); }
.contract-card.is-active { box-shadow: inset 3px 0 0 #2563EB; }
.contract-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.contract-card-head h3 { margin: 0; font-size: var(--text-md); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.contract-card-head p { margin: 3px 0 0; font-size: var(--text-sm); }
.contract-card-src { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.src-link { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--text-2); }
.src-link.is-plain { color: var(--muted); }
.src-link .icon { width: 13px; height: 13px; }
.contract-track { display: grid; gap: 6px; }
.contract-dates { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px 20px; margin: 0; }
.contract-dates dd { margin: 3px 0 0; font-size: var(--text-label); font-variant-numeric: tabular-nums; }
.date-unsure { text-decoration: underline dotted #B45309; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: help; }
.contract-notes { display: grid; gap: 6px; padding-top: var(--space-3); border-top: 1px solid var(--border-card); font-size: var(--text-label); }
.contract-notes p { margin: 0; display: flex; gap: 10px; }
.contract-notes-label { flex: none; display: inline-flex; align-items: center; gap: 4px; width: 116px; color: var(--muted); font-size: var(--text-sm); }
.contract-notes-label .icon { width: 13px; height: 13px; }

/* Source rows: labelled cells instead of column letters. */
.src-sheet { margin: 0 0 var(--space-4); }
.src-sheet > summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.src-sheet > summary::-webkit-details-marker { display: none; }
.src-sheet > summary h3::before { content: '▸'; display: inline-block; width: 14px; color: var(--muted); }
.src-sheet[open] > summary h3::before { content: '▾'; }
.src-rows { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-4); display: grid; gap: 12px; }
.src-row { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; padding-top: 12px; border-top: 1px solid var(--border-card); scroll-margin-top: 90px; }
.src-row:first-child { border-top: 0; padding-top: 0; }
.src-row:target, .src-table tr:target td { background: var(--warning-soft); }
.src-row:target { box-shadow: 0 0 0 6px var(--warning-soft); border-radius: 2px; }
.src-row-no { font-size: var(--text-sm); color: var(--muted); font-variant-numeric: tabular-nums; padding-top: 1px; }
.src-cells { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 8px 18px; margin: 0; }
.src-cells dd { margin: 2px 0 0; font-size: var(--text-label); overflow-wrap: anywhere; }
.src-cells dd .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 3px; }
.src-more summary { cursor: pointer; font-size: var(--text-sm); color: var(--muted); }
.src-more .src-cells { padding: 8px 0 4px; }
.src-table td { vertical-align: top; }

@media (max-width: 1100px) { .client-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) {
  .client-projects li { grid-template-columns: minmax(0, 1fr) auto; }
  .client-project-num { display: none; }
  .wt-progress li { grid-template-columns: 96px minmax(0, 1fr) 60px; gap: 8px; }
  .feed li { grid-template-columns: 28px minmax(0, 1fr); }
  .feed-when { grid-column: 2; padding-top: 0; }
  .src-row { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .contract-card-src { align-items: flex-start; }
  .contract-notes p { flex-direction: column; gap: 0; }
}
.card-link { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.task-group-label { margin: 0; padding: 0 var(--space-5) 4px; font-size: var(--text-sm); font-weight: 600; }
.older-work { border-top: 1px solid var(--border-card); }
.older-work > summary { display: flex; align-items: center; gap: 8px; padding: 12px var(--space-5); cursor: pointer; list-style: none; font-size: var(--text-label); color: var(--text-2); }
.older-work > summary::-webkit-details-marker { display: none; }
.older-work > summary .icon { color: #B45309; }
.older-work > summary::after { content: '▸'; margin-left: auto; color: var(--muted); }
.older-work[open] > summary::after { content: '▾'; }
.older-work .card-note { padding-top: 8px; }
.feed-main .tl-project { margin-left: 2px; }
.contract-list { margin-top: var(--space-3); }
.src-row-body { display: grid; gap: 8px; min-width: 0; }
.src-cells > div.is-wide { grid-column: span 2; }
.src-cells dd { overflow-wrap: break-word; }
.src-cells dd .muted { display: inline-flex; align-items: center; gap: 4px; }
.src-loose { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 0; font-size: var(--text-sm); color: var(--muted); }
.src-loose b { font-weight: 600; color: var(--text-2); margin-right: 2px; }
@media (max-width: 720px) { .src-cells > div.is-wide { grid-column: auto; } }
.month-nav { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.month-nav-gap { flex: 1; }
.wt-progress li.is-complete .wt-progress-count b { color: var(--success); }
.wt-progress-name a { color: inherit; }
.wt-progress-name a:hover { color: var(--info); text-decoration: underline; }
.wt-progress.is-phases li { grid-template-columns: minmax(150px, 300px) minmax(0, 1fr) 72px; }
@media (max-width: 720px) { .wt-progress.is-phases li { grid-template-columns: minmax(0, 1fr) 60px; } .wt-progress.is-phases .wt-progress-bar { grid-column: 1 / -1; grid-row: 2; } }

/* Pod cards: report, progress, then the facts (Oct 2026, round 2). */
.chip.chip-xs { height: 20px; padding: 0 7px; font-size: 11px; }
.grade-badge.is-xs { height: 20px; min-width: 20px; padding: 0 6px; justify-content: center; font-size: 11px; }
.pod-strip { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.pod-card { gap: 9px; padding: 12px 14px 10px; align-content: start; }
.pod-card.is-hot { border-color: var(--danger-border); box-shadow: inset 3px 0 0 #DC2626; }
.pod-card-head { display: grid; gap: 4px; align-items: start; }
.pod-card-name { font-weight: 700; line-height: 1.3; }
.pod-card-tags { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.pod-card-report { display: flex; align-items: center; gap: 6px; margin: 0; font-size: var(--text-label); color: var(--text-2); }
.pod-card-report .icon { width: 15px; height: 15px; flex: none; color: var(--muted); }
.pod-card-report.is-late, .pod-card-report.is-late .icon { color: var(--danger); }
.pod-card-report.is-done .icon { color: var(--success); }
.pod-card-report.is-soon .icon, .pod-card-report.is-soon b { color: #B45309; }
.pod-card-guess { color: #B45309; text-decoration: underline dotted; text-underline-offset: 3px; cursor: help; }
.pod-card-progress { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: var(--text-sm); }
.pod-card-progress.is-idle { display: flex; justify-content: space-between; }
.pod-card-progress .icon { width: 13px; height: 13px; vertical-align: -2px; margin-right: 4px; }
.pod-card-bar { display: block; height: 6px; border-radius: 999px; background: var(--border-card); overflow: hidden; }
.pod-card-bar > span { display: block; height: 100%; background: #16A34A; border-radius: 999px; }
.pod-card-count { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod-card-count b { color: var(--text); }
.pod-card-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); padding-top: 8px; border-top: 1px solid var(--border-card); }
.pod-card-facts dd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pod-card-facts dd.is-soon { color: #B45309; }
.pod-card-links { align-items: center; flex-wrap: wrap; gap: 4px 14px; }
.pod-card-links a, .pod-card-links span { display: inline-flex; align-items: center; gap: 4px; }
.pod-card-links .icon { width: 13px; height: 13px; }
.pod-card-links span.muted { margin-left: auto; font-size: var(--text-sm); }
.pod-card-empty { margin: 0; font-size: var(--text-sm); }
.pod-strip.is-compact .pod-card-facts { grid-template-columns: 1fr; }

/* Date lists (reports to send, contracts ending): the day first, big enough to scan. */
.date-list { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-3); }
.date-list > li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-card); }
.date-list > li:first-child { border-top: 0; }
.date-list-day { display: grid; justify-items: center; line-height: 1.05; padding: 4px 0; border-radius: 8px; background: var(--bg); border: 1px solid var(--border-card); }
.date-list-day b { font-size: 16px; font-variant-numeric: tabular-nums; }
.date-list-day small { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.date-list > li.is-late .date-list-day { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.date-list > li.is-late .date-list-day small, .date-list > li.is-late .date-list-when { color: var(--danger); }
.date-list > li.is-soon .date-list-day { background: var(--warning-soft); border-color: var(--warning-border); }
.date-list > li.is-soon .date-list-when { color: #B45309; }
.date-list-main { display: grid; min-width: 0; }
.date-list-main > a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.date-list-main small { color: var(--muted); font-size: var(--text-sm); }
.date-list-when { font-weight: 600; }
.date-list-flag { color: #B45309; }
.date-list .btn-sm .icon { width: 13px; height: 13px; }
.attention-also { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -6px 0 var(--space-4); font-size: var(--text-sm); color: var(--muted); }
.attention-also a { color: var(--text-2); }
.attention-also a b { color: var(--text); }
/* A row assigned only to the viewer: the picker stays, the red avatar goes quiet. */
.tl-people.is-me .avatar { background: var(--bg); color: var(--muted); border: 1px solid var(--border-card); }
.tl-people.is-me:hover .avatar { color: var(--text); }
.client-today .task-today .task-line { padding-top: 7px; padding-bottom: 7px; }
.client-today .task-today { border-top: 1px solid var(--border-card); }
.client-today .task-today:first-child { border-top: 0; }
.task-today-time input.tp-log-dur { width: 62px; min-width: 0; }

/* Report calendar. */
.cal-summary { display: grid; gap: 10px; padding: 14px var(--space-5); margin-bottom: var(--space-4); }
.cal-summary-bar { height: 8px; border-radius: 999px; background: var(--border-card); overflow: hidden; }
.cal-summary-bar > span { display: block; height: 100%; background: #16A34A; border-radius: 999px; }
.cal-summary-counts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; font-size: var(--text-label); color: var(--text-2); }
.cal-summary-counts b { color: var(--text); font-variant-numeric: tabular-nums; }
.cal-summary-counts .is-done b { color: var(--success); }
.cal-summary-counts .is-late b { color: var(--danger); }
.cal-table td { vertical-align: middle; }
.cal-table tr.is-day-first td { border-top: 2px solid var(--border-card); }
.cal-table tr.is-late td:first-child { box-shadow: inset 3px 0 0 #DC2626; }
.cal-table tr.is-soon td:first-child { box-shadow: inset 3px 0 0 #D97706; }
.cal-table tr.is-done td { color: var(--text-2); }
.cal-day { white-space: nowrap; width: 72px; }
.cal-day b { font-size: 16px; font-variant-numeric: tabular-nums; }
.cal-state .chip .icon { width: 12px; height: 12px; }
.cal-actions { white-space: nowrap; text-align: right; width: 1%; }
.cal-actions .inline-form { margin-right: 6px; }
/* KPI tiles that are links: neutral numbers; colour only when something is wrong. */
a.kpi-tile { color: var(--text); text-decoration: none; transition: border-color .15s, box-shadow .15s; }
a.kpi-tile b { color: var(--text); }
a.kpi-tile:hover { border-color: var(--border-strong, #CBD5E1); box-shadow: 0 1px 3px rgba(15, 23, 42, .08); }
a.kpi-tile:hover .kpi-tile-label { color: var(--text); }
.kpi-tile.is-bad { box-shadow: inset 3px 0 0 #DC2626; }
.kpi-tile.is-bad .muted { color: var(--danger); }
.kpi-tile.is-warn { box-shadow: inset 3px 0 0 #D97706; }
/* Client work cards in SEO mode: this month and the report, not all-time progress. */
.project-card-month { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: var(--text-sm); }
.project-card-month-label { font-weight: 700; font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.project-card-month .tp-progress-bar > span { background: #16A34A; }
.project-card-report { display: flex; align-items: center; gap: 5px; font-size: var(--text-sm); color: var(--text-2); }
.project-card-report .icon { width: 13px; height: 13px; color: var(--muted); }
.project-card-report.is-late, .project-card-report.is-late .icon { color: var(--danger); font-weight: 600; }
.project-card-report.is-done .icon { color: var(--success); }
.project-card-top .eng-chip { margin-left: auto; }
.project-card-month .tp-progress-bar { width: 100%; max-width: none; }
.tl-meta .tl-client { display: inline-flex; align-items: center; gap: 3px; color: var(--text-2); font-weight: 600; }
.tl-meta .tl-client .icon { width: 12px; height: 12px; color: var(--muted); }
.tl-meta .is-aging { color: #B45309; }
.figures-pick { align-items: flex-end; }
.figures-pick-field { display: grid; gap: 4px; font-size: var(--text-sm); font-weight: 600; color: var(--text-2); }
.figures-pick-field .input { min-width: 220px; width: auto; }

/* ---- Round 3 (Oct 2026): Today and its child pages ---------------------- */
[data-filter-item][hidden], [data-filter-group][hidden], [data-filter-empty][hidden] { display: none !important; }
/* The line under a page title, as facts with icons. */
.head-facts { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 18px; font-size: var(--text-label); color: var(--text-2); }
.head-facts li { display: inline-flex; align-items: center; gap: 6px; }
.head-facts .icon { width: 15px; height: 15px; color: var(--muted); }
.head-facts li.is-warn, .head-facts li.is-warn .icon { color: #B45309; }
/* Tiles with an icon, and a bar where a share is the point. */
.attention.has-icons .attention-item { grid-template-columns: 40px auto 1fr; align-items: center; row-gap: 2px; }
.attention-icon { grid-row: span 2; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--bg); color: var(--muted); }
.attention-icon .icon { width: 18px; height: 18px; }
.attention-item.tone-danger .attention-icon { background: var(--danger-soft); color: var(--danger); }
.attention-item.tone-warning .attention-icon { background: var(--warning-soft); color: #B45309; }
.attention.has-icons .attention-count { grid-row: span 2; }
.attention-bar { grid-column: 1 / -1; height: 5px; margin-top: 8px; border-radius: 999px; background: var(--border-card); overflow: hidden; }
.attention-bar > span { display: block; height: 100%; background: #16A34A; border-radius: 999px; }
.attention-also .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 2px; color: var(--muted); }
.card-head .overline .icon { width: 14px; height: 14px; vertical-align: -2px; margin-right: 6px; color: var(--muted); }

/* Search and filter chips over client cards. */
.client-filters { display: grid; gap: 10px; margin-bottom: var(--space-4); }
.client-filters-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.client-filters-search { flex: 1 1 280px; max-width: 420px; }
.client-filters-search .input { padding-right: 36px; }
.client-filters-kbd { position: absolute; right: 9px; top: 50%; transform: translateY(-50%); min-width: 20px; height: 20px; padding: 0 5px; display: grid; place-items: center; font: 600 11px/1 var(--font-mono, monospace); color: var(--muted); border: 1px solid var(--border-card); border-bottom-width: 2px; border-radius: 5px; background: var(--surface); }
.client-filters-search .input:focus ~ .client-filters-kbd { display: none; }
.client-filters-tools { display: inline-flex; gap: 6px; margin-left: auto; }
.client-filters-chips { margin: 0; }
button.fchip { font: inherit; font-size: var(--text-sm); cursor: pointer; background: var(--surface); display: inline-flex; align-items: center; gap: 5px; }
.fchip .icon { width: 13px; height: 13px; color: var(--muted); }
.fchip.is-danger .icon { color: var(--danger); }
.fchip.is-warning .icon { color: #B45309; }
.fchip.is-success .icon { color: var(--success); }
.fchip[aria-pressed="true"] { background: var(--brand-soft); border-color: var(--brand); color: var(--brand-text); }
.fchip[aria-pressed="true"] b, .fchip[aria-pressed="true"] .icon { color: var(--brand-text); }
.fchip:focus-visible { outline: 2px solid var(--info); outline-offset: 2px; }
.pod-jump { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 14px; font-size: var(--text-sm); }
.pod-jump a { display: inline-flex; align-items: center; gap: 5px; color: var(--text-2); }
.pod-jump a:hover { color: var(--text); }
.pod-jump .icon { width: 13px; height: 13px; color: var(--muted); }
.pod-jump-late { color: var(--danger); font-weight: 600; }

/* A pod as a fold-away section. */
.pod-section { border-top: 1px solid var(--border-card); padding: 4px 0 var(--space-3); scroll-margin-top: 80px; }
.pod-section:first-of-type { border-top: 0; }
.pod-section > summary { list-style: none; cursor: pointer; }
.pod-section > summary::-webkit-details-marker { display: none; }
.pod-section-head { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; padding: 10px 2px; border-radius: 8px; }
.pod-section-head:hover { background: var(--bg); }
.pod-section-chev { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; color: var(--muted); transition: transform .15s; }
.pod-section:not([open]) .pod-section-chev { transform: rotate(-90deg); }
.pod-section-name { display: inline-flex; align-items: center; gap: 10px; font-size: var(--text-md); }
.pod-section-lead { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-2); }
.pod-section-stats { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.pod-section-stats .chip .icon { width: 11px; height: 11px; }
.pod-section-sent { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-sm); color: var(--text-2); font-variant-numeric: tabular-nums; }
.pod-section-open { margin-left: auto; }
.pod-section > .pod-strip, .pod-section > .pod-nocycle { margin-top: 6px; }

/* Card facts with icons, and the card's actions as small buttons. */
.pod-card-facts dt { display: inline-flex; align-items: center; gap: 3px; }
.pod-card-facts dt .icon { width: 11px; height: 11px; }
.pod-card-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-top: 8px; border-top: 1px dashed var(--border-card); }
.pod-act { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 9px; border: 1px solid var(--border-card); border-radius: 7px; background: var(--surface); color: var(--text-2); font: inherit; font-size: var(--text-sm); font-weight: 600; cursor: pointer; text-decoration: none; }
.pod-act:hover { border-color: var(--border-table); color: var(--text); background: var(--bg); }
.pod-act .icon { width: 13px; height: 13px; }
.pod-act.is-primary { background: #DC2626; border-color: #DC2626; color: #fff; }
.pod-act.is-primary:hover { background: #B91C1C; border-color: #B91C1C; color: #fff; }
.pod-act.is-icon { width: 26px; padding: 0; justify-content: center; }
.pod-act-gap { flex: 1; }
.pod-card:hover { border-color: var(--border-table); box-shadow: 0 1px 4px rgba(15, 23, 42, .07); }
/* Clients with no cycle: one line per pod, not a card each. */
.pod-nocycle { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: var(--space-3); padding: 10px 14px; border: 1px dashed var(--border-card); border-radius: var(--radius-card); background: var(--bg); font-size: var(--text-sm); }
.pod-nocycle-label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.pod-nocycle-label .icon { width: 14px; height: 14px; color: var(--muted); }
.pod-nocycle-names { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; }
.client-board-empty { display: grid; justify-items: center; gap: 8px; padding: var(--space-6, 32px) var(--space-4); text-align: center; color: var(--text-2); }
.client-board-empty p { margin: 0; }
.client-board-empty .icon { color: var(--muted); }
@media (max-width: 720px) {
  .client-filters-tools { margin-left: 0; }
  .pod-section-open { margin-left: 0; }
  .attention.has-icons .attention-item { grid-template-columns: 36px auto 1fr; }
}
.card-head h3.overline:has(> .icon) { display: inline-flex; align-items: center; gap: 0; }
.pod-card-actions { flex-wrap: nowrap; }
.cal-table td.cal-day.is-repeat .cal-day-label { visibility: hidden; }
.is-filtering .cal-table td.cal-day.is-repeat .cal-day-label { visibility: visible; }
.is-filtering .cal-table tr td { border-top: 1px solid var(--border-table); }
/* KPI tiles with an icon. */
.kpi-tile.has-icon { position: relative; padding-right: 64px; }
.kpi-icon { position: absolute; right: 16px; top: 16px; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--bg); color: var(--muted); }
.kpi-icon .icon { width: 17px; height: 17px; }
.kpi-tile.is-bad .kpi-icon { background: var(--danger-soft); color: var(--danger); }
.kpi-bar { display: block; margin-top: 8px; height: 6px; }
.people-table td.num a { color: var(--text); font-weight: 600; }
.people-table td.num a:hover { color: var(--info); }
.pod-name { display: inline-flex; align-items: center; gap: 5px; }
.pod-name .icon { width: 13px; height: 13px; color: var(--muted); }
/* Renewals. */
.renew-table td { vertical-align: middle; }
.renew-when { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.renew-when .date-list-day { width: 44px; }
.renew-left { font-size: var(--text-sm); color: var(--text-2); font-weight: 600; }
.renew-table tr.is-late .date-list-day { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); }
.renew-table tr.is-late .renew-left { color: var(--danger); }
.renew-table tr.is-soon .date-list-day { background: var(--warning-soft); border-color: var(--warning-border); }
.renew-table tr.is-soon .renew-left { color: #B45309; }
.renew-tags { display: inline-flex; gap: 4px; margin-top: 3px; }
.cal-actions .pod-act { margin-left: 4px; }
/* Client master review. */
.card-head h3 .icon { width: 17px; height: 17px; vertical-align: -3px; margin-right: 8px; color: var(--muted); }
.review-actions { gap: 10px; }
.review-ticked { display: inline-flex; align-items: center; gap: 6px; margin-right: auto; font-size: var(--text-sm); color: var(--text-2); }
.review-ticked .icon { width: 15px; height: 15px; color: var(--muted); }
.review-ticked b { color: var(--text); font-variant-numeric: tabular-nums; }
.card-head h3:has(> .icon) { display: inline-flex; align-items: center; }

/* ---- Pods & workload report (SEO mode) ---------------------------------- */
.pod-highlights { margin-bottom: var(--space-4); }
.pod-highlight-list { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-4); display: grid; gap: 8px; }
.pod-highlight-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 10px; align-items: start; font-size: var(--text-label); line-height: 1.5; }
.pod-highlight-icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--bg); color: var(--muted); }
.pod-highlight-icon .icon { width: 15px; height: 15px; }
.pod-highlight-list li.is-danger .pod-highlight-icon { background: var(--danger-soft); color: var(--danger); }
.pod-highlight-list li.is-warning .pod-highlight-icon { background: var(--warning-soft); color: #B45309; }
.pod-scores { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); align-items: start; }
.pod-score { --pod: #64748B; margin: 0; padding: 0; overflow: hidden; border-top: 4px solid var(--pod); }
.pod-score-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; padding: 14px var(--space-5) 10px; }
.pod-score-head h3 { margin: 0; font-size: var(--text-md); display: flex; align-items: center; gap: 8px; }
.pod-score-head p { margin: 4px 0 0; font-size: var(--text-sm); display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pod-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--pod); flex: none; }
.pod-score-block { padding: 10px var(--space-5) 12px; border-top: 1px solid var(--border-card); display: grid; gap: 7px; }
.pod-score-block h4 { margin: 0; display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-2); }
.pod-score-block h4 .icon { width: 13px; height: 13px; color: var(--pod); }
.pod-meter { display: grid; grid-template-columns: 118px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: var(--text-sm); color: var(--text-2); }
.pod-meter b { color: var(--text); font-variant-numeric: tabular-nums; }
.pod-meter-bar { height: 7px; border-radius: 999px; background: var(--border-card); overflow: hidden; }
.pod-meter-bar > span { display: block; height: 100%; background: var(--pod); border-radius: 999px; }
.pod-meter.is-age .pod-meter-bar > span { background: #DC2626; }
.pod-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 10px; margin: 0; }
.pod-facts dt { font-size: var(--text-xs); color: var(--muted); }
.pod-facts dd { margin: 1px 0 0; font-size: var(--text-label); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pod-facts dd a { color: var(--text); font-weight: 600; }
.pod-trend { display: inline-flex; align-items: center; gap: 2px; font-size: var(--text-xs); font-weight: 700; }
.pod-trend .icon { width: 12px; height: 12px; }
.pod-trend.is-up { color: #15803D; }
.pod-trend.is-down { color: #B91C1C; }
.pod-score-flags { margin: 0; display: flex; gap: 4px; flex-wrap: wrap; }
.pod-score-line { margin: 0; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: var(--text-sm); color: var(--text-2); }
.pod-score-line .icon { width: 13px; height: 13px; color: var(--muted); }
.pod-score-line b { color: var(--text); }
.grade-bar { display: flex; height: 14px; border-radius: 4px; overflow: hidden; background: var(--border-card); }
.grade-bar > span { display: grid; place-items: center; height: 100%; font-size: 9px; font-weight: 700; color: #fff; }
.pod-chart-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-bottom: var(--space-5); }
.pod-chart-grid > .card { margin: 0; }
.pod-chart-note { padding: 8px 0 0; font-size: var(--text-sm); }
.section-title { display: flex; align-items: center; gap: 8px; margin: var(--space-5) 0 var(--space-3); font-size: var(--text-lg, 18px); }
.section-title .icon { width: 18px; height: 18px; color: var(--muted); }
.pod-detail, .pod-everyone { --pod: #64748B; margin: 0 0 var(--space-3); padding: 0; overflow: hidden; border-left: 4px solid var(--pod); }
.pod-everyone { border-left-color: var(--border-card); }
.pod-detail > summary, .pod-everyone > summary { list-style: none; cursor: pointer; }
.pod-detail > summary::-webkit-details-marker, .pod-everyone > summary::-webkit-details-marker { display: none; }
.pod-detail-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px var(--space-5); }
.pod-detail-head b { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-md); }
.pod-detail-head b .icon { width: 15px; height: 15px; color: var(--muted); }
.pod-detail-head .muted { font-size: var(--text-sm); }
.pod-detail:not([open]) .pod-section-chev, .pod-everyone:not([open]) .pod-section-chev { transform: rotate(-90deg); }
.pod-detail-body { padding: 0 var(--space-5) var(--space-4); display: grid; gap: var(--space-4); }
.pod-busiest h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--text-2); }
.pod-busiest h4 .icon { width: 14px; height: 14px; color: var(--pod); }
.pod-busiest .bars { padding: 0; }
.pod-busiest .bars li { grid-template-columns: minmax(140px, 260px) minmax(0, 1fr) 150px; }
.pod-busiest .bars-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
@media (max-width: 1000px) { .pod-chart-grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 720px) { .pod-busiest .bars li { grid-template-columns: minmax(0, 1fr) 90px; } .pod-busiest .bars-track { display: none; } }
.pod-scores { grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); }
.pod-meter { grid-template-columns: 104px minmax(0, 1fr) auto; }
.pod-chart-grid { align-items: start; }
.pod-detail td.num a, .pod-everyone td.num a { color: var(--text); font-weight: 600; }
.pod-detail td.num a:hover { color: var(--info); }
/* Narrow scorecards: the trend sits under its number; lines wrap as text. */
.pod-facts dd { white-space: normal; }
.pod-facts dd .pod-trend { display: flex; width: max-content; margin-top: 1px; }
.pod-score-head p { display: block; line-height: 1.6; }
.pod-score-head p .avatar { display: inline-grid; vertical-align: middle; margin-right: 4px; }
.pod-score-line { display: block; line-height: 1.5; }
.pod-score-line .icon { vertical-align: -2px; margin-right: 4px; }
.pod-score-line .icon { display: inline-block; }

/* ---- App launcher (topbar "waffle") ------------------------------------- */
.launcher-wrap { position: relative; }
.launcher-btn .icon { width: 18px; height: 18px; }
.launcher-panel { width: 372px; max-width: calc(100vw - 24px); padding: 12px; }
.launcher-search { position: relative; margin-bottom: 10px; }
.launcher-search .icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 15px; height: 15px; color: var(--muted); }
.launcher-search .input { padding-left: 32px; }
.launcher-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.launcher-grid li[hidden] { display: none; }
.launcher-tile { --app: #64748B; display: grid; justify-items: center; gap: 6px; padding: 12px 6px 10px; border-radius: 10px; color: var(--text); text-decoration: none; text-align: center; }
a.launcher-tile:hover, a.launcher-tile:focus-visible { background: var(--bg); }
a.launcher-tile:focus-visible { outline: 2px solid var(--info); outline-offset: -2px; }
.launcher-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--app); color: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .15); }
.launcher-icon .icon { width: 22px; height: 22px; }
.launcher-name { font-size: var(--text-sm); font-weight: 600; line-height: 1.2; }
.launcher-note { font-size: 10.5px; color: var(--muted); line-height: 1.1; }
.launcher-tile.is-current { background: var(--bg); box-shadow: inset 0 0 0 1px var(--border-card); }
.launcher-tile.is-soon, .launcher-tile.is-off, .launcher-tile.is-no_access { cursor: not-allowed; }
.launcher-tile.is-soon .launcher-icon, .launcher-tile.is-off .launcher-icon, .launcher-tile.is-no_access .launcher-icon { background: color-mix(in srgb, var(--app) 22%, #E5E7EB); color: #fff; box-shadow: none; }
.launcher-tile.is-soon .launcher-name, .launcher-tile.is-off .launcher-name, .launcher-tile.is-no_access .launcher-name { color: var(--muted); font-weight: 500; }
.launcher-empty { margin: 8px 4px; font-size: var(--text-sm); color: var(--muted); }
.launcher-foot { margin: 10px 0 0; padding-top: 10px; border-top: 1px solid var(--border-card); font-size: var(--text-sm); }
.launcher-foot a { display: inline-flex; align-items: center; gap: 4px; }
.launcher-foot .icon { width: 13px; height: 13px; }
/* The platform styles every dropdown link as a row; the launcher's are tiles. */
.launcher-panel .launcher-tile, .launcher-panel a.launcher-tile { display: grid; grid-template-columns: 1fr; justify-items: center; align-content: start; gap: 6px; padding: 12px 6px 10px; width: 100%; min-height: 0; white-space: normal; font-weight: inherit; }
.launcher-panel a.launcher-tile:hover { background: var(--bg); color: var(--text); }

/* ---- Day plans: Today's plan card, My plan, the lead's board ------------- */
.day-plan-card { border-top: 3px solid #2563EB; }
.day-plan-card.has-waiting { border-top-color: #D97706; }
.day-plan-tools { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.day-plan-facts { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: -4px var(--space-5) 8px; font-size: var(--text-sm); color: var(--text-2); }
.day-plan-facts span { display: inline-flex; align-items: center; gap: 5px; }
.day-plan-facts .icon { width: 13px; height: 13px; color: var(--muted); }
.day-plan-facts .is-warn, .day-plan-facts .is-warn .icon { color: #B45309; }
.day-plan-empty { display: flex; align-items: center; gap: 8px; }
.day-plan-empty .icon { color: var(--muted); }
.day-items { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-3); }
.day-item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 0; border-top: 1px solid var(--border-card); }
.day-item:first-child { border-top: 0; }
.day-item-check { margin: 0; }
.day-check { display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border: 2px solid var(--border-table); border-radius: 50%; background: var(--surface); color: #fff; cursor: pointer; padding: 0; }
.day-check:hover { border-color: #16A34A; }
.day-check .icon { width: 13px; height: 13px; }
.day-item.is-done .day-check { background: #16A34A; border-color: #16A34A; }
.day-item.is-done .day-item-title { text-decoration: line-through; color: var(--muted); }
.day-item.is-mandatory { box-shadow: inset 3px 0 0 #DC2626; padding-left: 6px; margin-left: -6px; }
.day-item-main { min-width: 0; }
.day-item-title { margin: 0; font-weight: 600; line-height: 1.35; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.day-flag { display: inline-flex; align-items: center; gap: 3px; height: 20px; padding: 0 7px; border-radius: 999px; background: var(--danger-soft); color: var(--danger); font-size: 11px; font-weight: 700; }
.day-flag .icon { width: 11px; height: 11px; }
.day-item-meta { margin: 3px 0 0; display: flex; flex-wrap: wrap; gap: 3px 12px; font-size: var(--text-sm); color: var(--text-2); }
.day-item-meta span { display: inline-flex; align-items: center; gap: 4px; }
.day-item-meta .icon { width: 12px; height: 12px; color: var(--muted); }
.day-carried.is-old, .day-carried.is-old .icon, .day-notdone { color: #B45309; font-weight: 600; }
.day-acked, .day-acked .icon { color: #15803D; }
.day-item-note { margin: 4px 0 0; font-size: var(--text-sm); color: var(--text-2); font-style: italic; }
.day-item-actions { display: flex; align-items: center; gap: 6px; }
.day-ack .icon { width: 13px; height: 13px; }
.day-item-menu, .plan-item-menu { position: relative; }
.day-item-menu > summary, .plan-item-menu > summary { list-style: none; cursor: pointer; display: grid; place-items: center; width: 26px; height: 26px; border: 1px solid var(--border-card); border-radius: 7px; color: var(--muted); background: var(--surface); }
.day-item-menu > summary::-webkit-details-marker, .plan-item-menu > summary::-webkit-details-marker { display: none; }
.day-item-menu > summary .icon, .plan-item-menu > summary .icon { width: 13px; height: 13px; }
.day-item-pop { position: absolute; right: 0; top: 30px; z-index: 30; min-width: 220px; display: grid; gap: 8px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border-card); border-radius: 10px; box-shadow: 0 8px 24px rgba(15, 23, 42, .14); }
.day-item-pop form { margin: 0; }
.day-item-pop label { display: grid; gap: 4px; font-size: var(--text-sm); color: var(--text-2); }
.day-item-pop .btn-link { display: inline-flex; align-items: center; gap: 5px; }
.day-item-pop .btn-link .icon, .day-item-pop label .icon { width: 13px; height: 13px; }
.btn-link.is-danger { color: var(--danger); }
.day-quick-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 var(--space-5) var(--space-3); padding: 8px 10px; border: 1px dashed var(--border-card); border-radius: 10px; }
.day-quick-add > .icon { width: 15px; height: 15px; color: var(--muted); }
.day-quick-add input[name="title"] { flex: 1 1 220px; }
.day-quick-add select { flex: 0 1 220px; max-width: 260px; }
.day-quick-add .day-time { width: 64px; }
.day-ahead { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; padding: 0 var(--space-5) var(--space-4); }
.day-ahead-day { display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--border-card); border-radius: 10px; color: var(--text); text-decoration: none; font-size: var(--text-sm); }
.day-ahead-day:hover { border-color: var(--border-table); background: var(--bg); }
.day-ahead-day small { color: var(--muted); }
.day-ahead-day span { font-size: var(--text-md); font-weight: 700; font-variant-numeric: tabular-nums; }
.day-ahead-day span i { font-style: normal; font-size: 11px; color: var(--danger); margin-left: 4px; }
.day-ahead-day.is-empty span { color: var(--muted); font-weight: 500; }
.day-plus { white-space: nowrap; }
.day-on-today .icon { width: 11px; height: 11px; }
.day-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--space-4); margin-bottom: var(--space-4); align-items: start; }
.day-card { margin: 0; }
.day-card.is-today { border-top: 3px solid #2563EB; }
.day-card.is-focus { box-shadow: 0 0 0 2px #93C5FD; }
.day-add-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; align-items: end; }
.field-inline { display: grid; gap: 4px; font-size: var(--text-sm); font-weight: 600; color: var(--text-2); }
.day-add-task, .plan-task { grid-column: span 2; }
.day-add-task .input-sm, .plan-task .input-sm { max-width: 260px; }

/* The lead's board. */
.plan-assign-form { display: grid; gap: 14px; }
.plan-pick { border: 0; margin: 0; padding: 0; }
.plan-pick legend { display: flex; align-items: center; gap: 6px; padding: 0; margin-bottom: 6px; font-size: var(--text-sm); font-weight: 700; color: var(--text-2); }
.plan-pick legend .icon { width: 14px; height: 14px; color: var(--muted); }
.plan-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-chip { position: relative; }
.plan-chip input { position: absolute; opacity: 0; pointer-events: none; }
.plan-chip > span { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 6px; border: 1px solid var(--border-card); border-radius: 999px; background: var(--surface); font-size: var(--text-sm); cursor: pointer; user-select: none; }
.plan-chip.is-day > span { padding-left: 12px; }
.plan-chip input:checked + span { background: #DBEAFE; border-color: #2563EB; color: #1E3A8A; font-weight: 600; }
.plan-chip input:focus-visible + span { outline: 2px solid var(--info); outline-offset: 2px; }
.plan-what { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px 16px; align-items: end; }
.plan-mandatory { display: flex; align-items: center; gap: 8px; font-size: var(--text-sm); grid-column: 1 / -1; padding: 8px 12px; border-radius: 8px; background: var(--danger-soft); color: #7F1D1D; }
.plan-mandatory input { width: 16px; height: 16px; accent-color: #DC2626; }
.plan-board { overflow: hidden; }
.plan-grid { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 1140px; }
.plan-grid th, .plan-grid td { border-bottom: 1px solid var(--border-card); border-right: 1px solid var(--border-card); vertical-align: top; padding: 8px; text-align: left; }
.plan-grid thead th { background: var(--bg); font-size: var(--text-sm); }
.plan-grid thead th b { display: block; }
.plan-grid thead th small { color: var(--muted); }
.plan-grid thead th.is-today, .plan-cell.is-today { background: #EFF6FF; }
.plan-person-head { width: 210px; }
.plan-person { background: var(--surface); }
.plan-person-name { display: flex; gap: 8px; align-items: flex-start; }
.plan-person-name > span:last-child { display: grid; min-width: 0; }
.plan-person-name small { color: var(--muted); font-weight: 400; font-size: var(--text-xs); }
.plan-load { display: flex; align-items: center; gap: 6px; margin: 8px 0 4px; font-size: var(--text-xs); color: var(--text-2); font-weight: 500; }
.plan-load-bar { flex: 1; height: 6px; border-radius: 999px; background: var(--border-card); overflow: hidden; max-width: 90px; }
.plan-load-bar > span { display: block; height: 100%; background: #2563EB; }
.plan-tt { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: var(--text-xs); color: var(--muted); }
.plan-tt svg { width: 12px; height: 12px; }
.plan-tt.is-on { color: var(--success); font-weight: 500; }
.plan-cell { min-height: 80px; }
.plan-items { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 5px; }
.plan-item { position: relative; display: grid; gap: 2px; padding: 6px 30px 6px 8px; border: 1px solid var(--border-card); border-radius: 8px; background: var(--surface); font-size: var(--text-sm); }
.plan-item.is-mandatory { border-left: 3px solid #DC2626; }
.plan-item.is-waiting { background: #FFFBEB; }
.plan-item.is-done { opacity: .65; }
.plan-item.is-done .plan-item-title { text-decoration: line-through; }
.plan-item-title { font-weight: 600; line-height: 1.3; overflow-wrap: anywhere; }
.plan-must .icon { width: 12px; height: 12px; color: #DC2626; vertical-align: -1px; margin-right: 3px; }
.plan-item-meta { font-size: var(--text-xs); color: var(--muted); display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: center; }
.plan-state { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; }
.plan-state .icon { width: 11px; height: 11px; }
.plan-state.is-done, .plan-state.is-acked { color: #15803D; }
.plan-state.is-waiting, .plan-state.is-carried { color: #B45309; }
.plan-state.is-late { color: var(--danger); }
.plan-item-menu { position: absolute; top: 4px; right: 4px; }
.plan-item-menu > summary { width: 22px; height: 22px; }
.plan-add { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); font-weight: 600; color: var(--muted); padding: 3px 6px; border-radius: 6px; }
.plan-add:hover { background: var(--bg); color: #2563EB; }
.plan-add .icon { width: 12px; height: 12px; }
.plan-cell.is-empty .plan-add { border: 1px dashed var(--border-card); width: 100%; justify-content: center; padding: 10px 0; }
.pod-plan-people { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-3); display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.pod-plan-people li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border-card); border-radius: 10px; }
.pod-plan-people li.is-empty { border-style: dashed; background: var(--bg); }
.pod-plan-name { display: grid; min-width: 0; }
.pod-plan-name small { color: var(--muted); font-size: var(--text-xs); }
.pod-plan-people li.is-empty .pod-plan-name small { color: #B45309; font-weight: 600; }
.pod-plan-flags { display: inline-flex; gap: 4px; }
@media (max-width: 720px) {
  .day-ahead { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .day-add-task, .plan-task { grid-column: auto; }
  .day-item { grid-template-columns: 28px minmax(0, 1fr); }
  .day-item-actions { grid-column: 2; }
}
.plan-must, .plan-must .icon { display: inline-block; }
.hub-cards { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.hub-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .hub-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hub-cards { grid-template-columns: minmax(0, 1fr); } }
.health-bar { display: flex; height: 6px; margin-top: 8px; border-radius: 999px; overflow: hidden; background: var(--border-card); }
.health-bar > span { display: block; height: 100%; }
/* Client health score. */
.health-cell { min-width: 150px; }
.health-score { display: inline-grid; place-items: center; min-width: 38px; height: 26px; padding: 0 8px; border-radius: 999px; font-weight: 800; font-variant-numeric: tabular-nums; color: #fff; }
.health-score.is-healthy { background: #16A34A; }
.health-score.is-watch { background: #D97706; }
.health-score.is-risk { background: #DC2626; }
.health-why { display: block; margin-top: 3px; color: var(--muted); font-size: var(--text-xs); line-height: 1.3; }
.band-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; }
.health-charts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .health-charts { grid-template-columns: minmax(0, 1fr); } }
/* Menu layout switch (Expanded / Icons) at the foot of the left menu; pms.js
   moves it there from partials/app-banner. */
.nav-layout { flex: none; padding: 10px 14px 12px; border-top: 1px solid rgb(255 255 255 / .07); }
.nav-layout-label { display: block; margin: 0 2px 7px; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sidebar-muted); }
.nav-layout-seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 2px; border-radius: 9px; background: rgb(255 255 255 / .06); }
.nav-layout-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 32px; padding: 0 8px; border-radius: 7px; color: var(--sidebar-text); font-size: 12.5px; font-weight: 600; white-space: nowrap; cursor: pointer; transition: background .15s ease, color .15s ease; }
.nav-layout-seg button:hover { background: rgb(255 255 255 / .08); color: #fff; }
.nav-layout-seg button[aria-pressed="true"] { background: rgba(20, 184, 166, .18); color: var(--teal-active); box-shadow: inset 0 0 0 1px rgba(20, 184, 166, .35); }
.nav-layout-seg button:focus-visible { outline: 2px solid var(--teal-active); outline-offset: 1px; }
@media (max-width: 1023px) { .nav-layout { display: none; } }
@media (min-width: 1024px) {
  /* On the rail: one centred button that opens the full menu again. */
  body.nav-railed .sidebar:not(:hover):not(:focus-within) .nav-layout,
  body.nav-railed .sidebar.is-settling .nav-layout { padding: 8px 0 10px; }
  body.nav-railed .sidebar:not(:hover):not(:focus-within) .nav-layout-label,
  body.nav-railed .sidebar:not(:hover):not(:focus-within) .nav-layout-seg [data-nav-layout="rail"],
  body.nav-railed .sidebar:not(:hover):not(:focus-within) .nav-layout-seg button > span,
  body.nav-railed .sidebar.is-settling .nav-layout-label,
  body.nav-railed .sidebar.is-settling .nav-layout-seg [data-nav-layout="rail"],
  body.nav-railed .sidebar.is-settling .nav-layout-seg button > span { display: none; }
  body.nav-railed .sidebar:not(:hover):not(:focus-within) .nav-layout-seg,
  body.nav-railed .sidebar.is-settling .nav-layout-seg { display: flex; justify-content: center; padding: 0; background: none; }
  body.nav-railed .sidebar:not(:hover):not(:focus-within) .nav-layout-seg button,
  body.nav-railed .sidebar.is-settling .nav-layout-seg button { width: 40px; padding: 0; }

  /* Just folded to icons with the pointer still on the menu (pms.js): keep
     the rail until the pointer leaves. Mirrors the platform's rail rules,
     which give way to :hover. */
  body.nav-railed .sidebar.is-settling { width: var(--sidebar-rail); box-shadow: none; }
  body.nav-railed .sidebar.is-settling .brand-link > span:not(.brand-logo),
  body.nav-railed .sidebar.is-settling .sidebar-collapse,
  body.nav-railed .sidebar.is-settling .nav-link > span:not(.nav-badge),
  body.nav-railed .sidebar.is-settling .nav-toggle > span,
  body.nav-railed .sidebar.is-settling .nav-toggle .chev,
  body.nav-railed .sidebar.is-settling .submenu,
  body.nav-railed .sidebar.is-settling .sidebar-foot > span:not(.avatar),
  body.nav-railed .sidebar.is-settling .nav-fav-hint { display: none; }
  body.nav-railed .sidebar.is-settling .nav-section-label { height: 1px; padding: 0; margin: 12px 14px; overflow: hidden; background: rgb(255 255 255 / .12); color: transparent; }
  body.nav-railed .sidebar.is-settling .nav-badge { position: absolute; top: 9px; left: 30px; width: 8px; min-width: 8px; height: 8px; margin: 0; padding: 0; font-size: 0; line-height: 0; overflow: hidden; }
}
/* "Switch organisation" in the topbar (partials/org-switch.php), as in HRMS. */
.orgswitch-wrap { position: relative; }
.orgswitch { display: inline-flex; align-items: center; gap: 8px; max-width: 220px; height: 40px; padding: 0 12px; border: 1px solid var(--border-card); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; }
.orgswitch:hover { background: var(--bg); }
.orgswitch .icon { flex: none; width: 16px; height: 16px; color: var(--muted); }
.orgswitch span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.orgswitch-panel { width: 280px; max-width: calc(100vw - 24px); padding: 6px; }
.orgswitch-panel form { margin: 0; }
.orgswitch-panel .os-heading { margin: 4px 10px 6px; font-size: 11.5px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.orgswitch-panel .os-option { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: 7px; background: none; text-align: left; cursor: pointer; }
.orgswitch-panel button.os-option:hover { background: var(--bg); }
.orgswitch-panel .os-option.is-sub { padding-left: 22px; }
.orgswitch-panel .os-option.is-current { background: #F0FDFA; cursor: default; }
.orgswitch-panel .os-name { display: flex; flex-direction: column; font-size: 13.5px; font-weight: 600; color: var(--text); }
.orgswitch-panel .os-name small { font-size: 11.5px; font-weight: 400; color: var(--muted); }
.orgswitch-panel .os-check { color: #0D9488; }
@media (max-width: 720px) {
  .orgswitch span, .orgswitch .os-chev { display: none; }
  .orgswitch { width: 40px; padding: 0; justify-content: center; }
}

/* ---------- View as (owner preview) ---------- */
.viewas-strip {
  display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap;
  margin: 0 0 var(--space-5); padding: var(--space-3) var(--space-5);
  background: var(--warning-soft); border: 1px solid var(--warning-border); border-radius: var(--radius-card);
  color: var(--warning); font-size: var(--text-label);
}
.viewas-strip > span { flex: 1; min-width: 200px; }
.viewas-strip b { color: var(--text); }
.viewas-search { display: flex; gap: var(--space-2); }
.viewas-search .input { flex: 1; max-width: 420px; }

/* Plan board: people from other teams (added from the department list) */
.plan-chip-wrap { display: inline-flex; align-items: center; }
.plan-chip-wrap.is-extra .plan-chip > span { border-style: dashed; }
.plan-chip-from { margin-left: 4px; color: var(--muted); font-size: 11px; font-weight: 500; }
.plan-chip-x { margin-left: 2px; padding: 0 6px; color: var(--muted); font-size: 16px; line-height: 1; text-decoration: none; }
.plan-chip-x:hover { color: var(--danger, #DC2626); text-decoration: none; }
.plan-others { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 14px; margin-top: 10px; }
.plan-others .field-inline { min-width: min(100%, 360px); }
.plan-others .field-inline > span { display: inline-flex; align-items: center; gap: 6px; }
.plan-others .field-inline > span .icon { width: 14px; height: 14px; color: var(--muted); }
.plan-from { color: var(--muted); }

/* Projects: Client Work / Other Approved Work */
.category-picker { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.category-picker .template-card-top b { display: inline-flex; align-items: center; gap: 6px; }
.category-picker + .field-error { padding: 0 var(--space-5) var(--space-4); margin: 0; }

/* New project: pick people one by one (2026-10-28). */
.project-people-pick { margin-top: 12px; max-width: 520px; }
.project-people-pick .input-sm { margin-bottom: 6px; }
.project-people-pick select[multiple] { min-height: 190px; }
/* My plan: time taken against time planned; the planning form when opened from a person's cell (2026-10-28). */
.day-time b, .plan-taken { font-weight: 700; color: #15803D; }
.day-time.is-over b, .plan-taken.is-over { color: #B45309; }
.plan-prefill { grid-column: 1 / -1; margin: 0 0 4px; padding: 8px 12px; border-radius: 8px; background: #DBEAFE; color: #1E3A8A; font-size: var(--text-sm); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.plan-prefill .icon { width: 14px; height: 14px; }
.plan-prefill a { margin-left: auto; }
.plan-assign.is-prefilled { outline: 2px solid #2563EB; outline-offset: 2px; }
.input.is-autofilled { box-shadow: 0 0 0 3px #BFDBFE; transition: box-shadow .6s; }

/* ----------------------------------------------------------- Teams & pods */
.tm-intro { margin: 0 0 var(--space-4); }
.tm-new { margin-bottom: var(--space-5); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.tm-new > summary, .tm-skill > summary, .tm-edit > summary, .tm-person > summary { list-style: none; cursor: pointer; }
.tm-new > summary::-webkit-details-marker, .tm-skill > summary::-webkit-details-marker,
.tm-edit > summary::-webkit-details-marker, .tm-person > summary::-webkit-details-marker { display: none; }
.tm-new-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 4px var(--space-3); }
.tm-caret { margin-left: auto; transition: transform .15s ease; flex-shrink: 0; }
.tm-new[open] .tm-caret, .tm-skill[open] > summary .tm-caret { transform: rotate(180deg); }
.tm-section { display: block; margin: var(--space-6) 0 var(--space-2); }
.tm-section > .overline { margin: 0; }
.tm-section > .hint { margin: 2px 0 var(--space-3); }
.tm-skill > summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px var(--space-3); padding: var(--space-2) 0; }
.tm-skill > summary .overline { margin: 0; }
.tm-skill > summary .tm-caret { align-self: center; }
.tm-skill[open] > summary { margin-bottom: var(--space-3); }
.tm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: var(--space-4); align-items: start; }
.tm-team { gap: var(--space-3); min-width: 0; scroll-margin-top: calc(var(--topbar-h) + 16px); }
.tm-team:target { outline: 2px solid var(--brand); outline-offset: 2px; }
.tm-team-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); }
.tm-team-title { min-width: 0; }
.tm-team-title h3 { margin: 0; font-size: var(--text-lg); overflow-wrap: anywhere; }
.tm-team-title p { margin: 2px 0 0; font-size: var(--text-sm); }
.tm-lead-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tm-order { display: flex; gap: 2px; flex-shrink: 0; }
.tm-order form { margin: 0; }
.tm-up { transform: rotate(180deg); }
.tm-desc { margin: 0; font-size: var(--text-sm); color: var(--text-2); }
.tm-people { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border-card); }
.tm-people > li { border-bottom: 1px solid var(--border-card); }
.tm-person > summary { display: flex; align-items: center; gap: var(--space-2); padding: 8px 4px; border-radius: var(--radius-sm); }
.tm-person > summary:hover { background: var(--bg); }
.tm-person > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.tm-person-text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.tm-person-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.tm-person-name b { font-weight: 600; }
.tm-person-text small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-manage { display: inline-flex; align-items: center; gap: 4px; font-size: var(--text-xs); color: var(--muted); flex-shrink: 0; }
.tm-person[open] .tm-manage { color: var(--brand-text); }
.tm-person-panel { display: grid; gap: var(--space-3); padding: var(--space-3); margin: 0 0 var(--space-2); background: var(--bg); border-radius: var(--radius-sm); }
.tm-inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin: 0; }
.tm-inline form { margin: 0; }
.tm-inline .field-inline { flex: 1 1 160px; min-width: 0; }
.tm-add { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; }
.tm-add select { flex: 2 1 180px; min-width: 0; }
.tm-add input { flex: 1 1 120px; min-width: 0; }
.tm-edit > summary { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--muted); }
.tm-edit > summary:hover, .tm-edit[open] > summary { color: var(--text); }
.tm-edit[open] > summary { margin-bottom: var(--space-3); }
.tm-team .form-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.tm-danger-zone { padding-top: var(--space-3); margin-top: var(--space-3); border-top: 1px dashed var(--border-card); }
.tm-unpodded { margin-top: var(--space-6); scroll-margin-top: calc(var(--topbar-h) + 16px); }
.tm-unpodded .card-head { flex-wrap: wrap; }
.tm-unpodded select { min-width: 170px; }
.tm-person-panel .input, .tm-danger-zone .input { font-weight: 400; }

/* Type-to-search dropdowns (pms.js "combo"), 2026-11-02: one look for the
   client, country, city and the plan's project and task lists. */
.combo { position: relative; display: block; min-width: 0; }
.combo-input.input { width: 100%; padding-right: 30px; text-overflow: ellipsis; }
.combo-caret {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px;
  border: 0; background: none; color: var(--muted); border-radius: var(--radius-sm); cursor: pointer;
}
.combo-caret:hover { color: var(--text); background: var(--bg); }
.combo.is-disabled .combo-caret { opacity: .4; pointer-events: none; }
.combo-list {
  position: absolute; z-index: 130; left: 0; right: 0; top: calc(100% + 4px); min-width: 220px;
  max-height: 320px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border-card); border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
}
.combo-opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: var(--text-label); line-height: 1.35;
}
.combo-opt-label { min-width: 0; overflow-wrap: anywhere; }
.combo-opt-meta { flex-shrink: 0; max-width: 45%; color: var(--muted); font-size: var(--text-xs); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-opt:hover, .combo-opt.is-active { background: var(--bg); }
.combo-opt.is-current { font-weight: 600; }
.combo-opt.is-current::after { content: '✓'; color: var(--brand); margin-left: auto; padding-left: 6px; }
.combo-opt.is-current .combo-opt-meta { margin-left: auto; }
.combo-opt.is-disabled { color: var(--muted); cursor: not-allowed; }
.combo-group { padding: 8px 10px 4px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .02em; text-transform: uppercase; color: var(--muted); }
.combo-note { padding: 8px 10px; font-size: var(--text-sm); color: var(--muted); }

/* Projects per page */
.per-page { display: inline-flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--muted); white-space: nowrap; }
.per-page select { width: auto; min-width: 72px; }

/* Project form: client demography */
.demography { border: 0; padding: 0; margin: 0; min-width: 0; }
.demography legend { padding: 0; margin-bottom: 6px; font-size: var(--text-label); font-weight: 600; color: var(--text); }
.demography-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.demography .field { margin: 0; }
.demography .hint { margin: 6px 0 0; }
@media (max-width: 640px) { .demography-row { grid-template-columns: minmax(0, 1fr); } }

/* Project past its due date: the pause, and the owner's two ways out. */
.due-banner {
  display: grid; gap: var(--space-3); margin: 0 0 var(--space-4); padding: var(--space-3) var(--space-4);
  border: 1px solid #FCA5A5; border-left: 4px solid var(--danger); border-radius: var(--radius-card); background: #FEF2F2;
}
.due-banner-text { display: flex; gap: var(--space-2); align-items: flex-start; }
.due-banner-text > .icon { flex-shrink: 0; margin-top: 2px; color: var(--danger); }
.due-banner-text p { margin: 0; font-size: var(--text-sm); line-height: 1.5; }
.due-banner-form { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-2); margin: 0; }
.due-banner-form .field-inline { flex: 0 1 170px; }
.due-banner-form .due-reason { flex: 1 1 260px; }
.due-banner-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.due-history ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.due-history li { font-size: var(--text-sm); }
.due-why { color: var(--text-2); }

/* Plan form, 2026-11-02: client or approved work first, then its tasks; the
   priority sits by Mandatory; add-on and priority tags on plan items. */
.plan-what-first { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1fr); }
.plan-what-first .plan-task { grid-column: auto; }
.plan-what-first .field-inline > label > span b, .plan-pick legend b { color: var(--brand-text); }
.plan-blocked { display: block; margin-top: 4px; color: var(--danger); font-size: var(--text-xs); line-height: 1.4; }
.plan-rules { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.plan-rules .plan-mandatory { grid-column: auto; flex: 1 1 320px; }
.plan-priority { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm); font-weight: 600; color: var(--text-2); }
.plan-priority select { width: auto; min-width: 230px; }
.plan-priority select:disabled { opacity: .7; }
.plan-priority-help { flex-basis: 100%; color: var(--muted); font-size: var(--text-xs); }
.plan-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; }
.plan-tag { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; letter-spacing: .01em; background: var(--bg); color: var(--text-2); border: 1px solid var(--border-card); }
.plan-tag.is-addon { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
.plan-tag.is-low { background: #F0F9FF; color: #0369A1; border-color: #BAE6FD; }
.plan-tag.is-high { background: #FFF7ED; color: #C2410C; border-color: #FED7AA; }
.plan-tag.is-must { background: var(--danger-soft); color: var(--danger); border-color: #FECACA; }
.day-item-title .plan-tag { vertical-align: middle; margin-right: 2px; }
.day-pop-note { display: flex; align-items: center; gap: 5px; margin: 0; font-size: var(--text-xs); color: #C2410C; }
.day-pop-note .icon { width: 12px; height: 12px; }
.plan-addon-list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: var(--text-sm); }
.reason-what { margin: 0; font-size: var(--text-sm); }
.removal-log td { vertical-align: top; }
.removal-why { max-width: 320px; overflow-wrap: anywhere; }
@media (max-width: 900px) { .plan-what-first { grid-template-columns: minmax(0, 1fr); } }

/* Templates: delete from the list, and the deleted ones (2026-11-02). */
.template-delete { margin-left: auto; }
.icon-btn.is-danger { color: var(--muted); }
.icon-btn.is-danger:hover { color: var(--danger); background: var(--danger-soft); }
.template-deleted { margin-top: var(--space-5); }
.template-deleted > summary { cursor: pointer; list-style: none; }
.template-deleted > summary::-webkit-details-marker { display: none; }
.template-deleted-list { list-style: none; margin: 0; padding: 0 var(--space-5) var(--space-4); display: grid; gap: 8px; }
.template-deleted-list li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 0; border-top: 1px solid var(--border-card); font-size: var(--text-sm); }

/* Template editor: Visual | Outline (text) */
.template-modes { display: grid; gap: var(--space-3); }
.template-modes-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.template-modes-label { font-size: var(--text-label); font-weight: 600; }
.template-modes .segmented button { border: 0; font-family: inherit; }
.template-modes .segmented button:not([aria-selected="true"]):not(:hover) { background: none; }
.tv { display: grid; gap: var(--space-3); }
.tv-help, .tv-note { margin: 0; font-size: var(--text-sm); }
.tv-grip-sample { display: inline-flex; vertical-align: middle; color: var(--muted); }
.tv-body { display: grid; gap: var(--space-4); }
.tv-section { display: grid; gap: var(--space-2); }
.tv-section-title { margin: 0; font-size: var(--text-sm); font-weight: 700; color: var(--text-2); text-transform: uppercase; letter-spacing: .03em; }
.tv-phases, .tv-tasks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tv-phase { border: 1px solid var(--border-card); border-radius: var(--radius-card); background: var(--surface); padding: 8px 10px 10px; display: grid; gap: 8px; }
.tv-phase-head { display: flex; align-items: center; gap: 8px; }
.tv-grip { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 26px; flex-shrink: 0; color: var(--muted); cursor: grab; border-radius: var(--radius-sm); }
.tv-grip:hover { color: var(--text); background: var(--bg); }
.tv-grip:active { cursor: grabbing; }
.tv-name { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; font: inherit; color: var(--text); }
.tv-name:hover { border-color: var(--border-card); }
.tv-name:focus { outline: none; border-color: var(--brand); background: var(--surface); box-shadow: 0 0 0 3px var(--brand-soft); }
.tv-phase-name { font-weight: 700; }
.tv-count { font-size: var(--text-xs); white-space: nowrap; }
.tv-actions { display: inline-flex; gap: 2px; flex-shrink: 0; }
.tv-btn { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--muted); cursor: pointer; }
.tv-btn:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.tv-btn.is-danger:hover:not(:disabled) { background: var(--danger-soft); color: var(--danger); }
.tv-btn:disabled { opacity: .3; cursor: default; }
.tv-tasks { padding-left: 14px; gap: 2px; }
.tv-task { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: var(--radius-sm); }
.tv-task:hover { background: var(--bg); }
.tv-task .tv-actions { opacity: 0; }
.tv-task:hover .tv-actions, .tv-task:focus-within .tv-actions { opacity: 1; }
.tv-num { width: 18px; text-align: right; font-size: var(--text-xs); flex-shrink: 0; font-variant-numeric: tabular-nums; }
.tv-empty { padding: 8px; font-size: var(--text-sm); border: 1px dashed var(--border-card); border-radius: var(--radius-sm); }
.tv-steps { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 6px 8px; margin-left: 14px; border-radius: var(--radius-sm); background: var(--bg); }
.tv-steps-label { font-size: var(--text-xs); color: var(--muted); margin-right: 2px; }
.tv-step { display: inline-flex; align-items: center; gap: 0; height: 26px; padding: 0 2px; border: 1px solid var(--border-card); border-radius: 999px; background: var(--surface); font-size: var(--text-xs); cursor: grab; }
.tv-step-name { padding: 0 4px; white-space: nowrap; }
.tv-step-move { width: 18px; height: 18px; }
.tv-add { display: flex; gap: 6px; padding-left: 14px; }
.tv-add .input { flex: 1 1 auto; min-width: 0; }
.tv-add .btn, .tv-add-phase { display: inline-flex; align-items: center; gap: 4px; }
.tv-add-phase { justify-self: start; }
.is-dragging { opacity: .45; }
.tv-phase.is-drop-before, .tv-task.is-drop-before { box-shadow: 0 -3px 0 0 var(--brand); }
.tv-phase.is-drop-after, .tv-task.is-drop-after { box-shadow: 0 3px 0 0 var(--brand); }
.tv-phase.is-drop-into { outline: 2px dashed var(--brand); outline-offset: 2px; }
.tv-step.is-drop-before { box-shadow: -3px 0 0 0 var(--brand); }
.tv-step.is-drop-after { box-shadow: 3px 0 0 0 var(--brand); }
@media (max-width: 640px) { .tv-task .tv-actions { opacity: 1; } .tv-count { display: none; } }