/* ==========================================================================
   Client Management Plugin — design system
   Clean SaaS light. Single accent. Subtle borders. Generous spacing.
   ========================================================================== */

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --surface-2: #fafbfc;
  --border: #e5e7eb;
  --border-strong: #d1d5db;

  --text: #111827;
  --text-2: #4b5563;
  --muted: #6b7280;
  --faint: #9ca3af;

  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;
  --accent-border: #bfdbfe;

  --green: #059669;
  --green-soft: #ecfdf5;
  --green-border: #a7f3d0;

  --amber: #b45309;
  --amber-soft: #fffbeb;
  --amber-border: #fde68a;

  --red: #dc2626;
  --red-soft: #fef2f2;
  --red-border: #fecaca;

  --purple: #7c3aed;
  --purple-soft: #f5f3ff;
  --purple-border: #ddd6fe;

  /* Fourth tier of the task-risk scale (My Tasks, Capacity, ops report):
     on track (green) -> due today (amber) -> up to a day late (red) ->
     more than a day late (maroon). Deliberately darker/duller than red
     rather than another bright hue, so it reads as "worse than red". */
  --maroon: #7f1d1d;
  --maroon-soft: #fde8e8;
  --maroon-border: #e5a1a1;

  --r: 10px;
  --r-sm: 6px;
  --r-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .12), 0 4px 8px rgba(16, 24, 40, .06);

  --sidebar-w: 248px;
  --topbar-h: 62px;

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

/* A handful of components below (buttons, the PWA bars) set `display`
   unconditionally, which -- author CSS always beats the browser's own
   built-in stylesheet, specificity or not -- silently wins over the
   `hidden` attribute's own `display: none`. That is exactly what made the
   old PWA "Not now" button look broken: it *was* being hidden, this file
   just ignored it. One global rule closes off the whole bug class rather
   than special-casing every component that happens to hit it. */
