:root {
  --navy: #1f3a5f;
  --navy-2: #2e4a73;
  --accent: #2e86ab;
  --accent-d: #1f6f93;
  --bg: #f4f6f9;
  --card: #ffffff;
  --line: #e2e8f0;
  /* RQ-01/RQ-16: these tokens are referenced across the stylesheet but were
     never defined, so every declaration using them was invalid — the
     notification drawer resolved to a transparent background, and the
     permission matrix lost its ✓/✗ colouring and checkbox accent.
     Aliased to the canonical palette above. */
  --surface: var(--card);
  --border: var(--line);
  --primary: var(--accent);
  --blue: var(--accent);
  --ok: var(--green);
  --err: var(--red);
  --text: #1e293b;
  --muted: #64748b;
  --green: #15803d;
  --green-bg: #dcfce7;
  --amber: #b45309;
  --amber-bg: #fef3c7;
  --red: #b91c1c;
  --red-bg: #fee2e2;
  --shadow: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .06);
}

* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* ---- topbar ---- */
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  background: var(--navy); color: #fff; padding: 10px 20px;
  /* RQ-03: sticky header */
  position: sticky; top: 0; z-index: 90;
}
.brand { display: flex; align-items: center; gap: 12px; }
.logo {
  font-size: 22px; background: var(--accent); width: 38px; height: 38px;
  display: grid; place-items: center; border-radius: 9px;
}
.title { font-weight: 700; font-size: 17px; letter-spacing: .3px; }
.subtitle { font-size: 12px; opacity: .75; }
.topbar-right { display: flex; align-items: center; gap: 18px; }
.persona { font-size: 12px; opacity: .85; display: flex; flex-direction: column; gap: 3px; }
.persona select {
  background: var(--navy-2); color: #fff; border: 1px solid rgba(255,255,255,.2);
  border-radius: 6px; padding: 5px 8px; font-size: 13px;
}
.api-status { display: flex; gap: 6px; }
.pill {
  font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,.12);
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted); }
.pill.up .dot { background: #4ade80; }
.pill.down .dot { background: #f87171; }
.pill.warn .dot { background: #fbbf24; }

/* ---- tabs ---- */
/* RQ-03: sticky nav bar, sits just below sticky header */
/* The menu scrolls; the page does not.
   A flex row with no overflow rule has two ways to absorb a menu wider than
   the window, and takes both: it squashes the buttons until the labels break
   over three lines, then overhangs the page, putting a horizontal scrollbar
   on the whole app and the last tab — Settings — past the right edge. */
.tabs {
  display: flex; gap: 4px; padding: 0 20px; background: #fff;
  border-bottom: 1px solid var(--line); position: sticky; top: 58px; z-index: 89;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
  scrollbar-width: thin; scrollbar-color: var(--line) transparent;
}
.tabs::-webkit-scrollbar { height: 4px; }
.tabs::-webkit-scrollbar-track { background: transparent; }
.tabs::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }
.tab {
  border: none; background: none; padding: 13px 16px; font-size: 14px; cursor: pointer;
  color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600;
  flex: 0 0 auto;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-count { display: inline-block; font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 999px; background: var(--navy); color: #fff; margin-left: 5px; vertical-align: middle; }
.tab-count.hidden { display: none; }

main { padding: 20px; max-width: 1280px; margin: 0 auto; }
.tabpanel { display: none; }
.tabpanel.active { display: block; }

/* ---- layout ---- */
.layout { display: grid; grid-template-columns: 290px 1fr; gap: 20px; align-items: start; }
.sidebar { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); }
.sidebar h3 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }
.team-source { font-size: 11px; margin: -4px 0 10px; }
.people-list { display: flex; flex-direction: column; }

/* Bulk generate bar */
.bulk-bar { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.bulk-roles { display: flex; gap: 4px; flex: 1; }
.bulk-actions { display: flex; gap: 4px; flex-shrink: 0; }
.bulk-role { font-size: 11px; font-weight: 600; padding: 3px 8px; border-radius: 20px; border: 1.5px solid var(--line); background: transparent; cursor: pointer; color: var(--muted); transition: all .15s; }
.bulk-role.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.bulk-progress { margin-bottom: 10px; background: var(--bg); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12px; max-height: 220px; overflow-y: auto; }
.bulk-prog-title { font-weight: 600; margin-bottom: 6px; color: var(--text); }
.bulk-prog-row { display: flex; justify-content: space-between; padding: 3px 0; border-bottom: 1px solid var(--line); }
.bulk-prog-row:last-child { border: none; }
.bulk-prog-name { color: var(--text); font-weight: 500; }
.bulk-prog-status.ok { color: var(--green); }
.bulk-prog-status.err { color: var(--red); }

/* ---- drill-down tree ---- */
.tn { display: flex; flex-direction: column; }
.tn-row {
  display: flex; align-items: center; gap: 8px; padding: 8px 10px;
  cursor: pointer; border-radius: 8px; transition: background .12s;
}
.tn-row:hover { background: #eef6fb; }
.tn-row.active { background: #dbeeff; }
.tn-arrow {
  width: 18px; flex-shrink: 0; font-size: 9px; color: var(--muted);
  transition: transform .2s; user-select: none; text-align: center;
}
.tn-arrow.open { transform: rotate(90deg); }
.tn-arrow.leaf { color: #cbd5e1; cursor: default; }
.tn-body { flex: 1; min-width: 0; }
.tn-name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-meta { font-size: 11px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tn-kids { border-left: 2px solid var(--line); margin-left: 18px; }
.tn-task-badge { font-size: 10px; font-weight: 700; min-width: 18px; padding: 1px 5px; border-radius: 999px; background: var(--accent); color: #fff; text-align: center; margin-left: auto; flex-shrink: 0; }
.tn-all-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 10px; cursor: pointer; border-radius: 8px; font-weight: 600; font-size: 13px; margin-bottom: 4px; transition: background .12s; }
.tn-all-row:hover { background: #eef6fb; }
.tn-all-row.active { background: #dbeeff; }
.badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; background: var(--navy); color: #fff; }
.badge.ZSM { background: #b45309; }
.badge.RSM { background: var(--accent); }
.badge.SM { background: #7c3aed; }
.badge.BM { background: #0891b2; }
.badge.LME { background: #15803d; }

.content { min-height: 300px; }
.placeholder { padding: 60px 20px; text-align: center; color: var(--muted); background: var(--card); border: 1px dashed var(--line); border-radius: 12px; }
.hidden { display: none !important; }
.muted { color: var(--muted); font-weight: 400; }

.detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.detail-head h2 { margin: 0 0 4px; }
.detail-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ---- buttons ---- */
.btn {
  border: 1px solid var(--line); background: #fff; color: var(--text); padding: 8px 14px;
  border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600;
}
.btn:hover { background: #f8fafc; }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-d); }
.btn-delete { background: transparent; color: #c0392b; border-color: #c0392b; }
.btn-delete:hover { background: #c0392b; color: #fff; }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.status.Withdrawn { background: #888; color: #fff; }
.icon-btn { color: var(--accent-d); border-color: #cfe3ef; background: #f2f9fc; }
.icon-btn:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-gmail { color: #c5221f; border-color: #f5c6c5; background: #fff8f8; }
.btn-gmail:hover { background: #c5221f; color: #fff; border-color: #c5221f; }

/* ---- context cards ---- */
.context-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.ctx-card { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 14px; box-shadow: var(--shadow); }
.ctx-card .big { font-size: 26px; font-weight: 700; color: var(--navy); }
.ctx-card .lbl { font-size: 12px; color: var(--muted); }

/* ---- prospecting panel ---- */
.prospecting { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; box-shadow: var(--shadow); margin-bottom: 16px; }
.prospect-title { font-size: 14px; font-weight: 700; margin-bottom: 10px; }
.prospect-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.prospect { border: 1px solid var(--line); border-left: 3px solid #7c3aed; border-radius: 9px; padding: 10px 12px; }
.prospect-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.icp { font-size: 11px; font-weight: 700; background: #ede9fe; color: #6d28d9; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.prospect .contacts { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.prospect .contact { font-size: 12px; color: var(--navy-2); }

.section-title { margin: 0; font-size: 15px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 10px; }
.note { padding: 10px 14px; border-radius: 8px; background: var(--amber-bg); color: var(--amber); font-size: 13px; margin-bottom: 12px; }
.note.err { background: var(--red-bg); color: var(--red); }
.gen-info { padding: 6px 14px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); color: var(--muted); font-size: 12px; margin-bottom: 12px; }

/* ---- draft cards ---- */
.draft-list { display: flex; flex-direction: column; gap: 12px; }
.draft {
  background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: 11px; padding: 14px; box-shadow: var(--shadow);
}
.draft.High { border-left-color: var(--red); }
.draft.Low { border-left-color: var(--muted); }
.draft-top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.draft h4 { margin: 0 0 4px; font-size: 15px; }
.draft .meta { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 999px; background: #eef2f7; color: var(--navy-2); font-weight: 600; }
.tag.High { background: var(--red-bg); color: var(--red); }
.tag.Normal { background: #e0f2fe; color: var(--accent-d); }
.tag.Low { background: #f1f5f9; color: var(--muted); }
.tag.time-tag { background: #f0fdf4; color: #166534; }
.draft .instruction { margin: 4px 0; }
.draft .rationale { font-size: 12.5px; color: var(--muted); font-style: italic; border-top: 1px dashed var(--line); padding-top: 8px; margin-top: 8px; }
.draft-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* ---- capacity bar ---- */
.capacity-wrap { border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; border: 1px solid var(--line); background: var(--bg); }
.capacity-wrap.cap-ok { border-color: #bbf7d0; background: #f0fdf4; }
.capacity-wrap.cap-warn { border-color: #fed7aa; background: #fff7ed; }
.capacity-wrap.cap-over { border-color: #fecaca; background: #fef2f2; }
.capacity-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; flex-wrap: wrap; gap: 4px; }
.capacity-label { font-size: 13px; color: var(--text); }
.capacity-wrap.cap-ok .capacity-label { color: #166534; }
.capacity-wrap.cap-warn .capacity-label { color: #9a3412; }
.capacity-wrap.cap-over .capacity-label { color: #991b1b; }
.capacity-sub { font-size: 11.5px; color: var(--muted); }
/* The seven days the plan covers, one column each. The old single track
   measured a week against one day's capacity; this shows where the week is
   actually loaded and where it is still empty. */
.wk-strip { display: flex; gap: 4px; align-items: flex-end; height: 34px; }
.wk-day { position: relative; flex: 1 1 0; display: flex; flex-direction: column;
          justify-content: flex-end; align-items: center; height: 100%;
          background: #e2e8f0; border-radius: 3px; overflow: hidden; }
.wk-day-fill { width: 100%; background: #22c55e; transition: height 0.3s; }
.wk-day.cap-empty { background: repeating-linear-gradient(45deg, #e2e8f0,
                    #e2e8f0 3px, #edf2f7 3px, #edf2f7 6px); }
.wk-day.cap-over .wk-day-fill { background: #ef4444; }
.wk-day-name { position: absolute; bottom: 1px; font-size: 9px; font-weight: 700;
               color: var(--muted); letter-spacing: .02em; }
.wk-day.cap-ok .wk-day-name { color: #14532d; }
.wk-day.cap-over .wk-day-name { color: #fff; }


/* ---- review board ---- */
.review-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }

/* Person filter bar in Issued Tasks */
.review-person-bar { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.rpill { font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 20px; border: 1.5px solid var(--line); background: transparent; cursor: pointer; color: var(--muted); white-space: nowrap; }
.rpill.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.rpill-count { font-size: 10px; font-weight: 700; background: rgba(255,255,255,.25); padding: 1px 5px; border-radius: 10px; margin-left: 3px; }
.rpill:not(.active) .rpill-count { background: var(--line); color: var(--muted); }
.rpill-role-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); align-self: center; padding: 0 4px; }

/* Grouped person sections */
.review-person-group { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; }
.review-person-summary { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; cursor: pointer; font-weight: 600; font-size: 14px; user-select: none; list-style: none; }
.review-person-summary::-webkit-details-marker { display: none; }
.review-person-summary::before { content: "▶"; font-size: 10px; margin-right: 8px; color: var(--muted); transition: transform .2s; }
details[open] .review-person-summary::before { transform: rotate(90deg); }
.review-person-group .task-row { border-radius: 0; border: none; border-top: 1px solid var(--line); box-shadow: none; }

.review-list, .outbox-list { display: flex; flex-direction: column; gap: 10px; }
.my-tasks-group { border-color: var(--blue); background: #eff6ff; margin-bottom: 4px; }
.my-tasks-summary { background: #dbeafe; color: #1e40af; }
.my-tasks-summary::before { color: #3b82f6; }
.task-row, .outbox-row {
  background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 14px; box-shadow: var(--shadow);
}
.task-row .top { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.task-row h4 { margin: 0 0 3px; }
.status { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
.status.Issued { background: #e0f2fe; color: var(--accent-d); }
.status.Acknowledged { background: var(--amber-bg); color: var(--amber); }
.status.Completed { background: var(--green-bg); color: var(--green); }
.status.Blocked { background: var(--red-bg); color: var(--red); }
.task-row .sub { font-size: 12px; color: var(--muted); margin: 4px 0; }
.task-row .controls { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; align-items: center; }
.task-row select, .task-row input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 7px; font-size: 13px; }
.deliv { font-size: 11px; margin-top: 8px; display: flex; gap: 10px; flex-wrap: wrap; }
.deliv span { padding: 2px 8px; border-radius: 6px; background: #f1f5f9; }
.deliv .ok { background: var(--green-bg); color: var(--green); }
.deliv .fail { background: var(--red-bg); color: var(--red); }
.deliv .skip { background: #f1f5f9; color: var(--muted); }

.outbox-row .obtop { display: flex; justify-content: space-between; }
.outbox-row pre { background: #f8fafc; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font-size: 12px; white-space: pre-wrap; margin: 8px 0 0; max-height: 160px; overflow: auto; }

/* ---- emails tab ---- */
.email-toolbar { display: flex; align-items: center; gap: 10px; }
.gmail-status { font-size: 12px; color: var(--muted); padding: 4px 10px; border-radius: 999px; background: #f1f5f9; }
.gmail-status.on { background: var(--green-bg); color: var(--green); font-weight: 600; }
.subtabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.subtab { border: none; background: none; padding: 9px 14px; font-size: 13px; cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent; font-weight: 600; }
.subtab.active { color: var(--accent); border-bottom-color: var(--accent); }
.subpanel { display: none; }
.subpanel.active { display: block; }
.inbox-list { display: flex; flex-direction: column; gap: 10px; }
.inbox-row { background: var(--card); border: 1px solid var(--line); border-left: 4px solid var(--line); border-radius: 11px; padding: 12px 14px; box-shadow: var(--shadow); }
.inbox-row.risk-green { border-left-color: var(--green); }
.inbox-row.risk-amber { border-left-color: var(--amber); }
.inbox-row.risk-red { border-left-color: var(--red); }
.ib-top { display: flex; gap: 12px; align-items: flex-start; }
.risk { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.risk.risk-green { background: var(--green-bg); color: var(--green); }
.risk.risk-amber { background: var(--amber-bg); color: var(--amber); }
.risk.risk-red { background: var(--red-bg); color: var(--red); }
.audit-detail { margin-top: 8px; border-top: 1px dashed var(--line); padding-top: 8px; }
.audit-slot:empty { display: none; }

/* ---- modal ---- */
/* NR-02: dialogs must layer above the sticky header (.topbar 90 / .tabs 89),
   which the previous z-index of 50 sat underneath. Applies to every .modal
   dialog — task, email, edit user, branch — so this cannot regress per-dialog. */
.modal { position: fixed; inset: 0; background: rgba(15,23,42,.45); display: grid; place-items: center; padding: 24px; z-index: 1000; }
.modal-card { background: var(--card); border-radius: 14px; padding: 22px; width: min(560px, 92vw); max-height: calc(100vh - 48px); overflow: auto; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
/* Keep the dialog title in view while a long form body scrolls under it. */
.modal-card > h3 { position: sticky; top: -22px; z-index: 1; background: var(--card); margin: -22px -22px 14px; padding: 22px 22px 12px; border-radius: 14px 14px 0 0; }
#taskForm label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 11px; }
#taskForm input, #taskForm textarea, #taskForm select { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--text); }
#taskForm .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
#emailForm label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 11px; }
#emailForm input, #emailForm textarea { padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 14px; font-family: inherit; color: var(--text); }
#emailForm .check-line { flex-direction: row; align-items: center; gap: 8px; color: var(--text); cursor: pointer; }
#emailForm .check-line input { width: auto; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; }

/* RQ-01: brief highlight when a notification deep-links to a task */
.task-focused { animation: task-focus-flash 2.4s ease-out; }
@keyframes task-focus-flash {
  0%, 55% { box-shadow: 0 0 0 3px var(--accent); background: color-mix(in srgb, var(--accent) 8%, var(--card)); }
  100%    { box-shadow: 0 0 0 0 transparent; background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .task-focused { animation: none; box-shadow: 0 0 0 3px var(--accent); }
}

/* NR-02: no background scrolling behind an open dialog */
body.modal-open { overflow: hidden; }

/* ---- toast ---- */
.toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); background: var(--navy); color: #fff; padding: 12px 20px; border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); z-index: 2000; font-size: 14px; max-width: 80vw; }
.toast.err { background: var(--red); }
.toast.ok { background: var(--green); }
.toast.warn { background: #b45309; }

.spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid rgba(255,255,255,.4); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; vertical-align: -2px; margin-right: 6px; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .layout { grid-template-columns: 1fr; }
  .context-cards { grid-template-columns: repeat(2, 1fr); }
}

/* ---- login overlay ---- */
.login-overlay {
  position: fixed; inset: 0; background: var(--navy); z-index: 3000;
  display: grid; place-items: center;
}
.login-overlay.hidden { display: none; }
.login-card {
  background: #fff; border-radius: 18px; padding: 44px 40px; width: min(400px, 92vw);
  text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.4);
}
.login-logo { font-size: 34px; background: var(--accent); color: #fff; width: 60px; height: 60px; border-radius: 14px; display: grid; place-items: center; margin: 0 auto 18px; }
.login-title { margin: 0 0 4px; font-size: 26px; font-weight: 700; color: var(--navy); }
.login-sub { margin: 0 0 28px; font-size: 13px; color: var(--muted); }
.login-hint { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.login-error { background: var(--red-bg); color: var(--red); border-radius: 8px; padding: 10px 14px; margin-bottom: 18px; font-size: 13px; }
.login-error.hidden { display: none; }
.btn-google-sso {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  width: 100%; padding: 12px 20px; border-radius: 10px; font-size: 15px; font-weight: 600;
  border: 1.5px solid #dadce0; background: #fff; color: #3c4043; cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.08); transition: box-shadow .15s, background .15s;
}
.btn-google-sso:hover { background: #f8f9fa; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.btn-google-sso:disabled { opacity: .5; cursor: not-allowed; }

/* ---- auth user chip in topbar ---- */
.auth-user { font-size: 12px; color: rgba(255,255,255,.9); background: rgba(255,255,255,.12); border-radius: 999px; padding: 5px 12px; display: flex; align-items: center; gap: 7px; }
.auth-user img { width: 22px; height: 22px; border-radius: 50%; }

/* ---- settings sub-tabs ---- */
.settings-subtabs { display: flex; gap: 4px; padding: 0 0 20px; border-bottom: 2px solid var(--line); margin-bottom: 24px; flex-wrap: wrap; }
.stab { background: none; border: 1px solid var(--line); border-radius: 6px; padding: 7px 16px; font-size: 13px; font-weight: 500; color: var(--muted); cursor: pointer; transition: background .15s, color .15s; }
.stab:hover { background: var(--bg); color: var(--text); }
.stab.active { background: var(--accent); color: #fff; border-color: var(--accent); }
.stabpanel { /* visible when not .hidden */ }

/* ---- user list ---- */
.user-list-toolbar { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.user-list-toolbar input[type=search] { flex: 1; min-width: 180px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--card); color: var(--text); }
.user-list-toolbar select { padding: 7px 10px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--card); color: var(--text); }
.user-list-wrap { overflow-x: auto; }
.user-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
.user-table th { text-align: left; padding: 9px 12px; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--line); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.user-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.user-table tr:last-child td { border-bottom: none; }
.user-table tr:hover td { background: var(--bg); }
.user-row-inactive td { opacity: .6; }
.user-email { font-size: .8rem; color: var(--muted); word-break: break-all; }
.badge.viewer { background: #6d28d9; }

/* ---- permission matrix (editable) ---- */
.perm-matrix-wrap { overflow-x: auto; }
.perm-table { border-collapse: collapse; font-size: 13px; width: 100%; min-width: 560px; }
.perm-table th { padding: 9px 12px; font-weight: 600; color: var(--muted); border-bottom: 2px solid var(--line); font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; text-align: center; }
.perm-table th:first-child { text-align: left; width: 40%; }
.perm-table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: middle; }
.perm-table td:first-child { text-align: left; font-size: 13px; }
.perm-table tr:last-child td { border-bottom: none; }
.perm-table tr:hover td { background: var(--bg); }
.perm-table .y { color: var(--ok); font-weight: 700; }
.perm-table .n { color: var(--muted); }
.perm-cell { transition: background .12s; border-radius: 4px; }
.perm-cell[style*="cursor:pointer"]:hover.y { background: #d1fae5; }
.perm-cell[style*="cursor:pointer"]:hover.n { background: #f3f4f6; }

/* ---- master management ---- */
.search-input { padding: 7px 12px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; background: var(--card); color: var(--text); }
.master-del-btn { background: none; border: 1px solid var(--err); }
.master-del-btn:hover { background: #fee2e2; }

/* ---- temp access date row ---- */
.row label input[type="date"] { font-size: 13px; }

/* ---- view-only banner ---- */
.view-only-banner { background: var(--amber-bg); color: var(--amber); border: 1px solid #fde68a; border-radius: 8px; padding: 10px 16px; margin-bottom: 16px; font-size: 13px; font-weight: 600; }
.issued-to-banner { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; border-radius: 8px; padding: 9px 14px; margin-bottom: 14px; font-size: 12.5px; }
@media (prefers-color-scheme: dark) { .issued-to-banner { background: #0c2233; color: #7dd3fc; border-color: #1e4a6e; } }
.task-row.read-only { opacity: .92; }

/* ---- settings tab ---- */
.settings-head { margin-bottom: 20px; }
.settings-head h2 { margin: 0 0 4px; }
.settings-zone-wrap { margin-bottom: 16px; }
.settings-zone-label { font-size: 13px; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 10px; }
.settings-zone-label select { font-size: 13px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--text); }
.settings-card { background: var(--bg); border: 1px solid var(--line); border-radius: 10px; padding: 0; overflow: hidden; }
.te-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.te-table th { text-align: left; padding: 10px 14px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); border-bottom: 1px solid var(--line); background: var(--bg); }
.te-table td { padding: 10px 14px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.te-table tr:last-child td { border-bottom: none; }
.te-table tr:hover td { background: #f8fafc; }
.te-type { font-weight: 600; color: var(--text); white-space: nowrap; }
.te-desc { font-size: 12.5px; }
.te-col-h { width: 110px; }
.te-col-m { width: 70px; color: var(--muted); font-size: 12px; }
.te-input { width: 80px; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; text-align: right; background: var(--bg); color: var(--text); }
.te-input:focus { outline: none; border-color: var(--accent); }
.te-val { font-weight: 600; color: var(--text); }
.settings-footer { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; border-top: 1px solid var(--line); background: #f8fafc; }
.te-note { font-size: 12px; }

/* ---- mind tab ---- */
.mind-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; }
.mind-head h2 { margin: 0 0 4px; }
.mind-head-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mind-saved-at { font-size: 11.5px; }
.mind-chip { font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; background: #dcfce7; color: #15803d; }
.mind-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mind-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); display: flex; flex-direction: column; gap: 6px; }
.mind-card-label { font-size: 13.5px; font-weight: 700; color: var(--text); }
.mind-card-hint { font-size: 12px; color: var(--muted); }
.mind-ta { width: 100%; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; font-family: inherit; color: var(--text); background: var(--bg); resize: vertical; line-height: 1.5; margin-top: 4px; }
.mind-ta:focus { outline: none; border-color: var(--accent); background: #fff; }
.mind-ta::placeholder { color: #94a3b8; font-size: 12px; }

/* ---- knowledge tab ---- */
.knowledge-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.knowledge-head h2 { margin: 0 0 4px; }
.knowledge-filters { display: flex; gap: 6px; flex-wrap: wrap; }
.kf-btn { font-size: 12px; font-weight: 600; padding: 5px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; transition: all .15s; }
.kf-btn:hover { border-color: var(--accent); color: var(--accent); }
.kf-btn.active { background: var(--navy); color: #fff; border-color: var(--navy); }
.knowledge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.book-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 16px; box-shadow: var(--shadow); display: flex; gap: 14px; transition: box-shadow .15s; }
.book-card:hover { box-shadow: 0 4px 16px rgba(15,23,42,.1); }
.book-icon { font-size: 32px; flex-shrink: 0; line-height: 1; margin-top: 2px; }
.book-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.book-meta { display: flex; align-items: center; gap: 8px; }
.book-cat { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.cat-sales  { background: #dbeafe; color: #1d4ed8; }
.cat-dist   { background: #dcfce7; color: #15803d; }
.cat-lead   { background: #fef3c7; color: #b45309; }
.cat-travel { background: #fce7f3; color: #be185d; }
.book-year { font-size: 11px; color: var(--muted); }
.book-title { font-size: 14px; font-weight: 700; color: var(--text); line-height: 1.3; }
.book-author { font-size: 12px; color: var(--muted); }
.book-desc { font-size: 12.5px; color: var(--text); line-height: 1.5; flex: 1; }
.book-link { font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: none; margin-top: 6px; display: inline-block; }
.book-link:hover { text-decoration: underline; }

/* ---- 7-day calendar modal ---- */
.cal-overlay { position:fixed; inset:0; background:rgba(15,23,42,.6); z-index:300; display:flex; align-items:flex-start; justify-content:center; padding:20px; overflow-y:auto; }
.cal-card { background:var(--card); border-radius:14px; width:100%; max-width:1260px; padding:20px; box-shadow:0 24px 60px rgba(0,0,0,.35); margin:auto; }
.cal-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px; flex-wrap:wrap; gap:10px; }
.cal-head h3 { margin:0 0 3px; font-size:18px; }
.cal-nav { display:flex; align-items:center; gap:6px; }
.cal-week-label { font-size:13px; font-weight:600; min-width:120px; text-align:center; color:var(--text); }
.cal-meta-line { font-size:12.5px; }

/* grid */
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:8px; }

/* day column */
.cal-day { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--bg); display:flex; flex-direction:column; }
.cal-today { border-color:var(--accent); box-shadow:0 0 0 2px rgba(46,134,171,.18); }
.cal-weekend { background:#f8f9fb; }
.cal-day-head { padding:8px 10px 7px; background:var(--card); border-bottom:1px solid var(--line); display:flex; flex-direction:column; gap:1px; }
.cal-day-name { font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:700; }
.cal-day-date { font-size:15px; font-weight:700; color:var(--text); }
.cal-today .cal-day-date { color:var(--accent); }
.cal-today-chip { display:inline-block; font-size:9px; font-weight:700; padding:1px 7px; border-radius:999px; background:var(--accent); color:#fff; margin-top:2px; width:fit-content; }

/* task blocks */
.cal-tasks { flex:1; padding:5px; display:flex; flex-direction:column; gap:4px; }
.cal-task { border-radius:7px; padding:6px 8px; border-left:3px solid var(--accent); background:#fff; font-size:11.5px; box-shadow:0 1px 3px rgba(0,0,0,.07); overflow:hidden; display:flex; flex-direction:column; justify-content:space-between; }
.cal-task.High { border-left-color:var(--red); background:#fff8f8; }
.cal-task.Low { border-left-color:#cbd5e1; background:#f8fafc; }
.cal-task.blocked { opacity:.7; border-left-style:dashed; }
.cal-task-title { font-weight:600; line-height:1.3; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cal-task-account { font-size:10px; color:var(--accent-d); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-task-foot { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.cal-task-time { font-size:10px; color:var(--muted); font-weight:600; }
.cal-task-prio { font-size:9px; font-weight:700; padding:1px 5px; border-radius:999px; }
.cal-prio-high { background:var(--red-bg); color:var(--red); }
.cal-prio-normal { background:#e0f2fe; color:var(--accent-d); }
.cal-prio-low { background:#f1f5f9; color:var(--muted); }
.cal-empty { font-size:11px; color:#cbd5e1; text-align:center; padding:28px 0; letter-spacing:.03em; }

/* capacity footer */
.cal-foot { padding:5px 8px 7px; border-top:1px solid var(--line); background:var(--card); }
.cal-cap-track { height:5px; border-radius:3px; background:#e2e8f0; overflow:hidden; margin-bottom:3px; }
.cal-cap-fill { height:100%; border-radius:3px; background:#22c55e; transition:width .3s; }
.cal-cap-track.cap-warn .cal-cap-fill { background:#f97316; }
.cal-cap-track.cap-over .cal-cap-fill { background:#ef4444; }
.cal-cap-track.cap-empty .cal-cap-fill { background:#e2e8f0; }
.cal-cap-label { font-size:10px; font-weight:700; text-align:center; color:var(--muted); }
.cal-cap-label.cap-ok { color:#16a34a; }
.cal-cap-label.cap-warn { color:#ea580c; }
.cal-cap-label.cap-over { color:var(--red); }

/* unscheduled */
.cal-unsched { margin-top:14px; padding-top:12px; border-top:1px dashed var(--line); }
.cal-unsched-label { font-size:11.5px; font-weight:700; color:var(--muted); margin-bottom:8px; }
.cal-unsched-chips { display:flex; flex-wrap:wrap; gap:6px; }
.cal-unsched-chip { font-size:11px; padding:3px 10px; border-radius:999px; background:#eef2f7; color:var(--navy-2); font-weight:500; white-space:nowrap; max-width:220px; overflow:hidden; text-overflow:ellipsis; }
.cal-unsched-chip.High { background:var(--red-bg); color:var(--red); }

/* ---- execution guide & outcome improvements ---- */
.guide-label { display:flex; flex-direction:column; gap:4px; }
.field-hint { font-size:11px; color:var(--muted); font-weight:400; margin-left:6px; }
/* NR-03/RQ-20: mark required fields, and show validation per field so the
   entered data is never discarded to make room for an error. */
.field-req { font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
             color:var(--red); background:var(--red-bg); border-radius:3px; padding:1px 5px; margin-left:6px; }
.field-error { font-size:11.5px; color:var(--red); font-weight:500; margin-top:4px; }
[data-invalid] { border-color:var(--red) !important; outline:none; box-shadow:0 0 0 2px var(--red-bg); }

/* execution guide in task row */
.execution-guide { margin:8px 0 4px; }
.guide-toggle {
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--accent-d); background:#eef7fb; border:1px solid #cfe3ef; border-radius:6px;
  padding:4px 10px; cursor:pointer; transition:all .15s;
}
.guide-toggle:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.guide-toggle-arrow { font-size:9px; transition:transform .2s; }
.guide-toggle.open .guide-toggle-arrow { transform:rotate(90deg); }
.guide-body {
  display:none; margin-top:8px; padding:12px 14px; background:#f0f9ff;
  border:1px solid #bae6fd; border-radius:8px; font-size:12.5px; line-height:1.65;
  color:var(--navy-2); white-space:pre-wrap;
}
.guide-body.open { display:block; }

/* The meeting pack.

   Two tones, and the difference is the point. An account is an exact match on
   the client sheet and carries an owner's name — that is a claim somebody can
   act on, so it reads as solid. A brand is a name that also appears somewhere
   else and carries no owner at all, because whether it is the same company is
   what the meeting is for; it reads as a caution. Styled alike, a manager
   would walk in and say the stronger sentence. */
.pack-btn { margin-left:6px; }
.pack-body { white-space:normal; background:#fbfcff; border-color:#dde3f0; }
.pack-headline {
  font-size:13.5px; font-weight:700; color:var(--navy-2);
  border-left:3px solid #e8a33d; padding-left:10px; margin-bottom:10px;
}
.pack-stats { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
.pack-stat {
  font-size:11.5px; background:#fff; border:1px solid #dde3f0; border-radius:6px;
  padding:4px 9px; color:var(--navy-2);
}
.pack-stat b { margin-right:5px; }
.pack-section { margin-bottom:12px; }
.pack-section-head {
  font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.03em; color:var(--navy-2); margin-bottom:5px;
}
.pack-section-head.strong { color:#1e2761; }
.pack-section-head.warm { color:#a9742a; }
.pack-section-head.muted-head { color:#6b7280; }
.pack-table { width:100%; border-collapse:collapse; font-size:12px; }
.pack-table td {
  padding:5px 8px; border-bottom:1px solid #eef1f7; vertical-align:top;
}
.pack-table tr:last-child td { border-bottom:none; }
.pack-table td:last-child { text-align:right; white-space:nowrap; }
.pack-agenda { margin:0; padding-left:20px; font-size:12px; line-height:1.55; }
.pack-agenda li { margin-bottom:6px; }
.pack-gaps { margin:0; padding-left:20px; font-size:11.5px; line-height:1.5; color:#6b7280; }
.pack-gaps li { margin-bottom:5px; }
.pack-actions { display:flex; gap:8px; margin-top:10px; }

/* task instruction text */
.task-instruction { margin:4px 0; font-size:13px; line-height:1.5; }

/* outcome display (read-only) */
.outcome-display { margin-top:4px; font-size:12px; color:var(--green); font-weight:600; }

/* outcome textarea + blocker stacked */
.outcome-wrap { display:flex; flex-direction:column; gap:6px; flex:1; }
.outcome-wrap textarea {
  width:100%; resize:vertical; border:1px solid var(--line); border-radius:8px;
  padding:8px 10px; font-size:13px; font-family:inherit; line-height:1.5;
  color:var(--text); background:#fff; min-height:70px;
}
.outcome-wrap textarea:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(46,134,171,.12); }
.outcome-wrap textarea::placeholder { color:#94a3b8; }

/* controls row — adapt to new layout */
.controls { display:flex; align-items:flex-start; gap:8px; flex-wrap:wrap; }
.controls select { flex-shrink:0; height:36px; }
.controls .outcome-wrap { min-width:260px; }
.controls .btn { flex-shrink:0; align-self:flex-end; }

/* ---- Notification bell (RQ-01) ---- */
.notif-wrap { position: relative; }
.notif-btn { background: none; border: none; cursor: pointer; font-size: 1.15rem; padding: 4px 6px; border-radius: 6px; color: var(--text); position: relative; line-height: 1; }
.notif-btn:hover { background: rgba(255,255,255,.15); }
.notif-badge { position: absolute; top: -2px; right: -4px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; line-height: 1; }
/* RQ-01: wider panel, opaque background, above sticky nav */
.notif-panel { position: fixed; top: 64px; right: 16px; width: 460px; max-height: 580px; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,.22); z-index: 500; display: flex; flex-direction: column; overflow: hidden; }
.notif-panel-head { padding: 10px 14px; font-weight: 600; font-size: .88rem; border-bottom: 1px solid var(--border); color: var(--muted); letter-spacing: .03em; text-transform: uppercase; display: flex; align-items: center; justify-content: space-between; }
.notif-mark-all { font-size: .75rem; font-weight: 600; background: none; border: 1px solid var(--border); border-radius: 6px; color: var(--muted); padding: 3px 8px; cursor: pointer; text-transform: none; letter-spacing: 0; }
.notif-mark-all:hover { background: var(--bg); color: var(--text); }
.notif-list { overflow-y: auto; flex: 1; }
/* RQ-01: clickable items with task-number badge */
.notif-item { padding: 11px 14px; border-bottom: 1px solid var(--border); cursor: pointer; transition: background .12s; }
.notif-item:last-child { border-bottom: none; }
.notif-item.unread { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); border-left: 3px solid var(--accent); }
.notif-item:hover { background: var(--bg); }
.notif-item-title { font-weight: 600; font-size: .88rem; margin-bottom: 2px; display: flex; align-items: center; gap: 6px; }
.notif-task-num { font-size: .72rem; font-weight: 700; background: #eef2f7; color: var(--muted); border-radius: 4px; padding: 1px 5px; font-family: monospace; }
.notif-item-body { font-size: .82rem; color: var(--muted); line-height: 1.4; }
.notif-item-meta { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.notif-item-time { font-size: .75rem; color: var(--muted); opacity: .7; }
.notif-item-user { font-size: .75rem; color: var(--muted); opacity: .8; }
.notif-empty { padding: 24px 14px; text-align: center; color: var(--muted); font-size: .85rem; }
.notif-type-task_assigned .notif-item-title::before { content: "📋 "; }
.notif-type-task_reply .notif-item-title::before { content: "💬 "; }
.notif-type-task_blocker .notif-item-title::before { content: "⚠ "; }
.notif-type-reg_approved .notif-item-title::before { content: "✅ "; }
.notif-type-reg_rejected .notif-item-title::before { content: "❌ "; }
/* RQ-02: button loading state */
.btn[data-loading] { opacity: .65; cursor: not-allowed; pointer-events: none; }
.btn[data-loading]::after { content: " ⏳"; font-size: .85em; }

/* ---- Access requests admin panel ---- */
.access-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 24px; }
.access-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.access-card.pending { border-left: 3px solid #f59e0b; }
.access-card.approved { border-left: 3px solid #10b981; }
.access-card.rejected { border-left: 3px solid var(--muted); opacity: .5; }
.access-card.deactivated { border-left: 3px solid #ef4444; opacity: .55; }
.btn-danger { background: #ef4444; color: #fff; border-color: #ef4444; }
.btn-danger:hover { background: #dc2626; border-color: #dc2626; }
.access-info { flex: 1; min-width: 180px; }
.access-name { font-weight: 600; font-size: .95rem; }
.access-email { color: var(--muted); font-size: .82rem; }
.access-date { color: var(--muted); font-size: .78rem; margin-top: 2px; }
.access-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.access-role-sel { font-size: .82rem; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.settings-divider { border: none; border-top: 1px solid var(--border); margin: 8px 0 28px; }

/* ---- Audit Log ---- */
.audit-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 24px; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.audit-item { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: .83rem; }
.audit-item:last-child { border-bottom: none; }
.audit-icon { font-size: 1rem; flex-shrink: 0; margin-top: 1px; }
.audit-body { flex: 1; }
.audit-action { font-weight: 600; }
.audit-target { color: var(--muted); }
.audit-details { color: var(--muted); font-size: .78rem; }
.audit-time { font-size: .75rem; color: var(--muted); opacity: .7; white-space: nowrap; flex-shrink: 0; }
.audit-empty { padding: 20px; text-align: center; color: var(--muted); font-size: .85rem; }

/* ---- Exceptional access toggles ---- */
.access-perms { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; font-size: .78rem; color: var(--muted); }
.perm-toggle { display: flex; align-items: center; gap: 4px; cursor: pointer; user-select: none; }
.perm-toggle input[type=checkbox] { cursor: pointer; accent-color: var(--primary); }

/* ---- Task reply / outcome display ---- */
.task-reply-box { margin-top:6px; background:#f0fdf4; border-left:3px solid var(--green); border-radius:0 6px 6px 0; padding:7px 10px; font-size:12.5px; color:#166534; line-height:1.45; }
.task-reply-who { font-weight:700; margin-right:4px; }
.task-blocker-box { margin-top:5px; background:#fff8f8; border-left:3px solid var(--red); border-radius:0 6px 6px 0; padding:6px 10px; font-size:12px; color:var(--red); font-weight:600; }

/* ---- Reports tab (RQ-23/24) ---- */
.rpt-head { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; flex-wrap:wrap; gap:12px; }
.rpt-role-select { padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--card); color:var(--text); font-size:13px; }
/* RQ-23: filter bar */
.rpt-filters { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:16px; padding:10px 14px; background:var(--card); border:1px solid var(--line); border-radius:10px; }
.rpt-filters label { font-size:11px; font-weight:600; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; }
.rpt-filter-select, .rpt-filter-input { padding:5px 8px; border:1px solid var(--line); border-radius:7px; background:var(--surface); color:var(--text); font-size:12.5px; }
/* RQ-24: KPI tile clickable for drilldown, tooltip */
.rpt-kpi { cursor:pointer; }
.rpt-kpi:hover { box-shadow:0 4px 16px rgba(0,0,0,.12); transform:translateY(-1px); transition:all .15s; }
.rpt-kpi-tip { font-size:10px; color:var(--muted); margin-top:3px; line-height:1.3; display:none; }
.rpt-kpi:hover .rpt-kpi-tip { display:block; }
/* RQ-24: drilldown tasks panel under table */
.rpt-drilldown { margin-top:16px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:14px; }
.rpt-drilldown-head { font-weight:700; font-size:14px; margin-bottom:10px; display:flex; align-items:center; justify-content:space-between; }
.rpt-drilldown-close { background:none; border:none; cursor:pointer; font-size:16px; color:var(--muted); padding:0 4px; }
/* RQ-24: self-performance section */
.rpt-self { background:color-mix(in srgb,var(--accent) 5%,var(--card)); border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line)); border-radius:10px; padding:14px 18px; margin-bottom:20px; }
.rpt-self-head { font-weight:700; font-size:13px; color:var(--accent); margin-bottom:10px; }
.rpt-self-kpis { display:flex; gap:16px; flex-wrap:wrap; }
.rpt-self-kpi { text-align:center; }
.rpt-self-val { font-size:22px; font-weight:800; color:var(--navy); }
.rpt-self-label { font-size:10px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); }
.rpt-scope { font-size:12px; line-height:1.5; margin:0 0 10px; }
.rpt-kpis { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:12px; margin-bottom:24px; }
.rpt-kpi { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:16px 18px; box-shadow:var(--shadow); }
.rpt-kpi-val { font-size:28px; font-weight:800; color:var(--navy); line-height:1; margin-bottom:4px; }
.rpt-kpi-label { font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
.rpt-kpi-green .rpt-kpi-val { color:var(--green); }
.rpt-kpi-amber .rpt-kpi-val { color:#d97706; }
.rpt-kpi-red  .rpt-kpi-val { color:var(--red); }
.rpt-kpi-blue .rpt-kpi-val { color:var(--accent); }
.rpt-table-wrap { overflow-x:auto; }
.rpt-table { width:100%; border-collapse:collapse; font-size:13px; background:var(--card); border-radius:12px; overflow:hidden; box-shadow:var(--shadow); }
.rpt-table thead tr { background:var(--navy); color:#fff; }
.rpt-table thead th { padding:10px 14px; text-align:left; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap; }
.rpt-table tbody tr { border-bottom:1px solid var(--line); transition:background .1s; }
.rpt-table tbody tr:last-child { border-bottom:none; }
.rpt-table tbody tr:hover { background:#f8fafc; }
.rpt-table td { padding:10px 14px; vertical-align:middle; }
.rpt-name { min-width:140px; }
.rpt-person-name { font-weight:600; font-size:13px; margin-bottom:2px; }
.rpt-num { text-align:center; font-weight:700; font-size:14px; min-width:52px; }
.rpt-green { color:var(--green); }
.rpt-amber { color:#d97706; }
.rpt-red   { color:var(--red); }
.rpt-muted { color:var(--muted); }
.rpt-rate  { font-weight:800; font-size:15px; min-width:52px; text-align:center; }
.rpt-last  { font-size:12px; color:var(--muted); max-width:240px; }
.rpt-bar { display:flex; height:10px; border-radius:6px; overflow:hidden; background:var(--line); min-width:100px; }
.rpt-bar-seg { min-width:4px; }
.rpt-seg-green { background:var(--green); }
.rpt-seg-amber { background:#f59e0b; }
.rpt-seg-red   { background:var(--red); }
@media (prefers-color-scheme:dark) {
  .rpt-table tbody tr:hover { background:#1e293b; }
  .rpt-kpi-val { color:#e2e8f0; }
  .rpt-kpi-green .rpt-kpi-val { color:#4ade80; }
  .rpt-kpi-amber .rpt-kpi-val { color:#fbbf24; }
  .rpt-kpi-red   .rpt-kpi-val { color:#f87171; }
  .rpt-kpi-blue  .rpt-kpi-val { color:#60a5fa; }
}

/* ── Phase 1: Task numbers, remarks thread, status row ─────────────────── */
.task-num {
  display:inline-block;
  font-family:'SF Mono',ui-monospace,monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  background:var(--navy);
  color:#fff;
  border-radius:4px;
  padding:1px 6px;
  margin-right:6px;
  vertical-align:middle;
}

/* Who moved a task, and when. Folded away by default: the thread above it is
   what people read, and this is what they come looking for afterwards. */
.status-history { margin:6px 0 2px; font-size:11.5px; }
.status-history > summary { cursor:pointer; color:var(--muted); font-weight:600;
                            list-style:none; padding:2px 0; }
.status-history > summary::-webkit-details-marker { display:none; }
.status-history > summary::before { content:"\25B8 "; display:inline-block;
                                    transition:transform .15s; }
.status-history[open] > summary::before { transform:rotate(90deg); }
.status-move { display:flex; align-items:center; gap:6px; flex-wrap:wrap;
               padding:3px 0 3px 14px; color:var(--text); }
.sm-from { color:var(--muted); }
.sm-to { font-weight:700; }
.sm-who { color:var(--muted); }

.remarks-thread {
  margin:10px 0 8px;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.remark-entry {
  display:flex;
  flex-direction:column;
  gap:2px;
  background:var(--bg);
  border-left:3px solid var(--navy);
  border-radius:0 6px 6px 0;
  padding:6px 10px;
  font-size:12px;
}
.remark-entry.auto { border-left-color:var(--muted); opacity:.85; }
.remark-entry.legacy { border-left-color:#d97706; }
/* Inline header: who + timestamp on same line */
.remark-entry .remark-who {
  font-weight:700;
  color:var(--navy);
  font-size:11px;
}
.remark-entry .remark-ts {
  font-size:10px;
  color:var(--muted);
  float:right;
  margin-left:8px;
}
.remark-text {
  color:var(--text);
  line-height:1.45;
  white-space:pre-wrap;
  word-break:break-word;
}
.remark-add {
  margin-top:8px;
}
.remark-add textarea {
  width:100%;
  border:1px solid var(--line);
  border-radius:8px;
  padding:7px 10px;
  font-size:13px;
  font-family:inherit;
  resize:vertical;
  background:var(--card);
  color:var(--text);
  box-sizing:border-box;
}
.remark-add textarea:focus {
  outline:none;
  border-color:var(--navy);
}
.remark-add-btn {
  margin-top:6px;
}

.status-row {
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
  padding-top:10px;
  border-top:1px solid var(--line);
}
/* The withdrawal reason sits inside the status row and inherits its flex gap,
   so it only needs to behave as one unit and to disappear completely when the
   status is anything else — `display:flex` would otherwise beat `.hidden`. */
.withdraw-why {
  display:flex;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
}
.withdraw-why.hidden { display:none; }
.status-label {
  font-size:11px;
  font-weight:700;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.05em;
  white-space:nowrap;
}

/* Status badge colours */
.status.Assigned   { background:#e0f2fe; color:#0369a1; }
.status.Acknowledged { background:#ede9fe; color:#6d28d9; }
.status.In-Progress { background:#dcfce7; color:#15803d; }
.status.Blocked    { background:#fee2e2; color:#b91c1c; }
.status.Completed  { background:#d1fae5; color:#065f46; }
.status.Withdrawn  { background:#f1f5f9; color:#64748b; }

@media (prefers-color-scheme:dark) {
  .task-num { background:#93c5fd; color:#0f172a; }
  .remark-entry { background:#1e293b; border-left-color:#60a5fa; }
  .remark-who { color:#93c5fd; }
  .remark-add textarea { background:#1e293b; border-color:#334155; }
  .status.Assigned   { background:#0c4a6e; color:#bae6fd; }
  .status.Acknowledged { background:#2e1065; color:#c4b5fd; }
  .status.In-Progress { background:#052e16; color:#86efac; }
  .status.Blocked    { background:#450a0a; color:#fca5a5; }
  .status.Completed  { background:#022c22; color:#6ee7b7; }
  .status.Withdrawn  { background:#1e293b; color:#94a3b8; }
}

/* ── RQ-21: Sub-tabs (My Tasks / Assigned by Me) ───────────────────────── */
.subtab-bar {
  display:flex;
  gap:4px;
  margin-bottom:12px;
  border-bottom:2px solid var(--line);
  padding-bottom:0;
}
.subtab-bar.hidden { display:none; }
.subtab {
  background:none;
  border:none;
  padding:8px 16px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  border-radius:0;
  transition:color .15s, border-color .15s;
}
.subtab:hover { color:var(--navy); }
.subtab.active { color:var(--navy); border-bottom-color:var(--navy); }
@media (prefers-color-scheme:dark) {
  .subtab.active { color:#93c5fd; border-bottom-color:#93c5fd; }
  .subtab:hover { color:#93c5fd; }
}

/* ── Phase 2: Branch checklist (RQ-09/10) ──────────────────────────────── */
.branch-checklist {
  max-height: 180px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 12px;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.branch-zone-group { display: flex; flex-direction: column; gap: 4px; }
.branch-zone-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  padding: 2px 0;
  border-bottom: 1px solid var(--line);
  margin-bottom: 2px;
}
.branch-zone-items {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}
.branch-check-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 4px;
  white-space: nowrap;
}
.branch-check-item:hover { background: var(--line); }
.branch-check-item input[type=checkbox] { margin: 0; cursor: pointer; }
.branch-code { font-weight: 700; font-size: 12px; color: var(--navy); }
.branch-name { color: var(--muted); font-size: 11px; }

/* Add User button */
.user-list-toolbar .btn-primary { margin-right: 4px; }

@media (prefers-color-scheme: dark) {
  .branch-checklist { background: #0f172a; border-color: #334155; }
  .branch-check-item:hover { background: #1e293b; }
  .branch-code { color: #93c5fd; }
}

/* ── RQ-16: Acting As chip ─────────────────────────────────────────────── */
.acting-as-chip {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(255, 200, 0, 0.25);
  color: #fde68a;
  border: 1px solid rgba(255, 200, 0, 0.4);
  white-space: nowrap;
}

/* ── RQ-19: Ignored tasks ──────────────────────────────────────────────── */
.btn-ignore {
  color: #b45309;
  border-color: #fde68a;
  background: #fffbeb;
}
.btn-ignore:hover { background: #b45309; color: #fff; border-color: #b45309; }

.ignore-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 4px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  z-index: 100;
  min-width: 200px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ignore-menu-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 4px 8px 6px;
}
.ignore-reason-btn {
  background: none;
  border: none;
  text-align: left;
  padding: 6px 10px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px;
  color: var(--text);
}
.ignore-reason-btn:hover { background: var(--bg); }

.ignored-section {
  margin-top: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 16px;
}
.ignored-section summary {
  font-weight: 600;
  cursor: pointer;
  font-size: 13px;
  user-select: none;
}
.ignored-list { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.ignored-entry {
  background: var(--bg);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}
.ignored-reason {
  font-size: 11px;
  font-weight: 700;
  color: #b45309;
  background: #fef3c7;
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 8px;
}

@media (prefers-color-scheme: dark) {
  .ignore-menu { background: #1e293b; border-color: #334155; }
  .ignore-reason-btn:hover { background: #0f172a; }
  .ignored-entry { background: #1e293b; }
  .btn-ignore { background: #1c1400; border-color: #78350f; color: #fbbf24; }
}

/* RQ-20: Resend button (task already emailed via Gmail) */
.btn-resend { color: #6b21a8; border-color: #e9d5ff; background: #faf5ff; font-size: 11px; }
.btn-resend:hover { background: #7c3aed; color: #fff; border-color: #7c3aed; }
@media (prefers-color-scheme: dark) {
  .btn-resend { background: #1a0a2e; border-color: #581c87; color: #c4b5fd; }
  .btn-resend:hover { background: #7c3aed; border-color: #7c3aed; color: #fff; }
}

/* ── Phase 4 additions ─────────────────────────────────────────────────── */

/* RQ-03: scroll-padding so anchored content clears sticky header+tabs */
html { scroll-padding-top: 120px; }

/* RQ-25: human-readable manager name in user table */
.user-manager-name { font-size:12px; color:var(--muted); }

/* RQ-26: audit log search toolbar */
.audit-toolbar { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.audit-search { flex:1; min-width:180px; padding:6px 10px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font-size:13px; }
.audit-filter-sel { padding:6px 8px; border:1px solid var(--line); border-radius:8px; background:var(--surface); color:var(--text); font-size:12.5px; }

/* Dark-mode additions for Phase 4 */
@media (prefers-color-scheme: dark) {
  .tabs { background: var(--card); }
  .notif-task-num { background: #1e293b; color: #94a3b8; }
  .rpt-table tbody tr:hover { background:#1e293b; }
  .rpt-filters { background: var(--card); }
  .rpt-self { background: color-mix(in srgb, #3b82f6 8%, var(--card)); border-color: color-mix(in srgb, #3b82f6 25%, var(--line)); }
  .rpt-self-val { color: #e2e8f0; }
  .rpt-drilldown { background: var(--card); }
}
:root[data-theme="light"] .tabs { background: #fff; }
:root[data-theme="dark"] .tabs { background: var(--card); }

/* ============================================================
   Visit Reports Tab
   ============================================================ */
.visit-form {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 1.5rem;
  margin: 1rem 1.5rem 1.5rem;
}
.visit-form h3 {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  font-weight: 600;
}
.vr-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.vr-field {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.vr-field.full {
  grid-column: 1 / -1;
}
.vr-field label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: .02em;
  text-transform: uppercase;
}
.vr-field .req { color: #ef4444; }
.vr-input {
  padding: .5rem .65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: .9rem;
  width: 100%;
  box-sizing: border-box;
}
.vr-input:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.vr-textarea {
  padding: .55rem .65rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: .9rem;
  width: 100%;
  box-sizing: border-box;
  resize: vertical;
  font-family: inherit;
}
.vr-textarea:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.vr-tags-wrap { position: relative; }
.vr-tag-input { margin-bottom: .4rem; }
.vr-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; }
.vr-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg));
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent);
  border-radius: 999px;
  padding: .2rem .6rem;
  font-size: .8rem;
}
.vr-tag button { background: none; border: none; cursor: pointer; color: inherit; font-size: .85rem; padding: 0; line-height: 1; }

/* Action items table */
.vr-action-row {
  display: grid;
  grid-template-columns: 1fr .7fr .7fr auto;
  gap: .5rem;
  margin-bottom: .5rem;
  align-items: center;
}
.vr-action-row input { padding: .4rem .55rem; border: 1px solid var(--line); border-radius: 5px; background: var(--bg); color: var(--text); font-size: .85rem; width: 100%; box-sizing: border-box; }
.vr-remove-btn { background: none; border: none; cursor: pointer; color: #ef4444; font-size: 1.1rem; padding: .2rem .4rem; border-radius: 4px; }
.vr-remove-btn:hover { background: color-mix(in srgb, #ef4444 12%, transparent); }

/* Star rating */
.vr-stars { display: flex; gap: .2rem; margin-bottom: .3rem; }
.star-btn {
  background: none; border: none; cursor: pointer;
  font-size: 1.5rem; color: var(--line); padding: 0;
  transition: color .15s;
}
.star-btn.active { color: #f59e0b; }
.vr-rating-label { font-size: .85rem; color: var(--muted); }

.vr-actions { display: flex; align-items: center; gap: 1rem; margin-top: 1.25rem; }

/* Report cards in the list */
.visit-list { padding: 0 1.5rem 2rem; }
.vr-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 1.1rem;
  overflow: hidden;
}
.vr-card-header {
  display: flex; align-items: center; gap: .75rem;
  padding: .85rem 1.1rem;
  background: color-mix(in srgb, var(--accent) 6%, var(--card));
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  user-select: none;
}
.vr-card-header:hover { background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.vr-card-title { font-weight: 600; font-size: .95rem; flex: 1; }
.vr-card-meta { font-size: .8rem; color: var(--muted); }
.vr-status {
  font-size: .7rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase;
  padding: .15rem .45rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--line); color: var(--muted);
}
.vr-status-submitted { border-color: #64748b; color: #64748b; background: color-mix(in srgb, #64748b 12%, transparent); }
.vr-status-under-review { border-color: #f59e0b; color: #b45309; background: color-mix(in srgb, #f59e0b 15%, transparent); }
.vr-status-actioned { border-color: #3b82f6; color: #1d4ed8; background: color-mix(in srgb, #3b82f6 14%, transparent); }
.vr-status-closed { border-color: #22c55e; color: #15803d; background: color-mix(in srgb, #22c55e 14%, transparent); }
.vr-followup { font-size: .75rem; color: var(--muted); white-space: nowrap; }
.vr-followup.overdue { color: #b91c1c; font-weight: 600; }
.vr-summary {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 1rem 1.1rem; margin-bottom: 1rem;
}
.vr-summary-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .85rem; }
.vr-kpi-of { font-size: .8rem; font-weight: 400; color: var(--muted); }
.vr-uncovered {
  margin-top: .85rem; padding: .55rem .7rem; border-radius: 8px; font-size: .82rem;
  background: color-mix(in srgb, #f59e0b 12%, transparent);
  border: 1px solid color-mix(in srgb, #f59e0b 35%, transparent);
}
.vr-filters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem;
  margin-bottom: 1rem;
}
.vr-filters label {
  display: flex; flex-direction: column; gap: .25rem;
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  color: var(--muted); font-weight: 600;
}
.vr-filters .vr-input { min-width: 8.5rem; }
.vr-filter-grow { flex: 1 1 12rem; }
.vr-filter-grow .vr-input { width: 100%; }
.vr-filters .vr-filter-check {
  flex-direction: row; align-items: center; gap: .4rem;
  text-transform: none; letter-spacing: 0; padding-bottom: .5rem;
}
.vr-filters .btn { margin-bottom: .1rem; }
.vr-pager {
  display: flex; align-items: center; justify-content: center; gap: .9rem;
  margin: 1rem 0 .5rem; font-size: .85rem;
}
.vr-pager .btn[disabled] { opacity: .45; cursor: default; }

@media (prefers-color-scheme: dark) {
  .vr-status-under-review { color: #fbbf24; }
  .vr-status-actioned { color: #93c5fd; }
  .vr-status-closed { color: #86efac; }
  .vr-status-submitted { color: #94a3b8; }
  .vr-followup.overdue { color: #fca5a5; }
}
.vr-rating-badge {
  display: inline-flex; align-items: center; gap: .2rem;
  font-size: .8rem; color: #f59e0b; font-weight: 600;
}
.vr-card-body { padding: 1.1rem; display: none; }
.vr-card-body.open { display: block; }
.vr-section { margin-bottom: 1rem; }
.vr-section-label {
  font-size: .72rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--muted); margin-bottom: .35rem;
}
.vr-section-value { font-size: .9rem; white-space: pre-wrap; }
.vr-pills { display: flex; flex-wrap: wrap; gap: .35rem; }
.vr-pill {
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: .2rem .65rem;
  font-size: .8rem;
}
.vr-action-table { width: 100%; border-collapse: collapse; font-size: .85rem; }
.vr-action-table th { text-align: left; font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); padding: .3rem .5rem; }
.vr-action-table td { padding: .35rem .5rem; border-top: 1px solid var(--line); }
.vr-stat-row { display: flex; gap: 1.5rem; flex-wrap: wrap; }
.vr-stat { display: flex; flex-direction: column; gap: .15rem; }
.vr-stat-n { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.vr-stat-l { font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }

/* RQ-22 — attachments on remarks, tasks and visit reports */
.attach-strip { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.attach-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12px; max-width: 100%;
}
.attach-name {
  background: none; border: 0; padding: 0; cursor: pointer; color: var(--blue);
  font: inherit; max-width: 22ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.attach-name:hover { text-decoration: underline; }
.attach-size { color: var(--muted); font-size: 11px; }
.attach-del {
  background: none; border: 0; cursor: pointer; color: var(--muted);
  font-size: 15px; line-height: 1; padding: 0 5px; border-radius: 999px;
}
.attach-del:hover { color: var(--err); background: rgba(0, 0, 0, .05); }
.attach-del:disabled { opacity: .5; cursor: default; }
.attach-block { margin-top: 8px; }
.attach-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.attach-pick {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  font-size: 12px; color: var(--muted); border: 1px dashed var(--border);
  border-radius: 6px; padding: 4px 10px;
}
.attach-pick:hover { color: var(--blue); border-color: var(--blue); }
.attach-pick input[type="file"] { display: none; }
.attach-chosen { font-size: 12px; color: var(--muted); }
.remark-add-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.remark-add-actions .btn { margin-left: auto; }

/* RQ-14 — move a departed person's tasks to a live owner */
.move-preview { margin: 10px 0 4px; }
.move-preview-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.move-preview-table th {
  text-align: left; font-weight: 600; color: var(--muted);
  padding: 5px 10px 5px 0; white-space: nowrap; vertical-align: top;
}
.move-preview-table td { padding: 5px 0; }
.move-preview-table tr + tr { border-top: 1px solid var(--border); }
.checkline { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 10px 0; }
.checkline input { margin: 0; }

/* RQ-14 — duplicate accounts */
.dupes-panel {
  border: 1px solid var(--border); border-radius: 6px;
  padding: 12px 14px; margin: 10px 0 14px; background: var(--surface);
}
.dupes-head {
  font-size: 12px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); margin-bottom: 10px;
}
.dupe-group + .dupe-group { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.dupe-name { font-weight: 600; margin-bottom: 4px; }

/* Branch performance rollup, above the per-person table. Collapsible because a
   large deployment has forty-odd branches and the person table is what most
   people came for. */
.rpt-branches { margin-bottom:18px; }
.rpt-branches > summary {
  cursor:pointer; font-weight:700; font-size:12px; letter-spacing:.04em;
  text-transform:uppercase; color:var(--muted); padding:6px 2px; user-select:none;
}
.rpt-branches > summary:hover { color:var(--navy); }
.rpt-branches > table { margin-top:8px; }

/* Extra-access toggles in the Edit User modal. Same shape as the branch
   checklist above it, so the two read as one kind of control. */
.perm-checklist {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 4px 10px;
  max-height: 150px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--bg-soft, transparent);
}
.perm-checklist label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 400;
  margin: 0;
  cursor: pointer;
}
.perm-checklist .perm-held {
  opacity: .55;
  cursor: default;
}


/* The CCO viewing the console as one other person. Read-only, short-lived and
   impossible to be in by accident: the bar sits above the tabs, across the
   full width, and does not scroll away with the content. */
.view-as-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 18px;
  background: #fff4e5; border-bottom: 1px solid #f0b775;
  color: #7a4a06; font-size: 13px; font-weight: 600;
  position: sticky; top: 0; z-index: 40;
}
.view-as-bar .btn { margin-left: auto; }

/* Calendar reschedule editor */
.cal-editor { display:flex; align-items:flex-end; gap:12px; flex-wrap:wrap;
  margin-top:10px; padding:10px 12px; border:1px solid var(--line);
  border-radius:9px; background:#f8fafc; }
.cal-editor-title { font-weight:600; font-size:13px; flex:1 1 220px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cal-editor-field { display:flex; flex-direction:column; gap:3px;
  font-size:11px; color:var(--muted); font-weight:600; }
.cal-editor-field input { font-size:13px; padding:5px 7px;
  border:1px solid var(--line); border-radius:6px; }
.cal-editor-actions { display:flex; gap:6px; }
.cal-editor-err { flex-basis:100%; color:var(--red); font-size:12px; }
.cal-editor-err:empty { display:none; }
.cal-task-move { display:flex; gap:3px; }
.cal-task-move button { border:1px solid var(--line); background:#fff;
  border-radius:5px; font-size:10px; line-height:1; padding:2px 5px;
  cursor:pointer; color:var(--muted); }
.cal-task-move button:hover:not(:disabled) { color:var(--accent-d);
  border-color:var(--accent); }
.cal-task-move button:disabled { opacity:.35; cursor:default; }
.cal-task.cal-task-editing { outline:2px solid var(--accent); }

/* Analysis coverage — how much of the committed analysis the drafts act on */
.coverage { border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:9px; padding:10px 12px; margin-bottom:12px; background:var(--card);
  font-size:12.5px; }
.coverage.cov-thin { border-left-color:var(--red); }
.coverage-head { font-weight:600; }
.coverage-sub { color:var(--muted); margin-top:2px; }
.coverage details { margin-top:7px; }
.coverage summary { cursor:pointer; color:var(--accent-d); font-weight:600; }
.coverage ul { margin:6px 0 0; padding-left:18px; max-height:190px;
  overflow-y:auto; }
.coverage li { margin-bottom:2px; line-height:1.45; }
.coverage .cov-branch { font-weight:700; }
.coverage .cov-sev { color:var(--muted); }

/* Permission matrix — staged edits (§5.3) */
.perm-bar { display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; margin:0 0 10px; padding:9px 12px;
  border:1px solid var(--accent); border-radius:9px; background:#f2f8fd; }
.perm-count { font-weight:600; font-size:13px; color:var(--accent-d); }
.perm-bar-actions { display:flex; gap:8px; }
.perm-group-head td { background:var(--bg); font-weight:700; font-size:.78rem;
  text-transform:uppercase; letter-spacing:.04em; color:var(--muted);
  padding:9px 12px !important; }
/* A staged cell has to be legible against both the ✓ and the — states, so it
   is marked by outline and weight rather than by colour alone. */
.perm-cell.perm-staged { outline:2px solid var(--accent); outline-offset:-2px;
  font-weight:700; }
.perm-cell.perm-staged::after { content:"•"; color:var(--accent-d);
  font-size:10px; vertical-align:super; margin-left:2px; }

/* Role Master — Phase 1 (M-03) */
.phase-chip { font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--accent-d); background:#eaf4fb;
  border:1px solid var(--accent); border-radius:999px; padding:2px 8px;
  vertical-align:middle; margin-left:6px; }
.role-inactive td { opacity:.55; }
.role-order { display:flex; gap:3px; }
.role-order button { border:1px solid var(--line); background:#fff; border-radius:5px;
  font-size:11px; line-height:1; padding:3px 6px; cursor:pointer; color:var(--muted); }
.role-order button:hover:not(:disabled) { color:var(--accent-d); border-color:var(--accent); }
.role-order button:disabled { opacity:.3; cursor:default; }

/* Department Master (M-02) */
.dept-structure-tabs { display:flex; gap:6px; margin:10px 0 4px; }
.dept-structure-tabs button { border:1px solid var(--line); background:#fff;
  border-radius:6px; padding:6px 14px; font-size:13px; cursor:pointer;
  color:var(--muted); font-weight:600; }
.dept-structure-tabs button.active { color:var(--accent-d);
  border-color:var(--accent); background:#eaf4fb; }
.dept-tree { border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.dept-row { display:flex; align-items:center; gap:8px; padding:8px 10px;
  border-bottom:1px solid var(--line); font-size:13px; }
.dept-row:last-child { border-bottom:none; }
.dept-row.dept-l1 { background:#fbfcfd; font-weight:600; }
.dept-row.dept-l2 { padding-left:34px; }
.dept-row.dept-l3 { padding-left:58px; }
.dept-row.dept-off .dept-name { opacity:.55; }
.dept-twisty { border:none; background:none; cursor:pointer; color:var(--muted);
  font-size:11px; width:16px; padding:0; line-height:1; }
.dept-twisty[disabled] { visibility:hidden; }
.dept-name { flex:1; }
.dept-meta { color:var(--muted); font-size:11px; white-space:nowrap; }
.dept-actions { display:flex; gap:4px; white-space:nowrap; }

/* Task to Anyone (P-05) */
.dir-card { border:1px solid var(--line); border-radius:8px; padding:8px 10px;
  margin-bottom:6px; cursor:pointer; }
.dir-card:hover { border-color:var(--accent); }
.dir-card.dir-chosen { border-color:var(--accent); background:#eaf4fb; }
.dir-name { font-weight:600; font-size:13px; }
.dir-meta { color:var(--muted); font-size:11px; }

/* U-01 five-step user form */
.ustepper { display:flex; gap:4px; list-style:none; padding:0; margin:0 0 14px;
  flex-wrap:wrap; }
.ustepper li { font-size:11px; font-weight:600; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:3px 10px; }
.ustepper li.ustep-now { color:var(--accent-d); border-color:var(--accent);
  background:#eaf4fb; }
.ustepper li.ustep-done { color:var(--accent-d); }
.urev { border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  font-size:12px; }
.urev div { padding:2px 0; }
.urev b { color:var(--muted); font-weight:600; display:inline-block; min-width:150px; }

/* Business Tours (P-09) */
.tour-card { border:1px solid var(--line); border-radius:8px; padding:10px 12px;
  margin-bottom:8px; }
.tour-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.tour-title { font-weight:600; }
.tour-meta { color:var(--muted); font-size:11px; }
.tour-life { display:flex; gap:4px; flex-wrap:wrap; margin-top:8px; }
.tour-row { display:flex; gap:6px; align-items:center; margin-bottom:6px; }
.tour-row input, .tour-row select { flex:1; min-width:0; }
.tour-row .btn { flex:none; }
.ap-linked { color:var(--accent-d); font-size:11px; white-space:nowrap; }
/* The "what is late" panel. It sits above the filters because it is a call to
   action, not a slice of the data. */
.tour-rem-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:10px 0 6px; }

/* §9.4's calendar. Seven columns whatever the width, because a month that
   reflows to four columns stops being a month. */
.tour-cal-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:12px 0 6px; }
.tour-cal-key { display:flex; align-items:center; gap:4px; font-size:11px;
  color:var(--muted); }
.tour-cal-key i { width:10px; height:10px; border-radius:2px; display:inline-block;
  border:1px solid var(--line); margin-left:6px; }
.tour-cal-key i.tour { background:var(--amber-bg); border-color:var(--amber); }
.tour-cal-key i.base { background:var(--green-bg); border-color:var(--green); }
.tour-cal-key i.weekend { background:var(--bg); }
.tour-cal { display:grid; grid-template-columns:repeat(7, minmax(0, 1fr));
  gap:3px; }
.tour-cal-dow { font-size:11px; color:var(--muted); text-align:center;
  padding-bottom:2px; }
.tour-cal-cell { border:1px solid var(--line); border-radius:4px; padding:4px;
  min-height:46px; display:flex; flex-direction:column; gap:2px;
  background:var(--card); overflow:hidden; }
.tour-cal-cell.empty { border:none; background:none; }
.tour-cal-cell.base { background:var(--green-bg); border-color:var(--green); }
.tour-cal-cell.tour { background:var(--amber-bg); border-color:var(--amber); }
.tour-cal-cell.weekend { background:var(--bg); color:var(--muted); }
.tour-cal-num { font-size:11px; font-weight:600; }
.tour-cal-loc { font-size:10px; line-height:1.2; word-break:break-word; }

/* §9.7's drill. The team table is a picker, so its rows have to look
   clickable and the open one has to stay obvious while you read below it. */
.tour-team-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  margin:10px 0 6px; }
.tour-team-row { cursor:pointer; }
.tour-team-row:hover { background:var(--bg); }
.tour-team-row.is-open { background:var(--green-bg); }
.tour-detail { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.tour-sec { margin-bottom:8px; }
.tour-sec-head { font-size:11px; font-weight:600; color:var(--muted);
  text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }

/* The pre-visit brief. Severity reads from the stripe as well as the words,
   because this is scanned before a trip rather than read. */
.tour-brief { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.brief-row { display:flex; gap:10px; padding:7px 0; align-items:flex-start;
  border-bottom:1px solid var(--line); }
.brief-row:last-child { border-bottom:0; }
.brief-tag { flex:none; font-size:10px; font-weight:700; text-transform:uppercase;
  letter-spacing:.06em; padding:2px 7px; border-radius:2px; margin-top:2px;
  min-width:62px; text-align:center; }
.brief-row.blocked .brief-tag { background:var(--red-bg); color:var(--red); }
.brief-row.attention .brief-tag { background:var(--amber-bg); color:var(--amber); }
.brief-row.info .brief-tag { background:var(--bg); color:var(--muted); }
.brief-title { font-weight:600; font-size:13px; }
.brief-detail { font-size:12px; color:var(--muted); line-height:1.4; }

/* The named accounts under a brief row. A list rather than a paragraph because
   every line is a separate thing to do — the reader is picking four of them to
   act on, not reading prose. Monospaced figures keep the amounts in a column
   so two accounts can be compared down the page rather than word by word. */
.brief-lines { margin:5px 0 3px; padding-left:16px; list-style:disc; }
.brief-lines li { font-size:12px; color:var(--text); line-height:1.5;
  margin-bottom:2px; font-variant-numeric:tabular-nums; }

/* The visit agenda. Read before it is issued, so the instruction is shown in
   full rather than clipped — a confirm that hides what it is confirming is
   only a second click. The day is the left rail because the one question
   asked of a week's plan is when each thing happens. */
.tour-agenda { margin-top:8px; border-top:1px dashed var(--line); padding-top:8px; }
.agenda-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  margin-bottom:6px; }
.agenda-row { display:flex; gap:10px; padding:7px 0; align-items:flex-start; }
/* Separated on the top edge rather than the bottom: the foot sits after the
   last row, so a :last-of-type rule matches the foot's element type and never
   the row it was written for. */
.agenda-row + .agenda-row { border-top:1px solid var(--line); }
.agenda-day { flex:none; min-width:82px; font-size:11px; font-weight:600;
  color:var(--muted); font-variant-numeric:tabular-nums; margin-top:2px; }
.agenda-row.high .agenda-day { color:var(--red); }
.agenda-title { font-weight:600; font-size:13px; }
.agenda-instruction { font-size:12px; color:var(--text); line-height:1.45; }
.agenda-outcome { font-size:12px; color:var(--muted); line-height:1.4; }
.agenda-foot { display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }

/* Knowledge — the role documents and processes.

   Coverage leads, because a role with no document is the one whose people get
   generic work, and that has to be visible before anything else on the page. */
.kn-head { display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; flex-wrap:wrap; margin-bottom:16px; }
.kn-head p { max-width:62ch; }
.kn-coverage { border:1px solid var(--line); border-radius:6px; padding:14px 16px;
  margin-bottom:18px; background:var(--card); }
.kn-cov-head { display:flex; gap:10px; align-items:baseline; flex-wrap:wrap;
  margin-bottom:10px; }
.kn-cov-grid { display:flex; gap:8px; flex-wrap:wrap; }
.kn-cov { display:flex; flex-direction:column; gap:2px; padding:7px 11px;
  border-radius:4px; border:1px solid var(--line); min-width:112px; }
.kn-cov.ok { border-color:var(--green); background:var(--green-bg); }
.kn-cov.gap { border-color:var(--red); background:var(--red-bg); }
/* Covered on some lines and not others — neither green nor red is true. */
.kn-cov.part { border-color:var(--amber); background:var(--amber-bg); }
.kn-cov-line { font-size:10px; color:var(--amber); }
.kn-cov-role { font-size:12px; font-weight:600; }
.kn-cov-n { font-size:11px; color:var(--muted); font-variant-numeric:tabular-nums; }

.kn-list { display:flex; flex-direction:column; gap:10px; }
.kn-doc { border:1px solid var(--line); border-radius:6px; padding:13px 15px;
  background:var(--card); display:grid;
  grid-template-columns:1fr auto; gap:10px 14px; align-items:start; }
.kn-doc-title { font-weight:600; font-size:14px; }
.kn-doc-meta { display:flex; gap:6px; flex-wrap:wrap; align-items:center;
  margin-top:5px; font-size:11px; }
.kn-tag { font-size:10px; text-transform:uppercase; letter-spacing:.05em;
  padding:2px 7px; border-radius:2px; border:1px solid var(--line);
  color:var(--muted); }
.kn-tag.role_jd { border-color:var(--accent); color:var(--accent); }
.kn-tag.role { background:var(--bg); }
.kn-doc-actions { display:flex; gap:6px; }
.kn-doc-body { grid-column:1 / -1; white-space:pre-wrap; font-size:12.5px;
  line-height:1.5; max-height:460px; overflow-y:auto; border-top:1px solid var(--line);
  padding-top:11px; margin-top:3px; }

.kn-editor { border:1px solid var(--accent); border-radius:6px; padding:16px;
  margin-top:18px; background:var(--card); }
.kn-editor-head { display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.kn-editor-actions { display:flex; gap:8px; }
.kn-fields { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px; margin-bottom:14px; }
.kn-f { display:flex; flex-direction:column; gap:5px; font-size:12px; }
.kn-f > span { font-weight:600; color:var(--muted); }
.kn-f-wide { grid-column:1 / -1; }
.kn-f input, .kn-f select { padding:7px 9px; border:1px solid var(--line);
  border-radius:4px; font:inherit; background:var(--card); color:var(--text); }
.kn-chips { display:flex; gap:6px; flex-wrap:wrap; }
.kn-chip { font-size:11px; padding:4px 10px; border-radius:3px; cursor:pointer;
  border:1px solid var(--line); background:transparent; color:var(--muted); }
.kn-chip.on { border-color:var(--accent); background:var(--accent); color:#fff; }
.kn-body { width:100%; padding:11px; border:1px solid var(--line); border-radius:4px;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12.5px;
  line-height:1.5; background:var(--card); color:var(--text); resize:vertical; }
@media (max-width:620px){ .kn-doc { grid-template-columns:1fr; } }

/* Branch meeting room.

   The link is styled as a link and nothing else on the card is, because it is
   the one thing on a minute somebody is meant to click. meet_links refuses
   anything that is not meet.google.com before it is stored, so what renders
   here has already been checked — the styling is not the guard. */
.mm-room { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }
.mm-room-link {
  font-size:12.5px; font-weight:600; color:var(--accent-d);
  background:#eef7fb; border:1px solid #cfe3ef; border-radius:6px;
  padding:5px 10px; text-decoration:none; word-break:break-all;
}
.mm-room-link:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.mm-invite-result { margin-top:6px; font-size:11.5px; }
.mm-invite-ok { color:#2c5f2d; font-weight:700; margin-right:6px; }
.mm-standing {
  display:flex; align-items:center; gap:6px; margin-top:6px;
  font-size:11.5px; color:#6b7280; font-weight:500;
}
.mm-standing input { margin:0; }

/* The one delivery state with a consequence for the assignee, said in words
   rather than left in a tooltip. */
.deliv-warn {
  margin-top: 6px; font-size: 12px; line-height: 1.45;
  color: #92400e; background: #fffbeb; border: 1px solid #fde68a;
  border-radius: 8px; padding: 6px 9px;
}
@media (prefers-color-scheme: dark) {
  .deliv-warn { color: #fcd34d; background: #2a2011; border-color: #5b451a; }
}
:root[data-theme="dark"] .deliv-warn {
  color: #fcd34d; background: #2a2011; border-color: #5b451a;
}

/* Functional Hierarchy Configuration (§3.5) and the branch-scoped functional
   mapping on step 4 of the user form (§2.2.1). Both are repeatable rows, so
   they share the row furniture. */
.fh-levels, #fhMapRows { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.fh-row { display: flex; align-items: flex-start; gap: 6px; }
.fh-row input[type=text], .fh-row select { flex: 1; min-width: 0; }
.fh-row-ord { width: 26px; text-align: center; color: var(--muted); font-size: 12px; padding-top: 9px; }
.fh-row-btn { background: none; border: 1px solid var(--border); border-radius: 6px;
  color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1; padding: 8px 9px; }
.fh-row-btn:hover:not(:disabled) { color: var(--text); border-color: var(--muted); }
.fh-row-btn:disabled { opacity: .35; cursor: default; }
.fh-row-btn.danger:hover { color: var(--red); border-color: var(--red); }
/* The mapping row stacks: a manager select above the branches it covers. */
.fh-map-row { border: 1px solid var(--border); border-radius: 8px; padding: 10px; }
.fh-map-row-top { display: flex; align-items: center; gap: 6px; }
.fh-map-row-top select { flex: 1; min-width: 0; }
.fh-map-branches { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 8px; }
.fh-map-branches label { display: flex; align-items: center; gap: 5px; font-size: 12px; margin: 0; }
.fh-map-empty { color: var(--amber); font-size: 11.5px; font-weight: 500; margin-top: 6px; }
.fh-map-head { margin-bottom: 14px; }
.fh-levels-cell { color: var(--muted); font-size: 12px; }

/* A day below the per-day target: present, but not yet carrying what the day
   should carry. Distinct from empty (nothing at all) and from over (past the
   eight-hour day, where something has to move). */
.wk-day.cap-warn .wk-day-fill { background: #f97316; }
.wk-day.cap-warn .wk-day-name { color: #7c2d12; }
.dt-row { border-top: 1px solid var(--border); margin-top: 14px; padding-top: 14px; }
.dt-controls { display: flex; align-items: center; gap: 10px; margin-top: 8px; }
.dt-controls input { width: 90px; }

/* --- the assistant ------------------------------------------------------- *
 * A launcher and a slide-over, not a tab: the tab strip already overhangs the
 * page at 1024 wide and the tab that goes over the edge is the last one added.
 * Fixed to the viewport so a question can be asked from whichever screen the
 * reader is on, and kept clear of the toast, which shares that corner. */
.ask-launcher {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:60;
  border:1px solid var(--line);
  border-radius:999px;
  background:var(--panel, #fff);
  color:inherit;
  padding:10px 16px;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.ask-launcher:hover { filter:brightness(1.05); }
.ask-panel {
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:61;
  width:min(420px, calc(100vw - 36px));
  max-height:min(70vh, 620px);
  display:flex;
  flex-direction:column;
  background:var(--panel, #fff);
  border:1px solid var(--line);
  border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.22);
}
.ask-panel.hidden, .ask-launcher.hidden { display:none; }
.ask-head {
  display:flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-bottom:1px solid var(--line);
}
.ask-head .muted { font-size:11px; }
.ask-head .btn { margin-left:auto; }
.ask-thread {
  flex:1;
  overflow-y:auto;
  padding:12px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.ask-msg { display:flex; flex-direction:column; gap:3px; max-width:92%; }
.ask-msg.ask-user { align-self:flex-end; align-items:flex-end; }
.ask-bubble {
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  line-height:1.45;
  white-space:pre-wrap;
}
.ask-user .ask-bubble { background:var(--accent-soft, #eef2ff); }
.ask-meta { font-size:11px; color:var(--muted); }
/* The placeholder while the server is thinking. Reads as provisional rather
   than as an answer somebody can act on. */
.ask-pending .ask-bubble { color:var(--muted); font-style:italic; }
.ask-compose {
  display:flex;
  gap:8px;
  padding:10px 12px;
  border-top:1px solid var(--line);
}
.ask-compose textarea {
  flex:1;
  resize:vertical;
  font:inherit;
  font-size:13px;
  padding:6px 8px;
  border:1px solid var(--line);
  border-radius:8px;
}