[hidden] { display: none !important; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -0.011em; }
h1 { font-size: 22px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
h4 { font-size: 13px; }
p  { margin: 0 0 12px; }

/* ---------- Layout ---------- */

.layout { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  flex: 0 0 var(--sidebar-w);
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.content { padding: 26px 32px 64px; max-width: 1240px; width: 100%; }
.content.narrow { max-width: 880px; }

/* ---------- Brand ---------- */

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 18px;
  height: var(--topbar-h);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.brand-mark {
  width: 30px; height: 30px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 700; font-size: 13px;
  flex: 0 0 auto;
}
.brand-name { font-weight: 650; font-size: 14.5px; letter-spacing: -0.01em; }
.brand-role { font-size: 11px; color: var(--muted); line-height: 1.2; }

/* ---------- Nav ---------- */

.nav { padding: 14px 12px; overflow-y: auto; flex: 1; }
.nav-label {
  font-size: 10.5px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--faint);
  padding: 14px 10px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  color: var(--text-2);
  font-weight: 500;
  margin-bottom: 1px;
  cursor: pointer;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.nav-item.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.nav-item .ico { width: 16px; text-align: center; flex: 0 0 16px; opacity: .85; }
.nav-item .count {
  margin-left: auto;
  font-size: 11px;
  font-weight: 600;
  background: var(--bg);
  color: var(--muted);
  border-radius: 20px;
  padding: 1px 7px;
}
.nav-item.active .count { background: #fff; color: var(--accent); }

.sidebar-foot {
  border-top: 1px solid var(--border);
  padding: 12px;
  flex: 0 0 auto;
}

/* ---------- Topbar ---------- */

.topbar {
  height: var(--topbar-h);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 32px;
  position: sticky;
  top: 0;
  z-index: 20;
}
/* min-width:0 so the trail is what gives way when the bar gets tight --
   a flex item defaults to min-width:auto and refuses to shrink below its
   text, which would push the day actions and the user chip off the edge
   on a long breadcrumb. */
.topbar .crumbs { font-size: 13px; color: var(--muted); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topbar .crumbs a { color: var(--muted); }
.topbar .crumbs a:hover { color: var(--text); }
.topbar .sep { margin: 0 7px; color: var(--border-strong); }
.topbar .spacer { flex: 1; }

.avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 650;
  flex: 0 0 auto;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.lg { width: 40px; height: 40px; font-size: 14px; }
.avatar.grey { background: var(--bg); color: var(--muted); }
img.avatar { object-fit: cover; display: block; }

.userchip { display: flex; align-items: center; gap: 9px; }
.userchip .nm { font-weight: 550; font-size: 13px; line-height: 1.2; }
.userchip .sub { font-size: 11px; color: var(--muted); line-height: 1.2; }

/* ---------- Top-bar day actions ----------
   Start/end the day, power cut, stepping out. Sits between the crumbs and
   the user chip, on every staff page. */

.daybar { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.daybar form { margin: 0; }

.daybar-state {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--muted);
  padding: 0 8px 0 2px; white-space: nowrap;
}
.daybar-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex: 0 0 auto; }
.daybar-state.on { color: #15803d; }
.daybar-state.on .dot { background: #22c55e; box-shadow: 0 0 0 3px rgba(34, 197, 94, .16); }
.daybar-state.off .dot { background: var(--border-strong); }

.daybtn {
  appearance: none; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--text);
  padding: 5px 10px; font: inherit; font-size: 12.5px; font-weight: 550;
  line-height: 1.2; min-height: 30px;
}
.daybtn:hover { background: var(--bg); }
.daybtn.go { border-color: var(--accent); background: var(--accent); color: #fff; }
.daybtn.go:hover { filter: brightness(.94); }

/* An unfinished timer is the one thing here that should catch the eye: a
   power cut or a step-away left running quietly skews the day's hours. */
.daybtn.live-red { border-color: #ef4444; background: rgba(239, 68, 68, .1); color: #b91c1c; }
.daybtn.live-amber { border-color: #f59e0b; background: rgba(245, 158, 11, .12); color: #a16207; }

/* ---------- Top-bar world clock ----------
   Two small personal-timezone chips, sitting between the day actions and
   the user chip. Unstyled buttons default to block display and stack, so
   this needs an explicit row layout same as .daybar above it. */

.worldclock { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }

.wc-chip { position: relative; }

.wc-btn {
  appearance: none; cursor: pointer; white-space: nowrap;
  border: 1px solid var(--border-strong); border-radius: 7px;
  background: var(--surface); color: var(--text);
  padding: 4px 10px; font: inherit; line-height: 1.25; min-height: 30px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
}
.wc-btn:hover { background: var(--bg); }
.wc-city { font-size: 9.5px; font-weight: 650; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; }
.wc-time { font-size: 12px; font-weight: 600; }

.wc-pop {
  position: absolute; top: calc(100% + 6px); right: 0; z-index: 40;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 8px;
  box-shadow: 0 10px 26px rgba(0, 0, 0, .14); padding: 8px; min-width: 170px;
}
.wc-pop .select { width: 100%; }

/* ---------- Page head ---------- */

.pagehead {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 22px;
}
.pagehead .sub { color: var(--muted); margin-top: 3px; font-size: 13px; }
.pagehead .actions { margin-left: auto; display: flex; gap: 8px; flex: 0 0 auto; }

/* ---------- Cards ---------- */

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
}
.card + .card { margin-top: 16px; }
.card-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.card-head .spacer { flex: 1; }
.card-body { padding: 18px; }
.card-body.tight { padding: 14px 18px; }
.card-foot {
  padding: 13px 18px;
  border-top: 1px solid var(--border);
  background: var(--surface-2);
  border-radius: 0 0 var(--r) var(--r);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 14px 0 28px;
}

/* ---------- Grid ---------- */

.grid { display: grid; gap: 16px; }
.grid.c2 { grid-template-columns: repeat(2, 1fr); }
.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.grid.c4 { grid-template-columns: repeat(4, 1fr); }
.grid.main-side { grid-template-columns: minmax(0, 1fr) 320px; align-items: start; }

@media (max-width: 1100px) {
  .grid.c4 { grid-template-columns: repeat(2, 1fr); }
  .grid.main-side { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }
  .content { padding: 20px 16px 48px; }
  .topbar { padding: 0 16px; }
}

/* ---------- Stats ---------- */

.stat { padding: 16px 18px; }
.stat .k {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.stat .v { font-size: 26px; font-weight: 660; letter-spacing: -0.02em; margin-top: 6px; }
.stat .d { font-size: 12px; color: var(--muted); margin-top: 3px; }
.stat .d.up { color: var(--green); }
.stat .d.down { color: var(--red); }

/* ---------- Badges ---------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  font-weight: 600;
  padding: 2px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
  line-height: 1.6;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

.badge.grey   { background: var(--bg);          color: var(--muted);  border-color: var(--border); }
.badge.blue   { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.badge.green  { background: var(--green-soft);  color: var(--green);  border-color: var(--green-border); }
.badge.amber  { background: var(--amber-soft);  color: var(--amber);  border-color: var(--amber-border); }
.badge.red    { background: var(--red-soft);    color: var(--red);    border-color: var(--red-border); }
.badge.purple { background: var(--purple-soft); color: var(--purple); border-color: var(--purple-border); }
.badge.maroon { background: var(--maroon-soft); color: var(--maroon); border-color: var(--maroon-border); }

.pill {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 5px;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
}
.pill.client { background: var(--purple-soft); color: var(--purple); border-color: var(--purple-border); }
.pill.team   { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 550;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn:active { background: var(--bg); }
.btn:disabled, .btn.disabled { opacity: .5; cursor: not-allowed; }

.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }

.btn.success { background: var(--green); border-color: var(--green); color: #fff; }
.btn.success:hover { filter: brightness(.94); }

.btn.danger { background: var(--surface); border-color: var(--red-border); color: var(--red); }
.btn.danger:hover { background: var(--red-soft); }

.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: var(--bg); }

.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn.lg { padding: 11px 20px; font-size: 14px; }
.btn.block { width: 100%; }

.btn-row { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- Tables ---------- */

table.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tbl th {
  text-align: left;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--muted);
  padding: 10px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  white-space: nowrap;
}
table.tbl td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
table.tbl tbody tr:last-child td { border-bottom: none; }
table.tbl tbody tr.clickable { cursor: pointer; }
table.tbl tbody tr.clickable:hover { background: var(--surface-2); }
table.tbl td.num, table.tbl th.num { text-align: right; font-variant-numeric: tabular-nums; }
.card > table.tbl:first-child th:first-child { border-radius: var(--r) 0 0 0; }
.card > table.tbl:first-child th:last-child { border-radius: 0 var(--r) 0 0; }
.card > .tbl-scroll:first-child > table.tbl th:first-child { border-radius: var(--r) 0 0 0; }
.card > .tbl-scroll:first-child > table.tbl th:last-child { border-radius: 0 var(--r) 0 0; }

.t-strong { font-weight: 600; }
.t-muted { color: var(--muted); }
.t-sm { font-size: 12px; }
.t-xs { font-size: 11.5px; }
.t-num { font-variant-numeric: tabular-nums; }
.t-right { text-align: right; }
.t-center { text-align: center; }
.t-mono { font-family: var(--mono); font-size: 12px; }
.t-strike { text-decoration: line-through; color: var(--faint); }

/* ---------- Progress ---------- */

.bar {
  height: 7px;
  background: var(--bg);
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
}
.bar > span {
  display: block;
  height: 100%;
  background: var(--accent);
  border-radius: 20px;
  transition: width .4s ease;
}
.bar.green > span { background: var(--green); }
.bar.lg { height: 10px; }

.progress-line { display: flex; align-items: center; gap: 10px; }
.progress-line .bar { flex: 1; }
.progress-line .pct {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
  min-width: 34px;
  text-align: right;
}

/* ---------- Milestone timeline ---------- */

.timeline { position: relative; padding-left: 30px; }
.timeline::before {
  content: "";
  position: absolute;
  left: 9px; top: 8px; bottom: 8px;
  width: 2px;
  background: var(--border);
}
.tl-item { position: relative; padding-bottom: 18px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot {
  position: absolute;
  left: -30px; top: 2px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--border-strong);
  display: grid; place-items: center;
  font-size: 10px;
  color: var(--muted);
  z-index: 1;
}
.tl-dot.done    { background: var(--green);  border-color: var(--green);  color: #fff; }
.tl-dot.current { background: var(--accent); border-color: var(--accent); color: #fff;
                  box-shadow: 0 0 0 4px var(--accent-soft); }
.tl-dot.review  { background: var(--amber);  border-color: var(--amber);  color: #fff; }
.tl-dot.blocked { background: var(--red);    border-color: var(--red);    color: #fff; }

/* ---------- Task list ---------- */

.task {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--border);
}
.task:last-child { border-bottom: none; }
.task:hover { background: var(--surface-2); }
.task .tbody { flex: 1; min-width: 0; }
.task .ttitle { font-weight: 550; }
.task .tmeta { font-size: 12px; color: var(--muted); margin-top: 2px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task .tcost { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task.done .ttitle { color: var(--muted); text-decoration: line-through; }
.task-plan-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
}
.task-plan-row .task-plan-controls {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.task-plan-row .task-plan-controls .select { max-width: 190px; }
.task-plan-row .task-plan-controls .input[type="date"] { max-width: 158px; }
.task-plan-row .task-plan-controls .input[type="time"] { max-width: 132px; }
.task-plan-row .task-plan-controls .input[type="number"] { max-width: 110px; }
/* 0.4.136: Plan / Start / ⋯ sit on the right of the row instead of a line of
   their own; the plan editor, when open, drops to a full-width line below. */
@media (min-width: 721px) {
  .task-plan-row { grid-template-columns: auto minmax(0, 1fr) auto; column-gap: 11px; }
  .task-plan-row .task-plan-controls { grid-column: 3; grid-row: 1; margin-top: -2px; justify-content: flex-end; flex-wrap: nowrap; }
  .task-plan-row .task-plan-controls:has(.task-plan-edit:not([hidden])) { grid-column: 2 / 4; grid-row: 2; margin-top: 8px; flex-wrap: wrap; justify-content: flex-start; }
  .task-plan-row .task-plan-controls .btn.ghost { opacity: .7; }
  .task-plan-row:hover .task-plan-controls .btn.ghost { opacity: 1; }
}

.template-picker {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 16px;
  align-items: end;
}
.template-picker .template-action {
  display: flex;
  align-items: flex-end;
  padding-bottom: 23px;
}

.check {
  width: 17px; height: 17px;
  border-radius: 5px;
  border: 1.5px solid var(--border-strong);
  background: var(--surface);
  display: grid; place-items: center;
  font-size: 10px;
  color: transparent;
  cursor: pointer;
  flex: 0 0 auto;
  margin-top: 2px;
}
.check:hover { border-color: var(--accent); }
.check.on { background: var(--green); border-color: var(--green); color: #fff; }
.check.locked { background: var(--bg); border-color: var(--border); cursor: not-allowed; }

/* ---------- Forms ---------- */

.field { margin-bottom: 16px; }
.field > label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text-2);
}
.field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.field .req { color: var(--red); }

.input, .select, .textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--text);
  padding: 9px 11px;
  border: 1px solid var(--border-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  outline: none;
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.textarea { resize: vertical; min-height: 84px; line-height: 1.55; }
.select { appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5L6 8l3-3.5' fill='none' stroke='%236b7280' stroke-width='1.5' stroke-linecap='round'/></svg>"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 30px; }

.input-group { display: flex; align-items: stretch; }
.input-group .addon {
  display: grid; place-items: center;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-right: none;
  border-radius: var(--r-sm) 0 0 var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
}
.input-group .input { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
/* A currency picker sitting where a static symbol usually goes. */
.input-group .addon-select {
  appearance: none; -webkit-appearance: none;
  padding-right: 22px;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%),
                    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: right 11px top 50%, right 7px top 50%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
  cursor: pointer;
}

/* An addon on the right of an input, rather than the usual left. */
.input-group .addon-right {
  display: grid; place-items: center;
  padding: 0 11px;
  border: 1px solid var(--border-strong);
  border-left: none;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  background: var(--surface-2);
  color: var(--muted);
  font-size: 13px;
  font-weight: 550;
  white-space: nowrap;
}
.input-group .input + .addon-right { border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.input-group .addon-right ~ .input,
.input-group .input:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); }

/* Loom instructions, folded away until wanted. */
.loom-help { margin-top: 8px; }
.loom-help > summary { cursor: pointer; color: var(--accent); font-weight: 550; }
.loom-help ol { margin: 8px 0 0; padding-left: 18px; }
.loom-help li { margin-bottom: 5px; }

/* Nav badge tones — a breach reads red, an unanswered ticket amber. */
.nav-item .count-bad {
  background: var(--red); color: #fff;
}
.nav-item .count-new {
  background: var(--amber); color: #fff;
}

/* Milestone name doubles as the way into the milestone. */
.ms-title-link { color: inherit; text-decoration: none; }
.ms-title-link:hover, .ms-title-link:focus-visible { text-decoration: underline; }

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.row3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 700px) {
  .row2, .row3, .template-picker { grid-template-columns: 1fr; }
  .template-picker .template-action { padding-bottom: 0; }
}

.checkline {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  cursor: pointer;
}
.checkline:hover { border-color: var(--border-strong); }
.checkline input { margin-top: 2px; flex: 0 0 auto; accent-color: var(--accent); width: 15px; height: 15px; }
.checkline .cl-title { font-weight: 550; }
.checkline .cl-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.checkline.on { border-color: var(--accent); background: var(--accent-soft); }

.radio-cards { display: grid; gap: 10px; }
.radio-card {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 12px 14px;
  cursor: pointer;
  background: var(--surface);
}
.radio-card:hover { border-color: var(--border-strong); }
.radio-card.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent); }
.radio-card input { margin-top: 3px; accent-color: var(--accent); }

/* ---------- Comments ---------- */

.comment { display: flex; gap: 11px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.comment:last-child { border-bottom: none; }
.comment .cbody { flex: 1; min-width: 0; }
.comment .chead { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.comment .cname { font-weight: 600; font-size: 13px; }
.comment .ctime { font-size: 11.5px; color: var(--faint); }
.comment .ctext { color: var(--text-2); }
.comment.rejection .ctext {
  background: var(--red-soft);
  border-left: 3px solid var(--red);
  padding: 9px 12px;
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  color: #7f1d1d;
}
.comment.system .ctext { color: var(--muted); font-style: italic; }

/* ---------- Files ---------- */

.file {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  margin-bottom: 8px;
  min-width: 0;
}
.file:last-child { margin-bottom: 0; }
.file .fico {
  width: 30px; height: 30px;
  border-radius: var(--r-sm);
  background: var(--bg);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: var(--muted);
  flex: 0 0 auto;
}
.file .fname { font-weight: 550; font-size: 13px; }
.file .fmeta { font-size: 11.5px; color: var(--muted); }
.file form,
.tbl .hstack {
  flex-wrap: wrap;
}
.input.compact {
  max-width: 220px;
  min-height: 32px;
  padding: 6px 9px;
}

.dropzone {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r);
  padding: 26px;
  text-align: center;
  color: var(--muted);
  background: var(--surface-2);
  cursor: pointer;
}
.dropzone:hover { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.dropzone .dz-strong { font-weight: 600; color: var(--text); display: block; margin-bottom: 3px; }
.dropzone:hover .dz-strong { color: var(--accent); }

/* ---------- Attachments in a reply box ---------- */

.attach { margin-top: 8px; }
.attach.attach-js .attach-input { display: none; }
.attach-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.attach-drop {
  border: 1.5px dashed var(--border-strong);
  border-radius: var(--r);
  padding: 18px 16px;
  text-align: center;
  color: var(--muted);
  background: var(--surface-2);
  font-size: 13px;
}
.linklike {
  background: none; border: 0; padding: 0;
  font: inherit; font-weight: 600; color: var(--accent);
  text-decoration: underline; cursor: pointer;
}
.attach-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.attach-chip {
  display: flex; align-items: center; gap: 8px;
  max-width: 100%; min-width: 0;
  padding: 5px 4px 5px 5px;
  border: 1px solid var(--border); border-radius: var(--r-sm);
  background: var(--surface);
}
.attach-chip img,
.attach-chip .fico {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 5px; object-fit: cover;
}
.attach-chip .fico {
  display: grid; place-items: center;
  background: var(--bg); color: var(--muted);
  font-size: 10px; font-weight: 700;
}
.ac-text { display: flex; flex-direction: column; min-width: 0; }
.ac-name {
  max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; font-weight: 550; color: var(--text);
}
.ac-size { font-size: 11px; color: var(--muted); }
.ac-x {
  border: 0; background: none; cursor: pointer;
  padding: 4px 7px; border-radius: 5px;
  font-size: 12px; color: var(--muted);
}
.ac-x:hover, .ac-x:focus-visible { background: var(--red-soft); color: var(--red); }
.attach-err { margin-top: 6px; color: var(--red); }
form.attach-dragging {
  outline: 2px dashed var(--accent); outline-offset: 4px;
  border-radius: var(--r); background: var(--accent-soft);
}

/* ---------- Attachments inside a thread message ---------- */

.chat-att { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 6px; max-width: 100%; }
.chat-row.me .chat-att { justify-content: flex-end; }
.chat-att-img {
  display: block; line-height: 0; overflow: hidden;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2);
}
.chat-att-img img {
  display: block;
  max-width: min(240px, 62vw); max-height: 180px;
  width: auto; height: auto;
}
.chat-att-img:hover, .chat-att-img:focus-visible { border-color: var(--accent); }
.chat-att-file {
  display: flex; align-items: center; gap: 8px;
  max-width: min(260px, 70vw); min-width: 0;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); text-decoration: none;
}
.chat-att-file:hover, .chat-att-file:focus-visible { border-color: var(--accent); }
.chat-att-file .fico {
  width: 30px; height: 30px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 6px; background: var(--bg);
  font-size: 10px; font-weight: 700; color: var(--muted);
}
.caf-text { display: flex; flex-direction: column; min-width: 0; }
.caf-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12.5px; font-weight: 550; }
.caf-size { font-size: 11px; color: var(--muted); }
.chat-att-deleted { opacity: .45; }

/* ---------- Meeting tasks (v0.3.90) ---------- */

.cms-meet {
  border: 1px solid var(--purple-border); border-left: 3px solid var(--purple);
  border-radius: var(--r-sm); background: var(--surface);
  padding: 10px 12px; margin: 0 0 10px;
}
.cms-meet-running { border-left-color: var(--green); background: var(--green-soft); }
.cms-meet-ended { opacity: .75; border-left-color: var(--border-strong); }
.cms-meet-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cms-meet-title { font-weight: 600; font-size: 14px; }
.cms-meet-head .cms-meet-state { margin-left: auto; }
.cms-meet-sub { margin: 3px 0 6px; }
.cms-meet-people { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px; }
.cms-meet-person {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 9px; border-radius: 999px;
  background: var(--bg); border: 1px solid var(--border); font-size: 12px;
}
.cms-meet-person .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--faint); flex: 0 0 auto; }
.cms-meet-person.in .dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.cms-meet-person.paused .dot { background: var(--amber); }
.cms-meet-person.left .dot { background: var(--muted); }
.cms-meet-person.waiting { color: var(--text-2); }
.cms-meet-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cms-meet-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 11px; padding: 1px 5px; border-radius: 999px; }
.cms-meet-x:hover, .cms-meet-x:focus-visible { background: var(--red-soft); color: var(--red); }
.cms-meet-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.cms-meet-end .input.sm { min-width: 180px; }
.cms-meet-more > summary { list-style: none; cursor: pointer; }
.cms-meet-more > summary::-webkit-details-marker { display: none; }
.cms-meet-more[open] { flex-basis: 100%; }
.cms-meet-more-body { margin-top: 8px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); background: var(--surface-2); }

/* Client attendees (v0.4.3). Kept visually distinct from your own people,
   because their presence is what makes the meeting billable. */
.cms-meet-guests { align-items: center; margin-top: 4px; }
.cms-meet-person.guest {
  background: var(--purple-soft); border-color: var(--purple-border); color: var(--purple);
}
.cms-meet-person.guest .dot { background: var(--purple); }
.cms-meet-bill {
  margin-top: 6px; padding: 5px 9px; border-radius: var(--r-sm);
  background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2);
}

/* ---------- Alerts ---------- */

.alert {
  display: flex;
  gap: 11px;
  padding: 13px 15px;
  border-radius: var(--r);
  border: 1px solid var(--border);
  background: var(--surface-2);
  margin-bottom: 16px;
  align-items: flex-start;
}
.alert .aico { flex: 0 0 auto; font-size: 15px; line-height: 1.4; }
.alert .atitle { font-weight: 600; margin-bottom: 2px; }
.alert .atext { font-size: 13px; color: var(--text-2); }
.alert .aactions { margin-left: auto; flex: 0 0 auto; display: flex; gap: 8px; align-items: center; }

.alert.blue  { background: var(--accent-soft); border-color: var(--accent-border); }
.alert.green { background: var(--green-soft);  border-color: var(--green-border); }
.alert.amber { background: var(--amber-soft);  border-color: var(--amber-border); }
.alert.red   { background: var(--red-soft);    border-color: var(--red-border); }
.alert.purple { background: var(--purple-soft); border-color: var(--purple-border); }

/* ---------- Modal ---------- */

.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(17, 24, 39, .45);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 100;
  backdrop-filter: blur(2px);
}
.modal-bg.open { display: flex; }
.modal {
  background: var(--surface);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 490px;
  max-height: 90vh;
  overflow: auto;
  animation: pop .16s ease-out;
}
.modal.wide { max-width: 660px; }
@keyframes pop { from { opacity: 0; transform: translateY(8px) scale(.99); } }
.modal-head {
  padding: 18px 22px 0;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.modal-head .spacer { flex: 1; }
.modal-head .sub { font-size: 13px; color: var(--muted); margin-top: 3px; }
.modal-body { padding: 18px 22px; }
.modal-foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 9px;
  justify-content: flex-end;
  background: var(--surface-2);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.x-btn {
  border: none; background: transparent; cursor: pointer;
  font-size: 19px; color: var(--faint); line-height: 1;
  padding: 2px 5px; border-radius: 5px;
}
.x-btn:hover { background: var(--bg); color: var(--text); }

/* ---------- Toast ---------- */

#toasts {
  position: fixed;
  right: 20px; bottom: 20px;
  display: flex; flex-direction: column; gap: 9px;
  z-index: 200;
}
.toast {
  background: var(--text);
  color: #fff;
  padding: 11px 16px;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 500;
  display: flex; align-items: center; gap: 9px;
  animation: slidein .2s ease-out;
  max-width: 380px;
}
.toast.good { background: var(--green); }
.toast.warn { background: var(--amber); }
.toast.bad  { background: var(--red); }
@keyframes slidein { from { opacity: 0; transform: translateX(16px); } }

/* ---------- Auth pages ---------- */

.auth-wrap {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(900px 420px at 50% -10%, #eaf1ff 0%, rgba(234,241,255,0) 62%),
    var(--bg);
}
.auth-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow);
  padding: 30px;
}
.auth-card.wide { max-width: 620px; }
.auth-brand { display: flex; align-items: center; gap: 10px; justify-content: center; margin-bottom: 22px; }
.auth-title { text-align: center; margin-bottom: 5px; }
.auth-sub { text-align: center; color: var(--muted); font-size: 13px; margin-bottom: 24px; }
.auth-foot { text-align: center; margin-top: 18px; font-size: 12.5px; color: var(--muted); }

.divider { display: flex; align-items: center; gap: 12px; color: var(--faint); font-size: 12px; margin: 18px 0; }
.divider::before, .divider::after { content: ""; height: 1px; background: var(--border); flex: 1; }

/* ---------- Steps ---------- */

.steps { display: flex; align-items: center; gap: 0; margin-bottom: 26px; }
.step { display: flex; align-items: center; gap: 8px; }
.step .num {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--bg); color: var(--muted);
  border: 1px solid var(--border-strong);
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 650;
  flex: 0 0 auto;
}
.step .lbl { font-size: 12.5px; color: var(--muted); font-weight: 550; }
.step.on .num { background: var(--accent); border-color: var(--accent); color: #fff; }
.step.on .lbl { color: var(--text); }
.step.done .num { background: var(--green); border-color: var(--green); color: #fff; }
.step-line { flex: 1; height: 1px; background: var(--border); margin: 0 12px; min-width: 20px; }

/* ---------- Tabs ---------- */

.tabs { display: flex; gap: 3px; border-bottom: 1px solid var(--border); margin-bottom: 20px; }
.tab {
  padding: 9px 13px;
  font-size: 13px;
  font-weight: 550;
  color: var(--muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  cursor: pointer;
  background: none; border-top: none; border-left: none; border-right: none;
  font-family: inherit;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }

/* ---------- Misc ---------- */

.stack { display: flex; flex-direction: column; }
.stack.g4 { gap: 4px; } .stack.g8 { gap: 8px; }
.stack.g12 { gap: 12px; } .stack.g16 { gap: 16px; } .stack.g24 { gap: 24px; }

.hstack { display: flex; align-items: center; }
.hstack.g6 { gap: 6px; } .hstack.g8 { gap: 8px; }
.hstack.g12 { gap: 12px; } .hstack.g16 { gap: 16px; }
.hstack.wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

.sep { height: 1px; background: var(--border); margin: 16px 0; border: none; }
.mt0{margin-top:0}.mt4{margin-top:4px}.mt8{margin-top:8px}.mt12{margin-top:12px}
.mt16{margin-top:16px}.mt24{margin-top:24px}
.mb0{margin-bottom:0}.mb4{margin-bottom:4px}.mb8{margin-bottom:8px}
.mb12{margin-bottom:12px}.mb16{margin-bottom:16px}.mb24{margin-bottom:24px}

.empty { text-align: center; padding: 44px 20px; color: var(--muted); }
.empty .eico { font-size: 28px; opacity: .35; margin-bottom: 10px; }
.empty .etitle { font-weight: 600; color: var(--text); margin-bottom: 4px; }

.kv { display: grid; grid-template-columns: auto 1fr; gap: 9px 18px; font-size: 13px; align-items: baseline; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; font-weight: 550; text-align: right; }

.amount { font-variant-numeric: tabular-nums; font-weight: 650; }
.amount.lg { font-size: 24px; letter-spacing: -0.02em; }
.amount.xl { font-size: 32px; letter-spacing: -0.025em; }

.card-brand {
  display: inline-grid; place-items: center;
  width: 36px; height: 24px;
  border-radius: 4px;
  background: linear-gradient(135deg, #1a1f36, #3b4a6b);
  color: #fff; font-size: 8.5px; font-weight: 800;
  letter-spacing: .04em;
  flex: 0 0 auto;
}

/* ---------- Launcher (index.html) ---------- */

.launch { max-width: 1080px; margin: 0 auto; padding: 48px 24px 72px; }
.launch-head { text-align: center; margin-bottom: 40px; }
.launch-head h1 { font-size: 28px; margin-bottom: 8px; }
.launch-head p { color: var(--muted); max-width: 620px; margin: 0 auto; }
.launch-sec { margin-bottom: 34px; }
.launch-sec > h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.launch-sec > .desc { color: var(--muted); font-size: 13px; margin-bottom: 14px; }
.launch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); gap: 12px; }
.launch-card {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 15px 16px;
  box-shadow: var(--shadow-sm);
  color: var(--text);
}
.launch-card:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-1px); }
.launch-card .lc-t { font-weight: 600; margin-bottom: 3px; }
.launch-card .lc-d { font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.launch-card .lc-f { font-family: var(--mono); font-size: 10.5px; color: var(--faint); margin-top: 8px; }

/* ==========================================================================
   v2 additions — switcher, projects, tickets, SLA, gating, queue
   ========================================================================== */

/* ---------- User / project switcher ---------- */

.switch {
  position: relative;
  flex: 0 0 auto;
}
.switch-btn {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 6px;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: var(--surface);
  cursor: pointer;
  font-family: inherit;
  font-size: 13px;
  color: var(--text);
}
.switch-btn:hover { background: var(--surface-2); border-color: var(--border-strong); }
.switch-btn .caret { color: var(--faint); font-size: 10px; margin-left: 1px; }
.switch-menu {
  position: absolute;
  right: 0; top: calc(100% + 7px);
  min-width: 268px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  display: none;
  z-index: 60;
}
.switch-menu.open { display: block; }
.switch-menu .sm-label {
  font-size: 10.5px; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--faint); padding: 8px 10px 4px;
}
.switch-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--r-sm);
  cursor: pointer; color: var(--text);
}
.switch-opt:hover { background: var(--surface-2); text-decoration: none; }
.switch-opt.on { background: var(--accent-soft); }
.switch-opt .so-n { font-weight: 550; font-size: 13px; line-height: 1.25; }
.switch-opt .so-s { font-size: 11.5px; color: var(--muted); line-height: 1.25; }
.switch-opt .tick { margin-left: auto; color: var(--accent); font-size: 12px; }

/* ---------- Project cards ---------- */

.proj {
  display: block;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  padding: 18px;
  color: var(--text);
}
.proj:hover { border-color: var(--accent); box-shadow: var(--shadow); text-decoration: none; }
.proj .p-type {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 650; text-transform: uppercase; letter-spacing: .05em;
  padding: 2px 8px; border-radius: 5px; margin-bottom: 10px;
}
.p-type.website   { background: var(--accent-soft); color: var(--accent); }
.p-type.marketing { background: var(--purple-soft); color: var(--purple); }
.p-type.software  { background: var(--green-soft);  color: var(--green); }

.proj .p-name { font-size: 15.5px; font-weight: 620; letter-spacing: -0.011em; }
.proj .p-next { font-size: 12.5px; color: var(--muted); margin-top: 3px; }

/* ---------- Deliverables ---------- */

.deliv {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.deliv:last-child { border-bottom: none; }
.deliv .d-ico {
  width: 20px; height: 20px; border-radius: 5px;
  display: grid; place-items: center; font-size: 10px;
  background: var(--bg); color: var(--faint);
  border: 1px solid var(--border); flex: 0 0 auto; margin-top: 1px;
}
.deliv.done .d-ico { background: var(--green-soft); color: var(--green); border-color: var(--green-border); }
.deliv .d-name { font-weight: 550; font-size: 13.5px; }
.deliv .d-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Blocked / locked milestone ---------- */

.locked-card { position: relative; }
.locked-card .card-body { opacity: .62; }
.lock-strip {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 18px;
  background: repeating-linear-gradient(135deg,
    var(--amber-soft), var(--amber-soft) 10px,
    #fef6e0 10px, #fef6e0 20px);
  border-bottom: 1px solid var(--amber-border);
  color: var(--amber);
  font-size: 12.5px; font-weight: 550;
}
.lock-strip .lk { font-size: 14px; }
.lock-strip .spacer { flex: 1; }

.tl-dot.locked { background: var(--surface); border-color: var(--amber); color: var(--amber); }

/* ---------- Tickets ---------- */

.tk {
  display: flex; align-items: flex-start; gap: 13px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.tk:last-child { border-bottom: none; }
.tk:hover { background: var(--surface-2); text-decoration: none; }
.tk .tk-body { flex: 1; min-width: 0; }
.tk .tk-title { font-weight: 550; }
.tk .tk-meta {
  font-size: 12px; color: var(--muted); margin-top: 3px;
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
}
.tk .tk-id { font-family: var(--mono); font-size: 11px; color: var(--faint); }

.prio {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 5px; white-space: nowrap;
  border: 1px solid transparent;
}
.prio.p1 { background: var(--red-soft);    color: var(--red);    border-color: var(--red-border); }
.prio.p2 { background: var(--amber-soft);  color: var(--amber);  border-color: var(--amber-border); }
.prio.p3 { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-border); }
.prio.p4 { background: var(--bg);          color: var(--muted);  border-color: var(--border); }

/* SLA countdown */
.sla {
  display: flex; align-items: center; gap: 8px;
  flex: 0 0 auto; text-align: right;
}
.sla .sla-v {
  font-size: 15px; font-weight: 660; font-variant-numeric: tabular-nums;
  line-height: 1.15;
}
.sla .sla-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.sla.ok   .sla-v { color: var(--green); }
.sla.warn .sla-v { color: var(--amber); }
.sla.late .sla-v { color: var(--red); }

.ring { --p: 50; --c: var(--green); width: 38px; height: 38px; flex: 0 0 auto; position: relative; }
.ring::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(var(--c) calc(var(--p) * 1%), var(--border) 0);
}
.ring::after {
  content: ""; position: absolute; inset: 4px; border-radius: 50%; background: var(--surface);
}
.ring > span {
  position: absolute; inset: 0; display: grid; place-items: center;
  font-size: 10px; font-weight: 700; z-index: 1; color: var(--text-2);
}

/* ---------- Queue / expedite ---------- */

.queue {
  border: 1px solid var(--amber-border);
  background: linear-gradient(180deg, var(--amber-soft), var(--surface) 70%);
  border-radius: var(--r);
  padding: 16px 18px;
}
.queue-bar { display: flex; align-items: center; gap: 4px; margin: 14px 0 10px; }
.queue-slot {
  flex: 1; height: 30px; border-radius: 6px;
  background: var(--bg); border: 1px solid var(--border);
  display: grid; place-items: center;
  font-size: 11px; font-weight: 650; color: var(--faint);
}
.queue-slot.you { background: var(--amber); border-color: var(--amber); color: #fff; }
.queue-slot.target { background: var(--green-soft); border: 1.5px dashed var(--green); color: var(--green); }

/* ---------- Chat inside milestone ---------- */

.chat { display: flex; flex-direction: column; gap: 2px; }
.chat-row { display: flex; gap: 10px; padding: 9px 0; }
.chat-row.me { flex-direction: row-reverse; }
.chat-bub {
  max-width: 78%;
  padding: 9px 13px;
  border-radius: 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.5;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.chat-row.me .chat-bub {
  background: var(--accent); border-color: var(--accent); color: #fff;
  border-bottom-right-radius: 5px;
}
.chat-row:not(.me) .chat-bub { border-bottom-left-radius: 5px; }
.chat-who { font-size: 11px; color: var(--faint); margin-bottom: 3px; }
.chat-row.me .chat-who { text-align: right; }
.chat-sys {
  text-align: center; font-size: 11.5px; color: var(--muted);
  padding: 8px 0; font-style: italic;
}

/* ---------- Segmented ---------- */

.seg { display: inline-flex; background: var(--bg); border: 1px solid var(--border);
       border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button {
  border: none; background: transparent; font-family: inherit;
  font-size: 12.5px; font-weight: 550; color: var(--muted);
  padding: 5px 11px; border-radius: 5px; cursor: pointer;
}
.seg button.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
/* Links and radio labels in a .seg look the same as its buttons (0.4.29). */
.seg a, .seg label { border: none; background: transparent; font-size: 12.5px; font-weight: 550; color: var(--muted);
  padding: 5px 12px; border-radius: 5px; text-decoration: none; cursor: pointer; white-space: nowrap; position: relative; }
.seg a.on, .seg label.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg button.internal-on { background: var(--amber); color: #fff; box-shadow: none; }
.chat-bub.internal { background: var(--amber-soft); border-color: var(--amber-border); color: #7a4a06; }

/* ---------- Waiting-on-client grouping + overdue highlight (18 Sep) ------- */

.grp-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 14px 0 6px;
}
.task.client-overdue { background: var(--red-soft); border-radius: var(--r-sm); }

/* ---------- Recurring task series : collapsed row + dot-strip (18 Sep) --- */

.series-row { border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin-bottom: 6px; overflow: hidden; }
.series-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; cursor: pointer; user-select: none; }
.series-ico { flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--purple-soft); color: var(--purple); display: flex; align-items: center; justify-content: center; }
.series-main { flex: 1; min-width: 0; }
.series-title { font-size: 13px; font-weight: 600; }
.series-meta { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.series-dots { display: flex; flex-wrap: wrap; gap: 3px; max-width: 220px; }
.sdot { width: 9px; height: 9px; border-radius: 2.5px; background: var(--surface-2); border: 1.5px solid var(--border-strong); flex: none; }
.sdot.done { background: var(--green); border-color: var(--green); }
.sdot.upcoming { background: var(--surface); border-color: var(--border-strong); }
.sdot.missed { background: var(--red); border-color: var(--red); }
.series-chev { flex: none; color: var(--faint); transition: transform .15s; }
.series-row.open .series-chev { transform: rotate(90deg); }
.series-occ { display: none; border-top: 1px solid var(--border); background: var(--surface-2); padding: 4px 0; }
.series-row.open .series-occ { display: block; }

/* Mini bar-chart cell in a cost/trend table -- one row's total as a share of
   the largest total shown, so the pattern is visible without re-filtering
   one month at a time (Part D, project P&L). */
.trend-bar { height: 8px; border-radius: 4px; background: var(--red-soft); overflow: hidden; }
.trend-bar > span { display: block; height: 100%; background: var(--red); }

/* ==========================================================================
   v3 — density pass. Fewer boxes, fewer colours, more air.

   Rules applied:
   1. One metric strip per page, not four competing cards.
   2. One primary-coloured element per screen. Everything else is quiet.
   3. Status in tables is a dot + text, not a filled pill.
   4. Colour means "act on this", never decoration.
   ========================================================================== */

/* ---------- Metric strip : replaces the 4-card grid ---------- */

.metrics {
  display: flex;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: 22px;
}
.metric {
  flex: 1;
  padding: 14px 20px;
  border-right: 1px solid var(--border);
  min-width: 0;
}
.metric:last-child { border-right: none; }
.metric .m-k {
  font-size: 11.5px;
  color: var(--muted);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.metric .m-v {
  font-size: 21px;
  font-weight: 620;
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
.metric .m-d { font-size: 11.5px; color: var(--faint); margin-top: 2px; }
.metric.alert-v .m-v { color: var(--amber); }
.metric.bad-v   .m-v { color: var(--red); }
.metric.good-v  .m-v { color: var(--green); }

@media (max-width: 900px) {
  .metrics { flex-wrap: wrap; }
  .metric { flex: 1 1 50%; border-bottom: 1px solid var(--border); }
}

/* ---------- Quiet status : for dense tables and lists ---------- */

.q {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--text-2);
  white-space: nowrap;
}
.q::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--border-strong);
  flex: 0 0 auto;
}
.q.blue::before   { background: var(--accent); }
.q.green::before  { background: var(--green); }
.q.amber::before  { background: var(--amber); }
.q.red::before    { background: var(--red); }
.q.purple::before { background: var(--purple); }
.q.grey::before   { background: var(--border-strong); }
.q.maroon::before { background: var(--maroon); }
.q.red    { color: var(--red);   font-weight: 550; }
.q.amber  { color: var(--amber); font-weight: 550; }
.q.maroon { color: var(--maroon); font-weight: 550; }

/* ---------- Resource centre : staff-side card polish ---------- */

.res-card .card-head .res-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 7px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-2);
  font-size: 12px;
  font-weight: 600;
}
.res-card .card-head .res-count.has-items {
  background: color-mix(in srgb, var(--accent) 14%, var(--surface));
  color: var(--accent);
}
.res-row {
  border-top: 1px solid var(--border);
  transition: background .12s ease;
}
.res-row:hover { background: var(--surface-2); }
.res-add {
  border-top: 1px solid var(--border);
  background: var(--surface-2);
}
.res-add .t-strong {
  display: flex;
  align-items: center;
  gap: 7px;
}
.res-add .t-strong::before {
  content: "+";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 13px;
  line-height: 1;
}
.res-empty {
  text-align: center;
  padding: 28px 18px;
}

/* ---------- Section heading : replaces a card head where no box is needed ---- */

.section {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin: 26px 0 12px;
}
.section:first-child { margin-top: 0; }
.section h2 { font-size: 14.5px; }
.section .s-sub { font-size: 12.5px; color: var(--muted); }
.section .spacer { flex: 1; }

/* ---------- Plain list : rows without a surrounding card ---------- */

.rows { border-top: 1px solid var(--border); }
.row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 13px 2px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.row:hover { background: var(--surface-2); text-decoration: none; }
.row .r-main { flex: 1; min-width: 0; }
.row .r-t {
  font-weight: 550;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.row .r-s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.row .r-side { flex: 0 0 auto; text-align: right; }

/* ---------- Attention block : one place for everything needing action ------ */

.attn {
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--r);
  background: var(--surface);
  margin-bottom: 22px;
  overflow: hidden;
}
.attn.critical { border-left-color: var(--red); }
.attn-head {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.attn-head h2 { font-size: 13.5px; }
.attn-head .spacer { flex: 1; }
.attn-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text);
}
.attn-row:last-child { border-bottom: none; }
.attn-row:hover { background: var(--surface-2); text-decoration: none; }
.attn-row .a-main { flex: 1; min-width: 0; }
.attn-row .a-t { font-weight: 550; }
.attn-row .a-s { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

/* ---------- Truncation helpers ---------- */

.trunc { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.clamp2 {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ==========================================================================
   v4 — mobile and PWA

   The client most likely to open this on a phone is the one whose site just
   went down. That case gets designed for, not reflowed into.
   ========================================================================== */

/* ---------- Offline and install bars ---------- */

.cms-offline-bar {
	position: fixed;
	left: 0; right: 0; top: 0;
	z-index: 300;
	background: var(--amber);
	color: #fff;
	font-size: 12.5px;
	font-weight: 550;
	text-align: center;
	padding: 8px 14px;
	padding-top: calc(8px + env(safe-area-inset-top));
}
body:has(.cms-offline-bar:not([hidden])) .topbar { top: 36px; }

.cms-install-bar {
	position: fixed;
	left: 12px; right: 12px;
	bottom: calc(12px + env(safe-area-inset-bottom));
	z-index: 260;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--r-lg);
	box-shadow: var(--shadow-lg);
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	max-width: 520px;
	margin: 0 auto;
}
.cms-install-bar > div:first-child { flex: 1; min-width: 0; }
.cms-install-bar .t-xs { color: var(--muted); margin-top: 2px; }


/* ---------- Hamburger ---------- */

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 4px;
	width: 40px; height: 40px;
	margin-left: -8px;
	border: none;
	background: transparent;
	cursor: pointer;
	flex: 0 0 auto;
	border-radius: var(--r-sm);
}
.nav-toggle:hover { background: var(--bg); }
.nav-toggle span {
	display: block;
	height: 2px;
	width: 18px;
	background: var(--text-2);
	border-radius: 2px;
	margin: 0 auto;
}

.nav-scrim {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(17, 24, 39, .45);
	z-index: 90;
}

/* ==========================================================================
   Phones
   ========================================================================== */

@media (max-width: 860px) {

	/* Sidebar becomes a drawer. */
	.nav-toggle { display: flex; }

	.sidebar {
		position: fixed;
		top: 0; bottom: 0; left: 0;
		z-index: 100;
		transform: translateX(-100%);
		transition: transform .22s ease;
		box-shadow: none;
		padding-top: env(safe-area-inset-top);
	}
	body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lg); }
	body.nav-open .nav-scrim { display: block; }
	body.nav-open { overflow: hidden; }

	.main { width: 100%; }

	.topbar {
		padding: 0 14px;
		padding-top: env(safe-area-inset-top);
		height: calc(var(--topbar-h) + env(safe-area-inset-top));
		gap: 10px;
	}

	/* On a small screen the trail matters less than the current page. */
	.crumbs a, .crumbs .sep { display: none; }
	.crumbs .t-strong { font-size: 14px; }

	.userchip > div:first-child { display: none; }

	/* The day actions stay on a phone -- a power cut is precisely when
	   somebody is not at their desk. Only the timestamp label goes; the
	   buttons keep a 34px target and carry it in their title instead. */
	.daybar { gap: 5px; }
	.daybar-state { display: none; }
	.daybtn { padding: 6px 9px; font-size: 12px; min-height: 34px; }

	/* Same reasoning as the day actions above: keep the clocks, drop the
	   city labels so two chips don't crowd out the user's own name. */
	.worldclock { gap: 4px; }
	.wc-city { display: none; }
	.wc-btn { padding: 6px 8px; min-height: 34px; }
	.wc-pop { right: auto; left: 0; }

	.content {
		padding: 16px 14px calc(28px + env(safe-area-inset-bottom));
	}

	/* Headings and metrics */
	h1 { font-size: 19px; }
	.pagehead { flex-direction: column; align-items: stretch; gap: 12px; }
	.pagehead .actions { margin-left: 0; }
	.pagehead .actions .btn { flex: 1; justify-content: center; }

	.metrics { flex-wrap: wrap; }
	.metric { flex: 1 1 50%; border-bottom: 1px solid var(--border); padding: 12px 14px; }
	.metric:nth-last-child(-n+2) { border-bottom: none; }
	.metric .m-v { font-size: 18px; }

	.grid.main-side, .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; }

	/* Touch targets. 44px is the smallest thing a thumb hits reliably. */
	.btn { min-height: 42px; padding: 10px 16px; }
	.btn.sm { min-height: 36px; }
	.btn.block, .btn-row .btn { width: 100%; }
	.btn-row { flex-direction: column; }

	.check { width: 32px; height: 32px; } /* was 24px: too small to tap (0.4.30) */
	.nav-item { padding: 11px 10px; }

	.input, .select, .textarea {
		/* 16px stops iOS zooming the whole page on focus. */
		font-size: 16px;
		padding: 11px 12px;
	}

	.row2, .row3 { grid-template-columns: 1fr; }

	/* Cards lose their side padding — the screen is the card. */
	.card-head, .card-body, .card-foot { padding-left: 14px; padding-right: 14px; }
	.card-foot { flex-wrap: wrap; gap: 8px; }

	/* Alerts stack so the action is never squeezed off the edge. */
	.alert { flex-wrap: wrap; }
	.alert .aactions { margin-left: 0; width: 100%; }
	.alert .aactions .btn { flex: 1; justify-content: center; }

	.attn-row { flex-wrap: wrap; }
	.attn-row .a-main { flex: 1 1 100%; }

	/* Tickets */
	.tk { flex-wrap: wrap; padding: 12px 14px; }
	.tk .tk-body { flex: 1 1 100%; order: 2; }
	.tk .prio { order: 1; }
	.tk .sla { order: 1; margin-left: auto; }

	/* Chat bubbles get more of the width. */
	.chat-bub { max-width: 88%; }

	/* Timeline pulls in. */
	.timeline { padding-left: 24px; }
	.tl-dot { left: -24px; width: 18px; height: 18px; font-size: 9px; }

	/* Tables become cards. A six-column table on a 375px screen is unusable,
	   and horizontal scrolling hides the column that matters. */
	table.tbl thead { display: none; }
	table.tbl, table.tbl tbody, table.tbl tr, table.tbl td { display: block; width: 100%; }
	table.tbl tr {
		border-bottom: 1px solid var(--border);
		padding: 12px 14px;
	}
	table.tbl tr:last-child { border-bottom: none; }
	table.tbl td {
		border: none;
		padding: 3px 0;
		text-align: left !important;
	}
	table.tbl td.num { text-align: left; }
	table.tbl td:first-child { font-weight: 600; padding-bottom: 6px; }

	/* Modals become sheets from the bottom. */
	.modal-bg { align-items: flex-end; padding: 0; }
	.modal {
		max-width: 100%;
		border-radius: var(--r-lg) var(--r-lg) 0 0;
		max-height: 92vh;
		padding-bottom: env(safe-area-inset-bottom);
	}
	.modal-foot { flex-direction: column-reverse; }
	.modal-foot .btn { width: 100%; }

	/* Queue slots wrap rather than shrinking to nothing. */
	.queue-bar { flex-wrap: wrap; }
	.queue-slot { flex: 1 1 60px; }

	/* Toasts sit above the thumb, full width. */
	#toasts { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
	.toast { max-width: none; }

	.auth-card { padding: 22px 18px; }
	.steps { font-size: 11px; }
	.step .lbl { display: none; }
}

@media (max-width: 400px) {
	.metric { flex: 1 1 100%; }
	.pagehead .actions { flex-direction: column; }
}

/* Standalone: no browser chrome, so give the top a little breathing room. */
@media (display-mode: standalone) {
	.topbar { padding-top: max(env(safe-area-inset-top), 8px); }
	.cms-install-bar { display: none; }
}

/* ==========================================================================
   Contrast

   The amber palette was the problem: #b45309 on #fffbeb is fine for large
   text but marginal for the 11–12px labels this UI uses everywhere. Darkened
   the foregrounds until every text/background pair clears WCAG AA at small
   sizes. Backgrounds are untouched, so nothing looks different at a glance.
   ========================================================================== */

:root {
	--amber: #92400e;        /* was #b45309 — 4.5:1 on amber-soft at 12px */
	--green: #047857;        /* was #059669 */
	--red:   #b91c1c;        /* was #dc2626 */
	--purple:#6d28d9;        /* was #7c3aed */
	--maroon:#5c1414;        /* was #7f1d1d */
	--muted: #5b6472;        /* was #6b7280 — 4.6:1 on white */
	--faint: #6b7280;        /* was #9ca3af — was only 2.6:1, unreadable */
}

/* Filled chips: white on a saturated fill needs the fill to be dark enough. */
.prio.p1 { background: #fee2e2; }
.prio.p2 { background: #fef3c7; }

/* Amber text on the striped lock strip was the worst offender. */
.lock-strip { color: #78350f; }

/* Toasts are white-on-colour and short-lived, so they get the darker fills. */
.toast.warn { background: #92400e; }
.toast.good { background: #047857; }
.toast.bad  { background: #b91c1c; }

/* ---------- Screen reader only ---------- */

.sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 400;
	background: var(--surface);
	color: var(--text);
	padding: 10px 16px;
	border: 1px solid var(--border);
	border-radius: 0 0 var(--r) 0;
	font-weight: 600;
}
.skip-link:focus {
	left: 0;
	text-decoration: none;
	outline: 2px solid var(--accent);
	outline-offset: -2px;
}

/* ---------- Focus, for keyboards and screen readers ---------- */

.btn:focus-visible,
.nav-item:focus-visible,
.input:focus-visible,
.select:focus-visible,
.textarea:focus-visible,
.check:focus-visible,
.tab:focus-visible,
.nav-toggle:focus-visible,
.switch-btn:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- Print ---------- */

@media print {
  .sidebar, .topbar, .btn, .dropzone { display: none !important; }
  .content { padding: 0; }
  .card { box-shadow: none; break-inside: avoid; }
}

/* ---------- Discussions (internal chat) ---------- */

.cms-disc-wrap {
	display: grid;
	grid-template-columns: 220px 1fr 240px;
	gap: 16px;
	align-items: start;
	height: calc(100vh - 160px);
	min-height: 420px;
}

.cms-disc-col {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	display: flex;
	flex-direction: column;
	min-height: 0;
	height: 100%;
	overflow: hidden;
}

.cms-disc-col-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--border);
}

.cms-disc-col-head h2 { font-size: 14px; margin: 0; }
.cms-disc-col-head .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }

.cms-disc-list { overflow-y: auto; padding: 6px; flex: 1; }

.cms-disc-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 9px 10px;
	border-radius: 8px;
	font-size: 13px;
	color: var(--text);
	text-decoration: none;
}
.cms-disc-item:hover { background: var(--bg); }
.cms-disc-item.active { background: var(--accent-soft, var(--bg)); font-weight: 600; }
.cms-disc-item .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cms-disc-thread { flex: 1; }

.cms-disc-messages {
	flex: 1;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.cms-disc-msg { display: flex; gap: 8px; max-width: 85%; }
.cms-disc-msg.mine { align-self: flex-end; flex-direction: row-reverse; }
.cms-disc-bubble { background: var(--bg); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.cms-disc-msg.mine .cms-disc-bubble { background: var(--accent-soft, #eef2ff); }
.cms-disc-meta { display: flex; gap: 8px; align-items: baseline; margin-bottom: 2px; }
.cms-disc-body { font-size: 13px; word-wrap: break-word; white-space: pre-wrap; }
.cms-disc-img { display: block; max-width: 260px; max-height: 260px; border-radius: 8px; margin-top: 6px; cursor: zoom-in; object-fit: cover; }
.cms-disc-sys { text-align: center; font-size: 12px; color: var(--muted); display: flex; gap: 8px; justify-content: center; }

.cms-disc-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; flex: 0 0 auto; }

.cms-disc-reactions { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; align-items: center; }
.cms-react-chip {
	font-size: 11px;
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: 999px;
	padding: 2px 7px;
	cursor: pointer;
}
.cms-react-chip.mine { border-color: var(--accent); background: var(--accent-soft, #eef2ff); }
.cms-react-add {
	font-size: 11px;
	border: 1px dashed var(--border);
	background: transparent;
	border-radius: 999px;
	width: 20px;
	height: 20px;
	cursor: pointer;
	color: var(--muted);
}
.cms-disc-convert {
	font-size: 11px;
	border: none;
	background: transparent;
	color: var(--accent);
	cursor: pointer;
	text-decoration: underline;
}
.cms-disc-del {
	font-size: 11px;
	border: none;
	background: transparent;
	color: var(--red, #b42318);
	cursor: pointer;
	text-decoration: underline;
}
.cms-react-picker { display: flex; gap: 4px; margin-top: 6px; }

.cms-disc-composer {
	display: flex;
	gap: 8px;
	padding: 10px 12px;
	border-top: 1px solid var(--border);
	align-items: flex-end;
}
.cms-disc-composer textarea { flex: 1; resize: none; }

/* @mentions (v0.3.89) */
.cms-disc-composer { position: relative; }
.cms-mention-menu {
	position: absolute; left: 12px; bottom: calc(100% - 4px);
	min-width: 220px; max-width: calc(100% - 24px);
	background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
	box-shadow: 0 8px 24px rgba(17, 24, 39, .12);
	padding: 4px; z-index: 30;
}
.cms-mention-item { padding: 7px 10px; border-radius: 5px; font-size: 13px; cursor: pointer; }
.cms-mention-item.active, .cms-mention-item:hover { background: var(--accent-soft); color: var(--accent); }
.mention { color: var(--accent); font-weight: 600; }
.mention.me { background: var(--amber-soft); color: var(--amber); border-radius: 4px; padding: 0 2px; }
.cms-disc-msg.mentions-me .cms-disc-bubble { box-shadow: inset 3px 0 0 var(--amber); }
.cms-disc-mention {
	display: inline-block; min-width: 20px; padding: 1px 6px;
	border-radius: 999px; background: var(--amber-soft); color: var(--amber);
	border: 1px solid var(--amber-border); font-size: 11px; font-weight: 700; line-height: 16px; text-align: center;
}

.cms-disc-health-list { overflow-y: auto; padding: 10px; flex: 1; }
.cms-disc-health-row { padding: 8px 4px; border-bottom: 1px solid var(--border); }
.cms-disc-health-row:last-child { border-bottom: none; }
.cms-disc-dots { display: flex; gap: 4px; margin-top: 6px; }
.cms-disc-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--border);
	display: inline-block;
}
.cms-disc-dot.green { background: var(--green); }
.cms-disc-dot.amber { background: var(--amber); }
.cms-disc-dot.red { background: var(--red); }
.cms-disc-dot.grey { background: var(--border-strong, var(--border)); }

.cms-disc-health-mobile { display: none; }

@media (max-width: 860px) {
	.cms-disc-wrap {
		display: flex;
		flex-direction: column;
		height: auto;
		min-height: 0;
	}
	.cms-disc-channels { order: 1; }
	.cms-disc-channels .cms-disc-list { display: flex; gap: 6px; overflow-x: auto; padding: 8px; }
	.cms-disc-channels .cms-disc-item { flex: 0 0 auto; }
	.cms-disc-thread { order: 2; height: 70vh; }
	.cms-disc-health { display: none; }
	.cms-disc-health-mobile { display: block; padding: 10px 12px; border-top: 1px solid var(--border); }
	.cms-disc-health-mobile summary { cursor: pointer; font-weight: 600; font-size: 13px; }
}

.cms-disc-dot.power { box-shadow: 0 0 0 2px var(--amber-soft) inset; }

.cms-emoji-btn { font-size: 16px; line-height: 1; padding: 6px 9px; }

.cms-emoji-picker {
	position: absolute;
	z-index: 60;
	width: 280px;
	max-height: 260px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 10px;
	box-shadow: 0 8px 24px rgba(0,0,0,.12);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}
.cms-emoji-tabs {
	display: flex;
	overflow-x: auto;
	border-bottom: 1px solid var(--border);
	flex: 0 0 auto;
}
.cms-emoji-tab {
	font-size: 11px;
	white-space: nowrap;
	padding: 7px 8px;
	border: none;
	background: transparent;
	color: var(--muted);
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.cms-emoji-tab.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }
.cms-emoji-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
	padding: 8px;
	overflow-y: auto;
}
.cms-emoji-grid button {
	font-size: 18px;
	line-height: 1;
	padding: 5px 0;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 6px;
}
.cms-emoji-grid button:hover { background: var(--bg); }

.cms-member-picker {
	max-height: 160px;
	overflow-y: auto;
	border: 1px solid var(--border);
	border-radius: 8px;
	padding: 8px 10px;
	margin-top: 6px;
}
.cms-member-check { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 4px 0; cursor: pointer; }
.cms-member-check input { margin: 0; }

/* ==========================================================================
   Week close — the five-day strip on one person's week.
   Capacity looks forward at planned work; this looks back at what happened,
   so the bar is time on tasks against time at work, not a share of capacity.
   ========================================================================== */

.wk-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}
.wk-day {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 12px 13px;
  box-shadow: var(--shadow-sm);
  min-width: 0;
}
.wk-day.is-bad { border-color: var(--amber-border); background: var(--amber-soft); }
.wk-dow {
  font-size: 11.5px; font-weight: 650; color: var(--muted);
  text-transform: uppercase; letter-spacing: .04em;
}
.wk-h {
  font-size: 19px; font-weight: 650; letter-spacing: -.02em;
  margin: 4px 0 8px; font-variant-numeric: tabular-nums;
}
.wk-meter {
  height: 6px; border-radius: 20px;
  background: var(--bg); border: 1px solid var(--border); overflow: hidden;
}
.wk-meter > span { display: block; height: 100%; background: var(--green); border-radius: 20px; }
.wk-note { font-size: 11.5px; color: var(--muted); margin-top: 7px; line-height: 1.35; }

@media (max-width: 900px) { .wk-strip { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .wk-strip { grid-template-columns: repeat(2, 1fr); } }

/* ==========================================================================
   Weekly timesheet — a column per day, a row per thing.
   Read as a grid, corrected as a grid, and every changed cell says what it
   was before, because a correction nobody can see is a rewrite.
   ========================================================================== */

.ts-scroll { overflow-x: auto; }
.ts { width: 100%; border-collapse: collapse; font-size: 13px; }
.ts th, .ts td {
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  padding: 8px 10px;
  text-align: center;
  vertical-align: top;
  min-width: 132px;
}
.ts thead th {
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-strong);
  padding: 9px 10px;
  white-space: nowrap;
}
.ts .ts-dow {
  display: block; font-size: 11px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--muted);
}
.ts .ts-dnum { display: block; font-size: 12.5px; color: var(--text); margin-top: 1px; }

.ts .ts-rowhead {
  text-align: left;
  background: var(--surface-2);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-2);
  white-space: nowrap;
  position: sticky;
  left: 0;
  z-index: 1;
  min-width: 150px;
}
.ts tr:last-child th, .ts tr:last-child td { border-bottom: none; }
.ts th:last-child, .ts td:last-child { border-right: none; }

.ts-weekend { background: var(--bg); }
.ts-sub .ts-rowhead { font-weight: 500; color: var(--muted); }

.ts-val { font-variant-numeric: tabular-nums; font-size: 13px; }
.ts-num { font-variant-numeric: tabular-nums; font-size: 14px; }

.ts-time {
  width: 100%;
  max-width: 118px;
  font-family: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  padding: 5px 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--text);
}
.ts-time:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.ts-pair { display: grid; gap: 4px; }

/* What a cell used to say, before somebody corrected it. */
.ts-was {
  font-size: 10.5px;
  color: var(--amber);
  margin-top: 3px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.ts-flag { font-size: 10.5px; color: var(--red); margin-top: 3px; line-height: 1.3; }

.ts-total td { background: var(--surface-2); }
.ts-total .ts-rowhead { color: var(--text); }
.ts-check td, .ts-check .ts-rowhead { color: var(--muted); }


/* ==========================================================================
   0.4.19 -- PM update batch
   ========================================================================== */
dialog.modal { border: 0; padding: 0; color: inherit; }
dialog.modal::backdrop { background: rgba(15, 23, 42, .45); backdrop-filter: blur(2px); }
.cms-toast {
  position: fixed; right: 16px; bottom: 16px; z-index: 200;
  max-width: min(420px, calc(100vw - 32px));
  padding: 10px 14px; border-radius: var(--r-lg, 10px);
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18));
  font-size: 13.5px; line-height: 1.4;
  background: var(--surface); border: 1px solid var(--border);
  animation: pop .16s ease-out; transition: opacity .5s;
}
.cms-toast.ok  { border-color: var(--green-border); background: var(--green-soft); color: var(--green); }
.cms-toast.err { border-color: var(--red-border);   background: var(--red-soft);   color: var(--red); }
.cms-toast.out { opacity: 0; }
form.cms-sending { opacity: .6; pointer-events: none; }
.cms-step-plans { border-top: 1px dashed var(--border); padding-top: 10px; }
.cms-filterbar .field { margin: 0; }
.chat-bub a, .cms-disc-body a { color: var(--accent); text-decoration: underline; word-break: break-word; }
/* 18 Sep 2026: the rule above also matched a link inside your OWN
   message, whose bubble background is var(--accent) -- accent-blue
   link text on an accent-blue bubble, unreadable. Higher specificity
   wins regardless of source order, but this sits right after its
   cause on purpose. */
.chat-row.me .chat-bub a { color: #fff; text-decoration: underline; }

.cms-disc-composer { flex-wrap: wrap; }
.cms-disc-attach { flex-basis: 100%; }
.cms-disc-attach .attach-bar { margin-top: 2px; }
.chat-row.mentions-me .chat-bub { box-shadow: 0 0 0 2px var(--accent-border); }
.cms-mention-menu {
  position: absolute; z-index: 60; min-width: 200px; max-height: 220px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18));
}
.cms-mention-item { padding: 6px 10px; cursor: pointer; font-size: 13px; }
.cms-mention-item.active, .cms-mention-item:hover { background: var(--accent-soft); }
.cms-emoji-pop {
  position: absolute; z-index: 70; width: 288px; max-height: 280px; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 6px;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,.18));
}
.cms-emoji-pop .cms-ep-tabs { display: flex; gap: 2px; flex-wrap: wrap; margin-bottom: 4px; }
.cms-emoji-pop .cms-ep-tabs button { border: 0; background: transparent; font-size: 11px; padding: 2px 6px; border-radius: 4px; cursor: pointer; color: var(--muted); }
.cms-emoji-pop .cms-ep-tabs button.on { background: var(--accent-soft); color: var(--accent); }
.cms-emoji-pop .cms-ep-grid button { border: 0; background: transparent; font-size: 20px; width: 34px; height: 34px; cursor: pointer; border-radius: 6px; }
.cms-emoji-pop .cms-ep-grid button:hover { background: var(--surface-2); }
[data-composer] { position: relative; }

/* ---------- Close my day (24 Sep 2026, approved layout) ---------- */
.dc-table{width:100%;border-collapse:collapse}
.dc-table th{font-size:11.5px;font-weight:600;color:var(--muted);text-align:left;padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);white-space:nowrap}
.dc-table td{padding:9px 12px;border-bottom:1px solid var(--border);vertical-align:middle}
.dc-table tr:last-child td{border-bottom:0}
.dc-table .c-label{width:26%}
.dc-table .c-time{width:150px}
.dc-table .c-len{width:78px;font-variant-numeric:tabular-nums}
.dc-table .c-act{width:150px;text-align:right;white-space:nowrap}
.dc-table .row-sub{font-size:11.5px;color:var(--muted)}
.dc-table input[type=time]{width:128px}
.dc-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--border);background:var(--surface)}
.dc-toolbar .select{max-width:340px}
.dc-empty{padding:14px 16px;color:var(--muted);font-size:13px}
.dc-was{font-size:11px;color:var(--muted);display:block}
.dc-newtask{padding:14px 16px;background:var(--accent-soft);border-bottom:1px solid var(--accent-border)}
.dc-grid{display:grid;grid-template-columns:2fr 1fr 1.4fr auto;gap:10px;align-items:end}
.dc-strip{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.dc-strip .k{font-size:11.5px;color:var(--muted)}
.dc-strip strong{font-size:16px}
.dc-warn{display:flex;gap:8px;align-items:flex-start;font-size:13px;padding:8px 12px;border-radius:var(--r-sm);margin-top:8px}
.dc-warn.amber{background:var(--amber-soft);border:1px solid var(--amber-border);color:var(--amber)}
.dc-warn.red{background:var(--red-soft);border:1px solid var(--red-border);color:var(--red)}
.dc-warn.green{background:var(--green-soft);border:1px solid var(--green-border);color:var(--green)}
.dc-final{display:flex;flex-direction:column;align-items:center;gap:8px;margin:22px 0 6px}
.dc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.dc-step{padding:12px 14px;border-right:1px solid var(--border);font-size:13px}
.dc-step:last-child{border-right:0}
.dc-step .who{font-size:11.5px;color:var(--muted);margin-bottom:4px;display:flex;gap:6px;align-items:center}
.dc-step .txt{color:var(--text-2);white-space:pre-line}
.dc-step.wait .txt{color:var(--faint);font-style:italic}
@media (max-width:760px){.dc-steps{grid-template-columns:1fr}.dc-step{border-right:0;border-bottom:1px solid var(--border)}.dc-grid{grid-template-columns:1fr}.dc-table{display:block;overflow-x:auto}}

/* Team goals (0.4.29): goal cards on Close my day and the weekly review, and the 8-week dots. */
.gcard{border:1px solid var(--border);border-radius:var(--r);padding:12px 14px;margin-bottom:10px;background:var(--surface)}
.gcard:last-child{margin-bottom:0}
.tbl .row-sub{font-size:11.5px;color:var(--muted);margin-top:2px}
.dots{display:flex;gap:4px}
.dots i{width:14px;height:14px;border-radius:4px;background:var(--border)}
.dots i.hit{background:var(--green)}
.dots i.part{background:#f59e0b}
.dots i.miss{background:var(--red)}

/* ==========================================================================
   UI audit fixes (0.4.30) -- buttons, labels and spacing, from an automated
   pass over every portal page at 1440px and 390px.
   ========================================================================== */

/* Top bar: the day buttons sat at 30px next to 38px clock chips. One height. */
.daybtn { min-height: 38px; display: inline-flex; align-items: center; }
.wc-btn { min-height: 38px; justify-content: center; }

/* Tabs never wrap onto two lines; a long row scrolls inside itself instead of
   pushing the whole page sideways on a phone. */
.tabs { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; flex: 0 0 auto; }

/* Segmented controls: same rule, and the same height for button, link and label items. */
.seg { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.seg::-webkit-scrollbar { display: none; }
.seg button, .seg a, .seg label { white-space: nowrap; flex: 0 0 auto; display: inline-flex; align-items: center; min-height: 28px; }

/* Buttons that sit side by side in their own little forms (View / PDF / CSV,
   Pay / Edit) touched edge to edge. */
td > form + form, td > form + .btn, td > .btn + form, td > .btn + .btn,
.t-right > form + form, .t-right > .btn + form, .t-right > form + .btn { margin-left: 6px; }

/* Label to field: a consistent small gap everywhere. */
.field > label { display: block; margin-bottom: 6px; }
/* The same look for a label that is not inside .field (was tiny grey text on three pages). */
.lbl { display: block; font-size: 12.5px; font-weight: 600; margin-bottom: 6px; color: var(--text-2); }

/* Consecutive blocks never touch. */
.card + .card, .metrics + .card, .card + .metrics, .alert + .card, .alert + .alert { margin-top: 16px; }

@media (max-width: 860px) {
	/* Touch targets: at least 40px (36px for small buttons) on a phone. */
	.btn { min-height: 40px; }
	.btn.sm { min-height: 36px; }
	.seg button, .seg a, .seg label { min-height: 36px; }
	.daybtn, .wc-btn { min-height: 36px; }
}

@media (max-width: 560px) {
	/* Menu, two day buttons, two clocks and the avatar don't fit in 390px:
	   the avatar was pushed off the edge and every page scrolled sideways.
	   The day buttons matter more on a phone (see above), so the clocks go. */
	.worldclock { display: none; }
	.topbar { gap: 8px; }
	.card { max-width: 100%; }
}

/* Wide tables scroll inside their own box rather than widening the page
   (the wrapper is added by the portal script in the footer). */
.tbl-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tbl-scroll > table { min-width: 100%; }
/* Compact labelled fields in a wrapping row (the milestone "Add task" form). */
.field.tf { margin: 0; }
.field.tf > label { font-size: 11.5px; margin-bottom: 4px; }

/* List rows on a phone: fixed-width progress/status columns squeezed the
   title to nothing (the dashboard showed projects with no name). Wrap
   instead -- title first, the rest underneath. */
@media (max-width: 560px) {
	.row { flex-wrap: wrap; row-gap: 8px; }
	.row .r-main { flex: 1 1 60%; }
	.row .r-prog { flex: 1 1 auto !important; width: auto !important; }
	.row .r-side { width: auto !important; margin-left: auto; }
}
/* A grid item defaults to min-width:auto and refuses to shrink below its
   longest unbreakable line, which pushed cards (client home: Recently
   delivered, Open support tickets) past the edge of a phone. */
.grid > *, .row2 > *, .row3 > * { min-width: 0; }
/* A count badge inside a segmented control no longer makes that item taller. */
.seg .badge { font-size: 10.5px; line-height: 1.3; padding: 0 6px; margin-left: 5px; }
/* Header rows (card heads, section heads, inline filter forms) wrap on a
   phone instead of pushing their last button off the edge. */
@media (max-width: 560px) {
	.card-head, .section, .hstack, .pagehead .actions { flex-wrap: wrap; row-gap: 8px; }
	.card-head form.hstack input, .card-head form.hstack select { min-width: 0; flex: 1 1 120px; }
}
/* A count badge inside a button: no taller than the button's own text. */
.btn .badge { font-size: 10.5px; line-height: 1.3; padding: 0 6px; }
/* Form footers on a phone: the note on its own line, buttons wrap below it. */
@media (max-width: 560px) {
	.form-actions { flex-wrap: wrap; row-gap: 10px; }
	.form-actions > span:not(.spacer) { flex: 1 1 100%; }
	.form-actions .spacer { display: none; }
	.form-actions .btn { flex: 1 1 auto; }
}
/* One-column metrics (narrow phones): a line between every item, none on the
   right -- the two-column rules left a stray side border and no line above
   the last item. */
@media (max-width: 400px) {
	.metric { border-right: none; border-bottom: 1px solid var(--border); }
	.metric:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
	.metric:last-child { border-bottom: none; }
}
/* List rows on a phone: the progress bar keeps a usable width. */
@media (max-width: 560px) {
	.row .r-prog { flex: 1 1 110px !important; }
	.row .r-prog .bar { min-width: 60px; }
}
/* Deliverable rows: the divider spans the whole row, Delete included. */
.deliv-row { border-bottom: 1px solid var(--border); }
.deliv-row:last-child { border-bottom: none; }

/* The menu under the user's name (0.4.31): Suggestions and My Vault. */
.usermenu { position: relative; }
.usermenu > summary { list-style: none; display: flex; align-items: center; gap: 9px; cursor: pointer; border-radius: 8px; padding: 3px 4px; position: relative; }
.usermenu > summary::-webkit-details-marker { display: none; }
.usermenu > summary:hover { background: var(--surface-2); }
.usermenu-dot { position: absolute; top: 2px; right: 2px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 2px var(--surface); }
.usermenu-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 200px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--shadow-lg); padding: 6px; }
@media (max-width: 860px) { .usermenu > summary > div:first-child { display: none; } }

/* Section tabs (0.4.34): a group's pages -- Reports, People, Finance -- as one
   row across the top, above the page's own heading and tabs. */
.section-tabs { display: flex; gap: 4px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding: 3px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; width: fit-content; max-width: 100%; }
.section-tabs::-webkit-scrollbar { display: none; }
.section-tabs a { white-space: nowrap; padding: 7px 14px; border-radius: 7px; font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none; min-height: 34px; display: inline-flex; align-items: center; }
.section-tabs a:hover { color: var(--text); }
.section-tabs a.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }

/* ---- $1M ARR strip in the top bar (0.4.114): quiet, always there ---- */
.arr-strip { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 18px; font-size: 12.5px; color: var(--text-2); text-decoration: none; }
.arr-strip:hover { color: var(--text); text-decoration: none; }
.arr-strip .arr-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 auto; animation: arrPulse 3s ease-in-out infinite; }
.arr-strip .arr-goal { font-weight: 650; color: var(--text); white-space: nowrap; }
.arr-strip .arr-bar { width: 110px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; flex: 0 0 auto; }
.arr-strip .arr-bar > span { display: block; height: 100%; background: var(--green); border-radius: 3px; }
.arr-strip .arr-pct { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); }
.arr-strip .arr-msg { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .5s ease; }
@keyframes arrPulse { 0%, 100% { opacity: .35; transform: scale(.85); } 50% { opacity: 1; transform: scale(1.15); } }
.topbar .crumbs { flex-shrink: 0; max-width: 38%; }
@media (max-width: 1400px) { .arr-strip .arr-msg { display: none; } }
@media (max-width: 860px) { .arr-strip { display: none; } }
@media (prefers-reduced-motion: reduce) { .arr-strip .arr-dot { animation: none; } .arr-strip .arr-msg { transition: none; } }

/* ======================================================================
   Task review & thread (0.4.136) -- templates/shared/task-review.php
   ====================================================================== */
.cms-tr-badge { display: inline-flex; align-items: center; gap: 6px; }
.cms-tr-chip, .cms-tr-count {
  font: inherit; font-size: 12px; line-height: 1; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 9px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text-2);
  transition: background .12s, border-color .12s;
}
.cms-tr-chip:hover, .cms-tr-count:hover { border-color: var(--border-strong); background: var(--bg); }
.cms-tr-chip::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }
.cms-tr-chip.purple { color: var(--purple); border-color: var(--purple-border); background: var(--purple-soft); }
.cms-tr-chip.purple::before { background: var(--purple); }
.cms-tr-chip.amber { color: var(--amber); border-color: var(--amber-border); background: var(--amber-soft); }
.cms-tr-chip.amber::before { background: var(--amber); }
.cms-tr-chip.green { color: var(--green); border-color: var(--green-border); background: var(--green-soft); }
.cms-tr-chip.green::before { background: var(--green); }
.cms-tr-chip.red { color: var(--red); border-color: var(--red-border); background: var(--red-soft); }
.cms-tr-chip.red::before { background: var(--red); }
.cms-tr-chip.mine { font-weight: 600; box-shadow: 0 0 0 2px var(--amber-soft); }
.cms-tr-count { color: var(--muted); }

.cms-tr { margin: 2px 0 12px 46px; }
.cms-tr.flat { margin: 2px 0 12px; }
.cms-tr-card {
  border: 1px solid var(--border); border-radius: var(--r-lg, 12px);
  background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden;
}
.cms-tr-card.turn { border-color: var(--amber-border); box-shadow: 0 0 0 3px var(--amber-soft); }
.cms-tr-head {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 10px 14px; border-bottom: 1px solid var(--border); background: var(--surface-2);
}
.cms-tr-flow { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 12px; color: var(--muted); }
.cms-tr-flow li { display: inline-flex; align-items: center; gap: 6px; }
.cms-tr-flow li + li::before { content: ""; width: 18px; height: 1px; background: var(--border-strong); margin-right: 2px; }
.cms-tr-flow li span {
  width: 18px; height: 18px; border-radius: 50%; display: inline-grid; place-items: center;
  font-size: 10px; font-weight: 600; border: 1px solid var(--border-strong); background: var(--surface);
}
.cms-tr-flow li.done { color: var(--green); }
.cms-tr-flow li.done span { background: var(--green); border-color: var(--green); color: #fff; }
.cms-tr-flow li.now { color: var(--text); font-weight: 600; }
.cms-tr-flow li.now span { background: var(--accent); border-color: var(--accent); color: #fff; }
.cms-tr-x { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; }
.cms-tr-x:hover { background: var(--bg); color: var(--text); }

.cms-tr-settings { position: relative; }
.cms-tr-settings > summary {
  list-style: none; cursor: pointer; font-size: 12px; color: var(--text-2);
  padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface);
}
.cms-tr-settings > summary::-webkit-details-marker { display: none; }
.cms-tr-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 260px;
  padding: 12px; border: 1px solid var(--border); border-radius: var(--r, 10px);
  background: var(--surface); box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 4px;
}
.cms-tr-pop .lbl { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cms-tr-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 0; cursor: pointer; }

.cms-tr-timeline { padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 10px; max-height: 420px; overflow-y: auto; }
.cms-tr-empty { font-size: 13px; color: var(--muted); padding: 6px 0 10px; }
.cms-tr-event { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; }
.cms-tr-dot { flex: 0 0 auto; align-self: flex-start; display: block; width: 10px; height: 10px; margin-top: 5px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.cms-tr-event.ok .cms-tr-dot { background: var(--green); box-shadow: 0 0 0 3px var(--green-soft); }
.cms-tr-event.back .cms-tr-dot { background: var(--red); box-shadow: 0 0 0 3px var(--red-soft); }
.cms-tr-ev-body { min-width: 0; flex: 1; }
.cms-tr-msg { display: flex; align-items: flex-start; gap: 10px; }
.cms-tr-av {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11px; font-weight: 700; background: var(--accent-soft); color: var(--accent);
}
.cms-tr-bubble { min-width: 0; flex: 1; padding: 8px 12px; border-radius: 4px 12px 12px 12px; background: var(--surface-2); border: 1px solid var(--border); }
.cms-tr-who { color: var(--text); }
.cms-tr-text { font-size: 13px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; margin-top: 2px; color: var(--text); }
.cms-tr-text a { color: var(--accent); }

.cms-tr-compose { padding: 10px 14px 12px; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 8px; }
.cms-tr-hint { font-size: 12px; color: var(--muted); }
.cms-tr-hint.turn { color: var(--amber); font-weight: 600; }
.cms-tr-error { font-size: 12px; font-weight: 600; color: var(--red); background: var(--red-soft); border: 1px solid var(--red-border); border-radius: 8px; padding: 7px 10px; }
.cms-tr-input { min-height: 56px; resize: none; }
.cms-tr-links .input { width: 100%; }
.cms-tr-filelist:empty { display: none; }
.cms-tr-bar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cms-tr-tool {
  display: inline-flex; align-items: center; gap: 5px; font: inherit; font-size: 12px; color: var(--text-2);
  padding: 5px 9px; border-radius: 8px; border: 1px solid transparent; background: none; cursor: pointer;
}
.cms-tr-tool:hover { background: var(--bg); border-color: var(--border); }
.cms-tr-qa { width: auto; max-width: 220px; font-size: 12px; }
@media (max-width: 640px) {
  .cms-tr { margin-left: 0; }
  .cms-tr-bar .spacer { flex-basis: 100%; height: 0; }
}

/* ======================================================================
   Add / edit task form (0.4.137)
   ====================================================================== */
.task-add > summary { list-style: none; display: inline-flex; }
.task-add > summary::-webkit-details-marker { display: none; }
.task-add[open] > summary { display: none; }
.cms-taskform {
  margin-top: 4px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg, 12px);
  background: var(--surface); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px;
}
.cms-tf-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.cms-tf-title { flex: 1 1 320px; font-size: 15px; font-weight: 550; padding: 10px 12px; }
.cms-seg { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cms-seg label { position: relative; cursor: pointer; }
.cms-seg input { position: absolute; opacity: 0; pointer-events: none; }
.cms-seg span { display: block; padding: 6px 12px; font-size: 13px; border-radius: 7px; color: var(--text-2); }
.cms-seg input:checked + span { background: var(--surface); color: var(--text); font-weight: 600; box-shadow: var(--shadow-sm); }
.cms-seg input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
.cms-tf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px 12px; align-items: end; }
.cms-tf-grid .field, .cms-tf-extras .field { margin: 0; }
.cms-tf-grid .select, .cms-tf-grid .input, .cms-tf-grid .input-group { width: 100%; max-width: none; }
.cms-tf-wide { grid-column: 1 / -1; }
.cms-tf-group { border: 0; border-top: 1px solid var(--border); margin: 0; padding: 12px 0 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cms-tf-group > legend { padding: 0 8px 0 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.cms-tf-group textarea { min-height: 52px; resize: vertical; }
.cms-tf-extras { display: grid; grid-template-columns: minmax(0, 2fr) minmax(160px, 1fr); gap: 10px 12px; align-items: start; }
.cms-tf-links textarea { min-height: 38px; resize: none; }
.cms-tf-attach { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cms-tf-filelist { margin-top: 4px; overflow-wrap: anywhere; }
.cms-tf-filelist:empty { display: none; }
.cms-tf-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--border); }
@media (max-width: 640px) {
  .cms-tf-extras { grid-template-columns: 1fr; }
  .cms-tf-foot .spacer { flex-basis: 100%; height: 0; }
}
.cms-tf-group > legend .t-xs, .cms-tf-links label .t-xs { text-transform: none; letter-spacing: 0; font-weight: 400; }

/* 0.4.144: a file input hidden with display:none (the `hidden` attribute or an
   inline display:none) does not open the file chooser from its label in the
   installed app (PWA / Safari web app). Keep it rendered but invisible, so
   "Attach" works everywhere. */
input[type="file"][hidden],
input[type="file"][style*="display:none"],
input[type="file"][style*="display: none"] {
	display: block !important;
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	opacity: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}
label:has(> input[type="file"]) { position: relative; }

/* Task search in the top bar (0.4.148, suggestion #18). */
.tsearch { position: relative; flex: 0 1 240px; min-width: 150px; margin-right: 10px; display: flex; align-items: center; gap: 6px; padding: 0 10px; height: 34px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface, #fff); color: var(--text-2); }
.tsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(37, 99, 235, .12); }
.tsearch input { border: 0; outline: 0; background: transparent; font: inherit; font-size: 13px; color: var(--text); width: 100%; min-width: 0; }
.tsearch-list { position: absolute; top: calc(100% + 6px); left: 0; width: min(460px, 92vw); max-height: 60vh; overflow: auto; background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .16); z-index: 60; padding: 4px; }
.tsearch-item { display: block; padding: 8px 10px; border-radius: 8px; text-decoration: none; color: var(--text); }
.tsearch-item:hover, .tsearch-item.on { background: var(--surface-2, #f1f5f9); }
.tsearch-item.done .tsearch-t { color: var(--text-2); text-decoration: line-through; }
.tsearch-t { display: block; font-size: 13.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsearch-s { display: block; font-size: 12px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tsearch-empty { padding: 10px; font-size: 13px; color: var(--text-2); }
@media (max-width: 860px) { .tsearch { flex-basis: 140px; } }
@media (max-width: 560px) { .tsearch { display: none; } }
/* 0.4.151: with the task search in the bar, the ARR strip gives way first
   instead of drawing over the page name. */
.arr-strip { overflow: hidden; }
@media (max-width: 1500px) { .arr-strip .arr-bar, .arr-strip .arr-msg { display: none; } }
@media (max-width: 1180px) { .arr-strip { display: none; } }

/* 0.4.154: project status picker (project header + Projects list rows). */
.cms-ps { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0; }
.cms-ps-row { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.cms-ps-sel { width: auto; max-width: 240px; }
.cms-ps.compact .cms-ps-sel { max-width: 230px; font-size: 12px; }
.cms-ps-hold:not([hidden]) { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cms-ps-hold .input { width: auto; min-width: 180px; }
.cms-ps-hold .input[type="date"] { min-width: 0; }

/* =====================================================================
   0.4.156 (suggestion #30): Discussions look like WhatsApp -- wallpaper,
   white / green bubbles with a tail, name + avatar once per run, time
   inside the bubble, day dividers, actions on hover, pill composer.
   ================================================================== */
.cms-disc-thread .cms-disc-messages {
	background-color: #efeae2;
	background-image: radial-gradient(rgba(0, 0, 0, .045) 1px, transparent 1px);
	background-size: 18px 18px;
	gap: 2px;
	padding: 12px 6%;
}
.cms-disc-msg { max-width: min(75%, 560px); gap: 6px; margin-top: 8px; align-items: flex-start; }
.cms-disc-msg.cont { margin-top: 0; }
.cms-disc-msg .avatar { width: 30px; height: 30px; font-size: 11px; flex: 0 0 30px; border-radius: 50%; }
.cms-disc-msg.mine .avatar { display: none; }
.cms-disc-msg.cont .avatar { visibility: hidden; height: 0; }
.cms-disc-bubble {
	position: relative;
	background: #fff;
	border-radius: 8px;
	padding: 6px 9px 8px;
	box-shadow: 0 1px .5px rgba(11, 20, 26, .13);
	min-width: 72px;
}
.cms-disc-msg.mine .cms-disc-bubble { background: #d9fdd3; }
/* the tail, on the first bubble of a run */
.cms-disc-msg:not(.cont) .cms-disc-bubble { border-top-left-radius: 0; }
.cms-disc-msg:not(.cont) .cms-disc-bubble::before {
	content: ""; position: absolute; top: 0; left: -7px;
	border-style: solid; border-width: 0 8px 9px 0; border-color: transparent #fff transparent transparent;
}
.cms-disc-msg.mine:not(.cont) .cms-disc-bubble { border-top-left-radius: 8px; border-top-right-radius: 0; }
.cms-disc-msg.mine:not(.cont) .cms-disc-bubble::before {
	left: auto; right: -7px; border-width: 0 0 9px 8px; border-color: transparent transparent transparent #d9fdd3;
}
.cms-disc-meta { margin-bottom: 1px; }
.cms-disc-who { font-size: 12.5px; font-weight: 600; }
.cms-disc-msg.mine .cms-disc-meta, .cms-disc-msg.cont .cms-disc-meta { display: none; }
.cms-disc-body { font-size: 14px; line-height: 1.4; color: #111b21; padding-right: 58px; }
.cms-disc-time {
	position: absolute; right: 8px; bottom: 4px;
	font-size: 11px; color: #667781; white-space: nowrap; line-height: 1;
}
.cms-disc-bubble .attachments, .cms-disc-bubble .cms-disc-img { margin-bottom: 12px; }
/* reactions sit under the text; the tools appear on hover */
.cms-disc-reactions { margin-top: 2px; gap: 4px; min-height: 0; }
.cms-disc-reactions:not(:has(.cms-react-chip)) { margin: 0; }
.cms-react-chip { background: #fff; border-color: rgba(0, 0, 0, .08); box-shadow: 0 1px 1px rgba(0, 0, 0, .06); font-size: 12px; }
.cms-disc-bubble .cms-react-add,
.cms-disc-bubble .cms-disc-convert,
.cms-disc-bubble .cms-disc-del {
	position: absolute; top: -12px; opacity: 0; pointer-events: none;
	background: #fff; border: 1px solid rgba(0, 0, 0, .1); border-radius: 999px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .12); height: 24px; padding: 0 8px;
	font-size: 11.5px; text-decoration: none; transition: opacity .12s; width: auto; color: #54656f;
}
.cms-disc-bubble .cms-react-add { right: 8px; }
.cms-disc-bubble .cms-react-add::after { content: " 🙂"; }
.cms-disc-bubble .cms-disc-convert { right: 54px; color: var(--accent); }
.cms-disc-bubble .cms-disc-del { right: 118px; color: var(--red, #b42318); }
.cms-disc-msg.mine .cms-disc-bubble .cms-react-add { right: auto; left: 8px; }
.cms-disc-msg.mine .cms-disc-bubble .cms-disc-convert { right: auto; left: 54px; }
.cms-disc-msg.mine .cms-disc-bubble .cms-disc-del { right: auto; left: 118px; }
.cms-disc-msg:hover .cms-react-add, .cms-disc-msg:hover .cms-disc-convert, .cms-disc-msg:hover .cms-disc-del,
.cms-disc-msg:focus-within .cms-react-add, .cms-disc-msg:focus-within .cms-disc-convert, .cms-disc-msg:focus-within .cms-disc-del { opacity: 1; pointer-events: auto; z-index: 2; }
@media (hover: none) {
	.cms-disc-bubble .cms-react-add, .cms-disc-bubble .cms-disc-convert, .cms-disc-bubble .cms-disc-del { position: static; opacity: 1; pointer-events: auto; height: 22px; margin-top: 4px; }
}
.cms-disc-msg.mentions-me .cms-disc-bubble { box-shadow: 0 1px .5px rgba(11, 20, 26, .13), inset 3px 0 0 var(--amber); }
.cms-disc-body .mention { color: #027eb5; font-weight: 600; }
.cms-disc-body .mention.me { background: #fff3c4; color: #8a5a00; }
/* day divider + system lines */
.cms-disc-day { display: flex; justify-content: center; margin: 12px 0 6px; position: sticky; top: 4px; z-index: 3; }
.cms-disc-day span {
	background: #fff; color: #54656f; font-size: 12px; padding: 5px 12px; border-radius: 8px;
	box-shadow: 0 1px .5px rgba(11, 20, 26, .13); text-transform: none;
}
.cms-disc-sys { margin: 6px auto; background: #fff8c5; color: #54656f; padding: 4px 10px; border-radius: 8px; box-shadow: 0 1px .5px rgba(11, 20, 26, .1); max-width: 80%; }
/* composer: a pill with the tools inside, round send button */
.cms-disc-thread .cms-disc-composer { background: #f0f2f5; border-top: 0; padding: 8px 12px; gap: 8px; align-items: center; }
.cms-disc-thread .cms-disc-composer textarea {
	border-radius: 22px; border: 0; padding: 10px 16px; min-height: 42px; max-height: 140px;
	font-size: 14px; background: #fff; box-shadow: none; line-height: 1.4;
}
.cms-disc-thread .cms-disc-composer .cms-emoji-btn { border: 0; background: transparent; font-size: 20px; padding: 4px; box-shadow: none; }
.cms-disc-thread .cms-disc-composer button[type="submit"] {
	width: 42px; height: 42px; border-radius: 50%; padding: 0; flex: 0 0 42px;
	background: #00a884; border-color: #00a884; font-size: 0; position: relative;
}
.cms-disc-thread .cms-disc-composer button[type="submit"]::after {
	content: ""; position: absolute; inset: 0; margin: auto; width: 20px; height: 20px;
	background: #fff;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 21l21-9L2 3v7l15 2-15 2z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cms-disc-thread .cms-disc-attach { padding-left: 40px; }
.cms-disc-thread .cms-disc-col-head { background: #f0f2f5; }
/* channel list: round initials, green unread */
.cms-disc-channels .cms-disc-item { padding: 10px; border-radius: 8px; }
.cms-disc-channels .cms-disc-item .n::before {
	content: attr(data-initial); display: inline-flex; align-items: center; justify-content: center;
	width: 32px; height: 32px; border-radius: 50%; background: #dfe5e7; color: #54656f;
	font-weight: 600; font-size: 13px; margin-right: 10px; vertical-align: middle;
}
.cms-disc-channels .cms-disc-item.active { background: #f0f2f5; }
.cms-disc-unread-dot { background: #25d366; width: 10px; height: 10px; }

/* 0.4.157: document links + billing form. */
.cms-doc-links { font-size: 12px; white-space: nowrap; }
.cms-doc-links a { color: var(--accent); }
.cms-bill-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.cms-bill-grid .field.wide { grid-column: 1 / -1; }
@media (max-width: 640px) { .cms-bill-grid { grid-template-columns: 1fr; } }
.cms-bill-schedule { border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; background: var(--bg); }

/* 0.4.158: quick-reason chips on Close my day. */
.chip { border: 1px solid var(--border); background: var(--surface); border-radius: 999px; padding: 3px 10px; font-size: 12px; cursor: pointer; color: var(--text); }
.chip:hover { border-color: var(--accent); color: var(--accent); }

/* 0.4.158: the one task Edit panel. */
.cms-te-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 8px; }
.cms-te-grid > .field:first-child { grid-column: span 2; }
.cms-te-grid .field { margin: 0; }
.cms-task-edit .lbl { font-size: 11px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; display: block; margin-bottom: 4px; }