html {
  font-size: 14px;
}

:root {
  /* Approx sticky-header height (navbar + its mb-3) on wide screens; used to
     offset sticky content like the filter rail so it clears the pinned header. */
  --header-h: 4.35rem;
  /* Width of the left filter rail (.page-with-filters aside); shared so the Task
     Planner sub-nav pill can align to the same column width. */
  --filter-rail-w: 268px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

/* =========================================================================
   Canonical badge vocabulary (ADR 0016) — one look per Status/Priority value.
   Class chosen server-side by Domain/BadgeStyles.cs; colour comes from tokens.
   ========================================================================= */
.badge-soft {
  --badge-color: var(--neutral);
  --badge-rgb: var(--neutral-rgb);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .28em .62em;
  font-size: .75rem;
  font-weight: 600;
  line-height: 1.35;
  border-radius: var(--radius-sm);
  color: var(--badge-color);
  background-color: rgba(var(--badge-rgb), .12);
  border: 1px solid rgba(var(--badge-rgb), .24);
  white-space: nowrap;
}

.badge-soft--neutral { --badge-color: var(--neutral);  --badge-rgb: var(--neutral-rgb); }.badge-soft--accent  { --badge-color: var(--accent);   --badge-rgb: var(--accent-rgb); }
.badge-soft--success { --badge-color: var(--success);  --badge-rgb: var(--success-rgb); }
.badge-soft--warning { --badge-color: var(--warning);  --badge-rgb: var(--warning-rgb); }
.badge-soft--danger  { --badge-color: var(--danger);   --badge-rgb: var(--danger-rgb); }

/* Priority badges carry a leading dot so they read as a distinct axis from
   Status even when both resolve to neutral (grilling feedback). */
.badge-soft--dot::before {
  content: "";
  width: .5em;
  height: .5em;
  border-radius: 50%;
  background-color: currentColor;
  flex: 0 0 auto;
}

/* Solid badge — the loud end (High/Critical priority). Fixed deep hues so white
   text stays legible on both themes. */
.badge-solid {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .28em .62em;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.35;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  color: #fff;
}
.badge-solid--danger  { background-color: #C0442E; }
.badge-solid--warning { background-color: #A96E12; }

/* Muted: dropped/no-bid RFx states and the Archived flag — present, de-emphasised. */
.badge-soft--muted {
  --badge-color: var(--text-faint);
  color: var(--text-faint);
  background-color: var(--surface-sunken);
  border-color: var(--border);
}

/* Chip: neutral tag for Category and Goal-membership labels (often a link). */
.chip {
  display: inline-flex;
  align-items: center;
  padding: .22em .58em;
  font-size: .75rem;
  font-weight: 500;
  line-height: 1.35;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
  text-decoration: none;
  white-space: nowrap;
}
a.chip:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* DCP time-punch chip (ADR 0040, slice 3): a status pill + an action button, driven by
   dcp-punch.js. Kept lean; the rich timeline panel arrives in later slices. */
.dcp-punch {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.dcp-punch__chip {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .24em .6em;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.35;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background-color: var(--surface-sunken);
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
}
.dcp-punch__chip--off:hover { border-color: var(--accent); color: var(--accent); }
.dcp-punch__chip--live {
  color: var(--success);
  background-color: var(--success-subtle);
  border-color: rgba(var(--success-rgb), .35);
}
.dcp-punch__chip--warn {
  color: var(--warning);
  background-color: var(--warning-subtle);
  border-color: rgba(var(--warning-rgb), .35);
}
.dcp-punch__elsewhere {
  color: inherit;
  font-weight: 600;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
  cursor: help;
}
.dcp-punch__elsewhere[href] { cursor: pointer; }
.dcp-punch__elsewhere:hover,
.dcp-punch__elsewhere:focus-visible { text-decoration-style: solid; }
.dcp-punch__dot {
  width: .55em;
  height: .55em;
  border-radius: 50%;
  background-color: var(--text-muted);
  flex-shrink: 0;
}
.dcp-punch__dot--live { background-color: var(--success); animation: dcp-pulse 1.6s ease-in-out infinite; }
.dcp-punch__dot--warn { background-color: var(--warning); }
.dcp-punch__today { font-size: .72rem; color: var(--text-muted); align-self: center; }

/* Solid, theme-aligned action buttons (used by the punch chip + the shared confirm modal).
   Bootstrap's .btn gives sizing/shape; these override only the colors with theme tokens so
   they track light/dark and the brand accent instead of Bootstrap's stock blue/red. */
.btn-accent {
  color: var(--accent-contrast);
  background-color: var(--accent);
  border-color: var(--accent);
}
.btn-accent:hover, .btn-accent:focus-visible {
  color: var(--accent-contrast);
  background-color: var(--accent-strong);
  border-color: var(--accent-strong);
}
.btn-danger-solid {
  color: #fff;
  background-color: var(--danger);
  border-color: var(--danger);
}
.btn-danger-solid:hover, .btn-danger-solid:focus-visible {
  color: #fff;
  background-color: rgba(var(--danger-rgb), .85);
  border-color: rgba(var(--danger-rgb), .85);
}
@keyframes dcp-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .dcp-punch__dot--live { animation: none; }
}

/* DCP read-only day timeline panel (ADR 0040, slice 4): an in-flow expandable SVG day view
   with pan/zoom + a day picker. Editing (draw/carve) is a later slice. */
.dcp-timeline { display: block; width: 100%; }
/* One row: the live punch chip/controls sit left; today's total + the “Show timeline”
   toggle are pushed to the right, away from the per-second timer so it can't jostle them. */
.dcp-timeline__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .9rem;
}
.dcp-timeline__headmeta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .9rem;
}
/* Fixed-width digits so the ticking timer doesn't reflow its own cluster each second. */
.dcp-punch [data-timer] { font-variant-numeric: tabular-nums; }
.dcp-timeline--full { flex: 1 1 100%; width: 100%; }
.dcp-timeline__toggle {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  padding: .2em .1em;
  font-size: .78rem;
  font-weight: 500;
  color: var(--accent);
  background: none;
  border: 0;
  cursor: pointer;
}
.dcp-timeline__toggle:hover { color: var(--accent-strong); }
.dcp-timeline__panel {
  margin-top: .4rem;
  padding: .5rem .6rem .6rem;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  background-color: var(--surface-card);
  width: 100%;
}
.dcp-timeline__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .4rem;
}
.dcp-timeline__day, .dcp-timeline__zoom { display: inline-flex; align-items: center; gap: .25rem; }
.dcp-timeline__daylabel { font-size: .8rem; font-weight: 600; margin-left: .35rem; }
.dcp-tl-daybtn { min-width: 8rem; font-weight: 600; }
.dcp-tl-daybtn .dcp-timeline__daylabel { margin: 0; font-size: inherit; }
.dcp-tl-btn {
  min-width: 1.7rem;
  padding: .12rem .45rem;
  font-size: .78rem;
  line-height: 1.4;
  color: var(--text-muted);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.dcp-tl-btn:hover { border-color: var(--accent); color: var(--accent); }
.dcp-tl-btn:disabled { opacity: .45; cursor: not-allowed; }
.dcp-tl-btn:disabled:hover { border-color: var(--border); color: var(--text-muted); }
/* Solid, theme-aligned modal buttons (edit popup). */
.dcp-tl-btn--go { color: var(--accent-contrast); background-color: var(--accent); border-color: var(--accent); }
.dcp-tl-btn--go:hover { color: var(--accent-contrast); background-color: var(--accent-strong); border-color: var(--accent-strong); }
.dcp-tl-btn--del { color: #fff; background-color: var(--danger); border-color: var(--danger); }
.dcp-tl-btn--del:hover { color: #fff; background-color: rgba(var(--danger-rgb), .85); border-color: rgba(var(--danger-rgb), .85); }
.dcp-tl-btn--edit.is-on { color: var(--accent-contrast); background-color: var(--accent); border-color: var(--accent); }
.dcp-tl-btn--danger:hover { border-color: var(--danger); color: var(--danger); }
.dcp-timeline__stage { position: relative; }
/* Async loading skeleton (slice 8): a shimmer veil over the day axis while fetching. */
.dcp-timeline__stage.is-loading::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-sm);
  background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-card) 50%, var(--surface-sunken) 75%);
  background-size: 200% 100%;
  animation: dcp-shimmer 1.1s ease-in-out infinite;
}
@keyframes dcp-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .dcp-timeline__stage.is-loading::after { animation: none; }
}
.dcp-timeline__svg {
  display: block;
  width: 100%;
  height: 112px;
  touch-action: none;
  user-select: none;
  cursor: grab;
}
.dcp-timeline__svg.is-panning { cursor: grabbing; }
.dcp-timeline__svg.is-editing { cursor: text; }
.dcp-timeline__status { font-size: .75rem; color: var(--text-muted); min-height: 1.1em; margin-top: .25rem; }

/* Single-lane legend (feedback): colour key for existing vs other-task vs new time */
.dcp-timeline__legend { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; flex: 1 1 auto; justify-content: flex-start; margin: 0 0 0 .75rem; }
.dcp-tl-key { display: inline-flex; align-items: center; gap: .35em; font-size: .72rem; color: var(--text-muted); }
.dcp-tl-key::before { content: ""; width: .7em; height: .7em; border-radius: 2px; border: 1px solid; }
.dcp-tl-key--mine::before { background: rgba(var(--accent-rgb), .8); border-color: var(--accent-strong); }
.dcp-tl-key--open::before { background: rgba(var(--accent-rgb), .18); border: 1px dashed var(--accent-strong); }
.dcp-tl-key--obstacle::before { background: var(--border-strong); border-color: var(--text-muted); }
.dcp-tl-key--draft::before { background: rgba(var(--success-rgb), .55); border-color: var(--success); }
.dcp-tl-key--overlap::before { background: rgba(var(--warning-rgb), .85); border-color: var(--warning); }
.dcp-tl-key--lunch::before { background: rgba(var(--neutral-rgb), .22); border: 1px dashed var(--neutral); }

/* Edit mode: shared comment + draft total + clear (slice 5) */
.dcp-timeline__edit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin-top: .45rem;
}
.dcp-tl-shared {
  flex: 1 1 12rem;
  min-width: 8rem;
  margin-right: 1.8rem;
  padding: .18rem .5rem;
  font-size: .8rem;
  color: var(--text);
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.dcp-tl-total { font-size: .75rem; color: var(--text-muted); }

/* Panel-driven punch-out confirm + reconcile banner (slice 6) */
.dcp-timeline__confirm {
  margin-top: .5rem;
  padding: .5rem .6rem;
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
  background-color: var(--accent-subtle);
}
.dcp-timeline__confirm-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; }
.dcp-timeline__confirm-msg { font-size: .82rem; font-weight: 500; }
.dcp-timeline__confirm-actions { display: inline-flex; gap: .4rem; }
.dcp-timeline__banner {
  margin-bottom: .4rem;
  padding: .35rem .5rem;
  font-size: .78rem;
  color: var(--warning);
  background-color: var(--warning-subtle);
  border: 1px solid rgba(var(--warning-rgb), .4);
  border-radius: var(--radius-sm);
}

/* Per-segment popover (slice 5) */
.dcp-timeline__popover {
  position: absolute;
  z-index: 20;
  width: 15rem;
  padding: .55rem .6rem;
  background-color: var(--surface-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
}
.dcp-tl-pop__row { display: flex; gap: .5rem; margin-bottom: .4rem; }
.dcp-tl-pop__row label, .dcp-tl-pop__comment {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  font-size: .72rem;
  color: var(--text-muted);
  flex: 1;
  min-width: 0;
}
.dcp-tl-pop__comment { margin-bottom: .5rem; }
.dcp-timeline__popover input {
  width: 100%;
  box-sizing: border-box;
  padding: .16rem .4rem;
  font-size: .8rem;
  color: var(--text);
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
/* A time field, but no mouse picker/spinner — keyboard entry only (HH:MM). */
/* A time field, but no mouse picker/spinner — keyboard entry only (HH:MM). */
.time-nopicker::-webkit-calendar-picker-indicator,
.time-nopicker::-webkit-inner-spin-button,
.time-nopicker::-webkit-clear-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  margin: 0;
}
.dcp-timeline__popover input[type="time"]::-webkit-calendar-picker-indicator,
.dcp-timeline__popover input[type="time"]::-webkit-inner-spin-button,
.dcp-timeline__popover input[type="time"]::-webkit-clear-button {
  -webkit-appearance: none;
  appearance: none;
  display: none;
  margin: 0;
}
.dcp-tl-pop__actions { display: flex; justify-content: space-between; gap: .4rem; }
.dcp-tl-pop__err { color: var(--danger); font-size: .72rem; margin: -.1rem 0 .45rem; }
.dcp-tl-pop__warn {
  color: var(--warning);
  background: var(--warning-subtle);
  border: 1px solid rgba(var(--warning-rgb), .4);
  border-radius: var(--radius-sm);
  font-size: .72rem;
  padding: .3rem .45rem;
  margin-bottom: .5rem;
}
.dcp-timeline__delpop { width: auto; max-width: 18rem; }
.dcp-timeline__delpop-label { display: block; margin-bottom: .5rem; font-size: .8rem; }

/* SVG primitives */
.dcp-tl-grid { stroke: var(--border); stroke-width: 1; }
.dcp-tl-hour { fill: var(--text-muted); font-size: 9px; }
.dcp-tl-lane { fill: var(--surface-sunken); }
.dcp-tl-nowline { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 2 2; pointer-events: none; }
/* Locked lunch window (ADR 0040): a muted, non-interactive break the timeline carves around. */
.dcp-tl-lunch { fill: rgba(var(--neutral-rgb), .22); stroke: var(--neutral); stroke-width: 1; stroke-dasharray: 3 2; pointer-events: none; }
.dcp-tl-lunchtext { fill: var(--text-muted); font-size: 10px; font-weight: 600; pointer-events: none; }
.dcp-tl-lanelabel { fill: var(--text-muted); font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; }
.dcp-tl-bar { stroke-width: 1; }
.dcp-tl-bar--mine { fill: rgba(var(--accent-rgb), .8); stroke: var(--accent-strong); }
.dcp-tl-bar--obstacle { fill: var(--border-strong); stroke: var(--text-muted); opacity: .7; }
.dcp-tl-bar--obstacle:hover { opacity: .95; }
/* An “Other task” obstacle with a staged edit: stays grey, but a warning outline flags it. */
.dcp-tl-bar--otheredit { stroke: var(--warning); stroke-width: 1.5; stroke-dasharray: 3 2; opacity: .95; }
.dcp-tl-bar--open { stroke-dasharray: 3 2; }
.dcp-tl-bartext { font-size: 10px; pointer-events: none; }
.dcp-tl-bartext--mine { fill: var(--accent-contrast); }
.dcp-tl-bartext--obstacle { fill: var(--text); }
.dcp-tl-bartext--sub { font-size: 9px; opacity: .8; }
/* Corner “open in DCP” icon on a bar — hidden until you hover the segment, no chrome. */
.dcp-tl-link { cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.dcp-tl-link--mine { color: var(--accent-contrast); }
.dcp-tl-link--other { color: var(--text-muted); }
.dcp-tl-seg:hover .dcp-tl-link { opacity: 1; pointer-events: auto; }
.dcp-tl-link:hover { opacity: 1; }
.dcp-tl-link--other:hover { color: var(--text); }
/* Draft (proposed) segments, live ghost preview, and the click-click start marker (slice 5) */
.dcp-tl-draft { fill: rgba(var(--success-rgb), .55); stroke: var(--success); stroke-width: 1.5; }
/* Editable punch-out bar (the open entry, during the punch-out confirm): a stronger green so it
   reads as “the entry you're closing”, draggable borders + a click popover. */
.dcp-tl-po { fill: rgba(var(--success-rgb), .7); stroke: var(--success); stroke-width: 1.5; }
/* Where the punch-out span overlaps this task's own already-logged time, and anywhere two of
   the user's own logged entries overlap (DCP-web allows it): an orange warning to draw attention. */
.dcp-tl-overlap { fill: rgba(var(--warning-rgb), .85); stroke: var(--warning); stroke-width: 1; pointer-events: none; }
.dcp-tl-ghost { fill: rgba(var(--accent-rgb), .28); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 4 2; pointer-events: none; }
.dcp-tl-pending { stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 3 2; pointer-events: none; }
/* Draft resize handles: drag a border to adjust the time (5-min steps). */
.dcp-tl-handle { fill: var(--accent-strong); opacity: .85; cursor: ew-resize; }
.dcp-tl-handle:hover { opacity: 1; }
/* Pending state: a segment being written (add / edit / delete / punch-out) pulses in place
   instead of shimmering the whole timeline (which flickers while the user is reading it). */
.dcp-tl-pending { animation: dcp-tl-pulse 1s ease-in-out infinite; }
@keyframes dcp-tl-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .4; } }
@media (prefers-reduced-motion: reduce) { .dcp-tl-pending { animation: none; opacity: .7; } }

/* Holder link chips (RFx, ADR 0027): zero or more clickable pills with edit/remove
   affordances; each has an anchored popover edit form. Reused read-only (no controls). */
.holder-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
}
.holder-link { position: relative; }
.holder-link__view {
  display: inline-flex;
  align-items: center;
}
.holder-chip {
  display: inline-flex;
  align-items: center;
  gap: .1rem;
  max-width: 100%;
  padding: .1rem .2rem .1rem .5rem;
  border-radius: var(--radius-pill);
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
}
.holder-chip__link {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
  padding: .15rem .1rem;
  font-size: .85rem;
  color: var(--accent);
  text-decoration: none;
}
.holder-chip__link:hover { text-decoration: underline; }
.holder-chip__link > svg { flex: 0 0 auto; }
.holder-chip__link > span {
  min-width: 0;
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.holder-chip__act {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 1.45rem;
  height: 1.45rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.holder-chip__act:hover { background-color: var(--border); color: var(--text); }
.holder-chip__form { display: inline-flex; margin: 0; }
.holder-link__edit {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 1056;
  margin-top: .4rem;
  min-width: min(26rem, 88vw);
  padding: .75rem;
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
}

/* =========================================================================
   Table chrome — shared row/hover/header treatment across every list.
   ========================================================================= */
.table > tbody > tr {
  transition: background-color var(--transition);
}
.table > :not(caption) > * > * {
  padding: .45rem .75rem;
}

/* =========================================================================
   Empty states — one friendly treatment app-wide.
   ========================================================================= */
.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  background-color: var(--surface-card);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-lg);
}
.empty-state__icon {
  font-size: 1.75rem;
  line-height: 1;
  opacity: .5;
  margin-bottom: .5rem;
}
.empty-state__title {
  font-weight: 600;
  color: var(--text);
  margin-bottom: .25rem;
}
.empty-state__hint {
  font-size: .875rem;
  margin-bottom: 1rem;
}
.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(var(--accent-rgb), 0.25);
}

html {
  min-height: 100%;
}

body {
  margin-bottom: 0;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* --- Kanban board --- */
.kanban-board {
  display: flex;
  gap: 1rem;
  align-items: stretch;
  min-height: 300px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: .5rem;
  scrollbar-width: thin;
}

.kanban-column {
  flex: 1 0 280px;
  min-width: 280px;
  min-height: 0;
  background-color: var(--bs-tertiary-bg);
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  padding: .5rem;
  display: flex;
  flex-direction: column;
}

/* Per-column collapse toggles (Improvement 7). ------------------------------ */
.kanban-column-actions {
  display: flex;
  gap: .25rem;
  margin-left: auto;
}
.kanban-col-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--bs-border-color);
  background: var(--bs-body-bg);
  color: var(--bs-secondary-color);
  cursor: pointer;
  font-size: .9rem;
  line-height: 1;
  border-radius: .3rem;
  transition: background-color .12s ease, color .12s ease;
}
.kanban-col-btn:hover {
  background: var(--bs-secondary-bg);
  color: var(--bs-body-color);
  border-color: var(--bs-secondary-color);
}

/* Vertical collapse: fold away the cards; the column shrinks to its header and
   no longer stretches to the board height. */
.kanban-column.is-collapsed-v {
  align-self: flex-start;
}
.kanban-column.is-collapsed-v > .kanban-dropzone {
  display: none;
}

/* Horizontal collapse: fold to a narrow strip with a rotated label; click the
   strip (or the toggle) to expand again. */
.kanban-column.is-collapsed-h {
  flex: 0 0 auto;
  width: 2.6rem;
  min-width: 2.6rem;
  cursor: pointer;
}
.kanban-column.is-collapsed-h > .kanban-dropzone {
  display: none;
}
.kanban-column.is-collapsed-h .badge-soft,
.kanban-column.is-collapsed-h .kanban-column-actions {
  display: none;
}
.kanban-column.is-collapsed-h .kanban-column-header {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  justify-content: flex-end;
  align-items: center;
  flex: 1 1 auto;
  padding: .5rem .25rem;
  gap: .5rem;
}

.kanban-column-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  padding: .25rem .5rem .5rem;
}

.kanban-dropzone {
  min-height: 0;
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  border-radius: .375rem;
  padding: .25rem;
  transition: background-color .12s ease;
}

.kanban-dropzone.drag-over {
  background-color: var(--bs-secondary-bg);
  outline: 2px dashed var(--bs-border-color);
}

.kanban-card {
  cursor: grab;
  position: relative;
  transition: box-shadow var(--transition);
}
.kanban-card:hover { box-shadow: var(--shadow); }
/* Read-only board (viewer can't change status, ADR 0025): cards aren't draggable,
   so don't imply they are. */
.kanban-board--readonly .kanban-card { cursor: default; }
/* Corner pip: a quiet urgency marker (priority for Tasks, deadline for RFx) shown
   only when it matters, so the board stays calm. */
.kanban-card__pip {
  position: absolute;
  top: .55rem;
  right: .55rem;
  width: .5rem;
  height: .5rem;
  border-radius: 50%;
  z-index: 2;
  pointer-events: none;
}
.kanban-card__pip--danger { background-color: var(--danger); }
.kanban-card__pip--warning { background-color: var(--warning); }
.kanban-card__title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--text);
}

.kanban-card.dragging {
  opacity: .5;
}
/* =========================================================================
   Workbench sub-nav (Task Planner: Tasks | Private Tasks | Goals) — reuses the
   Details-page pill look (.detail-nav) so the app's section navs feel identical.
   ========================================================================= */
.workbench-nav {
  display: inline-flex;
  flex-wrap: wrap;
  gap: .2rem;
  padding: .3rem;
  margin-bottom: 1rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
/* Align the pill bar to the filter rail's column width so their edges line up. */
@media (min-width: 992px) {
  .workbench-nav {
    display: flex;
    width: var(--filter-rail-w);
  }
  /* Stretch the pills to fill the bar so there's no dead space on the right. */
  .workbench-nav .workbench-nav__tab {
    flex: 1 1 0;
    justify-content: center;
  }
}
.workbench-nav__tab {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .9rem;
  border-radius: var(--radius-pill);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background-color var(--transition);
}
.workbench-nav__tab:hover {
  color: var(--accent);
  background-color: var(--accent-subtle);
}
.workbench-nav__tab.is-active {
  color: var(--accent-contrast);
  background-color: var(--accent);
}

/* =========================================================================
   Top navbar — active link marking + brand.
   ========================================================================= */
/* Keep the header pinned to the top while the page scrolls (Improvement 2).
   Sticky must live on <header> — its parent is <body> (full page height), giving
   it scroll range; the inner .navbar's parent is only navbar-tall, so it wouldn't. */
header {
  position: sticky;
  top: 0;
  z-index: 1030;
  background: var(--bs-body-bg);
}
.navbar-brand {
  font-weight: 700;
  color: var(--accent);
}
.brand-logo {
  height: 1.75rem;
  width: 1.75rem;
  flex: 0 0 auto;
}
.brand-logo--dark { display: none; }
[data-bs-theme="dark"] .brand-logo--light { display: none; }
[data-bs-theme="dark"] .brand-logo--dark { display: inline-block; }

/* =========================================================================
   Signed-out landing hero + feature highlights.
   ========================================================================= */
.hero-logo {
  height: 4.5rem;
  width: 4.5rem;
}
.hero-logo--dark { display: none; }
[data-bs-theme="dark"] .hero-logo--light { display: none; }
[data-bs-theme="dark"] .hero-logo--dark { display: inline-block; }

.landing__lead {
  max-width: 44rem;
  margin-inline: auto;
}
.landing__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  max-width: 56rem;
  margin: 3rem auto 0;
}
@media (min-width: 768px) {
  .landing__features { grid-template-columns: repeat(3, 1fr); }
}
.landing__feature {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.1rem 1.15rem;
  text-align: left;
}
.landing__feature-title {
  font-weight: 700;
  margin-bottom: .3rem;
  color: var(--accent);
}
.landing__feature p {
  margin: 0;
  font-size: .9rem;
  color: var(--text-muted);
}
.navbar .nav-link {
  font-weight: 500;
  color: var(--text-muted);
  border-radius: var(--radius-sm);
  padding-inline: .7rem;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
}
.nav-link__icon { opacity: .85; flex: 0 0 auto; }
.navbar .nav-link.active .nav-link__icon { opacity: 1; }
.navbar .nav-link:hover {
  color: var(--text);
}
.navbar .nav-link.active {
  color: var(--accent);
  background-color: var(--accent-subtle);
}

/* =========================================================================
   App shell — full-width container (ADR 0018), capped for readability.
   ========================================================================= */
.app-container {
  width: 100%;
  max-width: 1140px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}
.app-container--wide {
  max-width: 1720px;
}
@media (max-width: 575.98px) {
  .app-container { padding-inline: 1rem; }
}

/* =========================================================================
   Goal timeline (milestone view): a vertical spine with a dot per Goal at its
   Target Date, grouped by month, plus a "no target date" tray.
   ========================================================================= */
.goal-timeline { position: relative; margin-top: .25rem; }
.goal-timeline__month {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  margin: 1.4rem 0 .55rem;
  padding-left: 2.1rem;
}
.goal-timeline > .goal-timeline__month:first-child { margin-top: 0; }
.goal-timeline__item {
  display: grid;
  grid-template-columns: 2.1rem minmax(0, 1fr);
  align-items: stretch;
}
.goal-timeline__rail {
  position: relative;
  display: flex;
  justify-content: center;
}
.goal-timeline__rail::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  background: var(--border);
}
.goal-timeline__dot {
  position: relative;
  z-index: 1;
  margin-top: .5rem;
  width: .85rem;
  height: .85rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--surface-app);
}
.goal-timeline__dot.is-achieved { background: var(--success); }
.goal-timeline__dot.is-overdue { background: var(--danger); }
.goal-timeline__body { min-width: 0; padding-bottom: 1rem; }
.goal-timeline__date {
  font-size: .74rem;
  color: var(--text-muted);
  margin-bottom: .3rem;
}
.goal-timeline__date.is-overdue { color: var(--danger); font-weight: 600; }
.goal-timeline__card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition);
}
.goal-timeline__card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.goal-timeline__name { font-weight: 600; color: var(--text); }
.goal-timeline__undated { margin-top: 1.6rem; }
.goal-undated-grid { display: grid; grid-template-columns: 1fr; gap: .6rem; }
@media (min-width: 768px) {
  .goal-undated-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   Goals timeline master–detail (ADR 0015): selectable timeline on the left,
   read-mode Goal card + Tasks on the right. Mirrors the Group Scopes pattern.
   ========================================================================= */
.goalmd {
  display: grid;
  grid-template-columns: minmax(0, 30fr) minmax(0, 70fr);
  gap: 1.75rem;
  align-items: start;
}
@media (max-width: 991.98px) {
  .goalmd { grid-template-columns: 1fr; gap: 1.25rem; }
}
.goalmd__master { min-width: 0; }
/* Wide screens: bound the whole master–detail to the viewport (JS sets its height),
   so the timeline scrolls on the left and the Tasks scroll inside the card on the
   right — the page itself never grows a global scrollbar. */
@media (min-width: 992px) {
  .goalmd { align-items: stretch; overflow: hidden; }
  .goalmd__master { min-height: 0; overflow-y: auto; padding-right: .5rem; }
  .goalmd__detail { min-height: 0; height: 100%; }
  .goalmd__panel { max-height: 100%; display: flex; flex-direction: column; }
  .goalmd__panel > .card-body { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
  .goalmd__taskscroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
  /* Only pad the right when a scrollbar is actually present, so the assignee chips
     aren't cramped against it (toggled by JS). */
  .goalmd__taskscroll.has-scroll { padding-right: .6rem; }
}
.goalmd__undated { margin-top: 1.4rem; }
.goalmd__undated-list { display: flex; flex-direction: column; gap: .5rem; }

/* Selectable master card (replaces the link-card in this view). */
.goalmd__card {
  display: block;
  width: 100%;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .6rem .75rem;
  cursor: pointer;
  transition: border-color var(--transition), box-shadow var(--transition), background-color var(--transition);
}
.goalmd__card:hover { border-color: var(--accent); box-shadow: var(--shadow-sm); }
.goalmd__card.is-active {
  border-color: var(--accent);
  background: var(--accent-subtle);
  box-shadow: var(--shadow-sm);
}
.goalmd__cardname { font-weight: 600; color: var(--text); line-height: 1.3; overflow-wrap: anywhere; }
.goalmd__cardstatus { margin-top: .4rem; }
.goalmd__cardprogress { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; }
.goalmd__cardcount { font-size: .72rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.goalmd__cardbottom { display: flex; align-items: center; gap: .5rem; margin-top: .5rem; font-size: .8rem; }
.goalmd__carddate { font-size: .74rem; color: var(--text-muted); white-space: nowrap; }
.goalmd__carddate.is-overdue { color: var(--danger); font-weight: 600; }

/* Shared progress bar (master sliver + detail bar). */
.goal-progress { display: flex; align-items: center; gap: .6rem; }
.goal-progress__track {
  flex: 1 1 auto;
  height: .5rem;
  background: var(--surface-sunken);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.goal-progress__track--slim { height: .3rem; }
.goal-progress__fill {
  height: 100%;
  width: 0;
  background: var(--accent);
  border-radius: inherit;
  transition: width .3s ease;
}
.goal-progress__fill.is-complete { background: var(--success); }
.goal-progress__label { font-size: .78rem; color: var(--text-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Detail pane. */
.goalmd__detail { min-width: 0; }
.goalmd__panel { margin: 0; }
.goalmd__titlerow { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }
.goalmd__title { font-size: 1.2rem; font-weight: 700; margin: 0; color: var(--text); min-width: 0; overflow-wrap: anywhere; }
.goalmd__statusrow { margin-top: .6rem; }
.goalmd__open { flex: 0 0 auto; white-space: nowrap; }
.goalmd__meta {
  display: flex; align-items: center; flex-wrap: wrap; gap: .4rem;
  margin-top: .55rem; font-size: .8rem; color: var(--text-muted);
}
.goalmd__sep { color: var(--text-faint); }
.goalmd__date.is-overdue { color: var(--danger); font-weight: 600; }
.goalmd__desc {
  margin: .9rem 0;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}
.goalmd__desc--empty { color: var(--text-faint); font-style: italic; }
.goalmd__progress { margin: .9rem 0 1.1rem; }
.goalmd__taskshead {
  display: flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--text-faint); margin-bottom: .5rem;
}
.goalmd__emptytasks { color: var(--text-muted); font-size: .85rem; }
.goalmd__tasks { margin: 0; }
.goalmd__task { padding: .55rem 0; background: transparent; }
.goalmd__task-title { color: var(--accent); text-decoration: none; }
.goalmd__task-title:hover { color: var(--accent-strong); text-decoration: none; }
.goalmd__task-side { font-size: .8rem; }
.goalmd__task-done { white-space: nowrap; color: var(--text-muted); }
.goalmd__done { margin-top: .6rem; }
.goalmd__donesummary {
  cursor: pointer;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .3rem 0;
  list-style: none;
  color: var(--text-muted);
}
.goalmd__donesummary::-webkit-details-marker { display: none; }
.goalmd__donesummary::before {
  content: "";
  width: .5rem; height: .5rem;
  border-right: 1.5px solid var(--text-faint);
  border-bottom: 1.5px solid var(--text-faint);
  transform: rotate(-45deg);
  transition: transform var(--transition);
}
.goalmd__done[open] .goalmd__donesummary::before { transform: rotate(45deg); }

/* =========================================================================
   Modal dialog (vp-modal) — e.g. the RFx close-reason prompt (ADR 0020).
   ========================================================================= */
.vp-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgba(16, 30, 45, .45);
  backdrop-filter: blur(2px);
}
.vp-modal-backdrop[hidden] { display: none; }
body.vp-modal-open { overflow: hidden; }

.vp-modal {
  width: 100%;
  max-width: 24rem;
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 34px rgba(16, 30, 45, .28);
  padding: 1.15rem 1.25rem 1.25rem;
  animation: vp-modal-in .14s ease-out;
}
@keyframes vp-modal-in {
  from { opacity: 0; transform: translateY(6px) scale(.98); }
  to { opacity: 1; transform: none; }
}
.vp-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.vp-modal__title { font-size: 1.05rem; font-weight: 700; margin: 0; }
.vp-modal__close {
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0 .25rem;
}
.vp-modal__close:hover { color: var(--text); }
.vp-modal__body { font-size: .88rem; color: var(--text-muted); margin: 0 0 1rem; }
.vp-modal__options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-bottom: 1.15rem;
}
.vp-reason {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: .6rem .5rem;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  background-color: var(--surface-card);
  cursor: pointer;
  transition: border-color var(--transition), background-color var(--transition), box-shadow var(--transition);
}
.vp-reason:hover { border-color: var(--accent); }
.vp-reason.is-selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(var(--accent-rgb), .25);
  background-color: var(--accent-subtle);
}
.vp-modal__actions { display: flex; justify-content: flex-end; gap: .5rem; }
/* Wider, scrollable variant for content-rich info dialogs (the About/Help modals). */
.vp-modal--lg { max-width: 42rem; max-height: 85vh; overflow-y: auto; }

/* =========================================================================
   Detail page: main column + a Notes panel docked on the right (matches the
   filter-rail vibe — card surface, soft border, sticky on wide screens).
   ========================================================================= */
.detail-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}

/* Sticky in-page section navigator: a pill strip pinned under the app header so
   long-scroll sections (Subtasks, Notes…) are one click away. */
.detail-nav {
  position: sticky;
  top: calc(var(--header-h) - 0.9rem);
  z-index: 10;
  /* Opaque padding on BOTH sides: the top strip tucks up under the navbar so scrolled
     content can't bleed through gap 1, and the bottom strip creates gap 2 (pill → content)
     equal to gap 3 (pill → notes rail). notes-top / scroll-margin below match the box bottom. */
  margin-bottom: 0;
  padding: 1.6rem 0 .98rem;
  /* Opaque page background so scrolled content doesn't bleed under the pills. */
  background: var(--surface-app);
}
.detail-nav__inner {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem;
  padding: .3rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.detail-nav__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .34rem .8rem;
  border-radius: var(--radius-pill);
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--transition), background-color var(--transition);
}
.detail-nav__link:hover { color: var(--accent); background: var(--accent-subtle); }
.detail-nav__link.is-active { color: var(--accent-contrast); background: var(--accent); }
.detail-nav__count {
  font-size: .7rem;
  font-weight: 700;
  min-width: 1.35em;
  text-align: center;
  padding: .05rem .35rem;
  border-radius: var(--radius-pill);
  background: rgba(var(--neutral-rgb), .16);
  color: inherit;
}
.detail-nav__link.is-active .detail-nav__count { background: rgba(255, 255, 255, .25); }
/* Land scrolled sections below the sticky header + nav strip. */
#details-section,
#collaborators-section,
#goals-section,
#subtasks-section,
#support-section,
#bidders-section,
#checklist-section,
#rfxtasks-section,
#notes-section { scroll-margin-top: calc(var(--header-h) + 4.35rem); }
@media (min-width: 992px) {
  .detail-layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .detail-notes {
    position: sticky;
    /* Clear both the app header and the sticky section-nav pill strip. */
    top: calc(var(--header-h) + 4.35rem);
    /* Never taller than the viewport, so it always sticks: the panel fills this
       box and its feed scrolls internally (fixes tall Notes lists not sticking). */
    max-height: calc(100vh - var(--header-h) - 5.1rem);
    display: flex;
    flex-direction: column;
  }
  .detail-notes > .notes-panel {
    display: flex;
    flex-direction: column;
    min-height: 0;
    max-height: 100%;
  }
}

.notes-panel {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 1rem;
}
.notes-panel__head {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .85rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.notes-panel__title {
  font-size: .95rem;
  font-weight: 700;
  margin: 0;
}
/* Notes ⇄ History flip control (ADR 0028): sits at the right of the panel header. */
.notes-flip {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  font-size: .78rem;
  font-weight: 600;
  padding: .2rem .5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background-color var(--transition), color var(--transition);
}
.notes-flip:hover { background-color: var(--surface-sunken); color: var(--text); }
.notes-panel__composer { margin-bottom: 1rem; }
.notes-panel__feed {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  max-height: 30rem;
  overflow-y: auto;
}
@media (min-width: 992px) {
  /* Flex-fill the remaining panel height instead of a fixed cap, so head + composer
     stay put and only the feed scrolls within the sticky, viewport-bounded panel.
     Applies to whichever face (Notes or History) is currently visible. */
  .notes-panel__feed { flex: 1 1 auto; min-height: 0; max-height: none; }
}
.notes-panel__empty { color: var(--text-muted); font-size: .85rem; margin: .25rem 0 0; }

.note-card { display: flex; gap: .55rem; }
.note-card__body {
  flex: 1 1 auto;
  min-width: 0;
  background-color: var(--surface-sunken);
  border-radius: var(--radius);
  padding: .5rem .7rem;
}
.note-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem;
  margin-bottom: .15rem;
}
.note-card__author { font-weight: 600; font-size: .82rem; }
.note-card__time { font-size: .72rem; color: var(--text-faint); }
.note-card__msg { font-size: .88rem; white-space: pre-wrap; word-break: break-word; }

/* =========================================================================
   Filter rail layout (ADR 0018): left vertical panel + main content.
   ========================================================================= */
.page-with-filters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (min-width: 992px) {
  .page-with-filters {
    grid-template-columns: var(--filter-rail-w) minmax(0, 1fr);
  }
  /* Let the rail's column fill the row height so the sticky rail has scroll
     range (the grid's align-items:start would otherwise shrink it) (Improvement 3). */
  .page-with-filters > aside {
    align-self: stretch;
  }
}

.filter-rail {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 992px) {
  .filter-rail {
    position: sticky;
    /* Clear the pinned header (Improvement 3): header height + a small gap. */
    top: calc(var(--header-h) + 0.75rem);
    /* Never taller than the viewport: a long facet list scrolls inside the rail
       instead of growing the page (keeps the sticky rail usable on any page). */
    max-height: calc(100vh - var(--header-h) - 1.5rem);
    overflow-y: auto;
  }
}

.filter-rail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border);
}
.filter-rail__title {
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .01em;
}
/* Active-filter indication (Improvement 13): a count pill in the head and an
   accent tint + dot on each active facet's label, so it's obvious what's set. */
.filter-rail__heading {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
}
.filter-rail__count {
  font-size: .7rem;
  font-weight: 700;
  line-height: 1;
  padding: .15rem .4rem;
  border-radius: var(--radius-pill);
  background-color: var(--accent);
  color: var(--accent-contrast);
}
.filter-group .form-label.is-active,
.filter-group__title.is-active {
  color: var(--accent);
}
.filter-group .form-label.is-active::after,
.filter-group__title.is-active::after {
  content: "";
  display: inline-block;
  width: .4rem;
  height: .4rem;
  margin-left: .35rem;
  border-radius: 50%;
  background-color: var(--accent);
  vertical-align: middle;
}
.filter-rail__clear {
  font-size: .8rem;
  text-decoration: none;
}

.filter-group { margin-bottom: 1rem; }
.filter-group:last-of-type { margin-bottom: 0; }
.filter-group__title {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  margin-bottom: .45rem;
}
/* A pills row that carries a right-aligned help affordance: the “?” explainer sits on
   the same line as the Involved / My RFxs pills, pushed right via ms-auto. */
.filter-field--pillrow {
  display: flex;
  align-items: center;
}
.filter-group .form-label {
  font-size: .78rem;
  color: var(--text-muted);
  margin-bottom: .2rem;
}
.filter-group .form-select,
.filter-group .form-control {
  width: 100% !important;
}
.filter-field { margin-bottom: .55rem; }
.filter-field:last-child { margin-bottom: 0; }

/* Native controls (the date-picker popup, spinners, scrollbars) follow the app theme,
   so the calendar looks at home in dark mode instead of a jarring white popup. */
html[data-bs-theme="light"] { color-scheme: light; }
html[data-bs-theme="dark"] { color-scheme: dark; }

/* Date facets use a custom themed calendar (datepicker.js) instead of the un-stylable
   native popup. Hide the native indicator; a muted calendar glyph marks the field. */
.dp input[type="date"] { padding-right: 1.9rem; cursor: pointer; }
.dp input[type="date"]::-webkit-calendar-picker-indicator { display: none; }
.dp { position: relative; }
.dp::after {
  content: "";
  position: absolute;
  right: .6rem;
  top: 50%;
  width: .95rem;
  height: .95rem;
  transform: translateY(-50%);
  pointer-events: none;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2218%22%20rx=%222%22/%3E%3Cline%20x1=%2216%22%20y1=%222%22%20x2=%2216%22%20y2=%226%22/%3E%3Cline%20x1=%228%22%20y1=%222%22%20x2=%228%22%20y2=%226%22/%3E%3Cline%20x1=%223%22%20y1=%2210%22%20x2=%2221%22%20y2=%2210%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%224%22%20width=%2218%22%20height=%2218%22%20rx=%222%22/%3E%3Cline%20x1=%2216%22%20y1=%222%22%20x2=%2216%22%20y2=%226%22/%3E%3Cline%20x1=%228%22%20y1=%222%22%20x2=%228%22%20y2=%226%22/%3E%3Cline%20x1=%223%22%20y1=%2210%22%20x2=%2221%22%20y2=%2210%22/%3E%3C/svg%3E") center / contain no-repeat;
}
.dp:focus-within::after { background-color: var(--accent); }

/* The themed calendar popup. */
.dp-pop {
  position: fixed;
  z-index: 1056;
  width: 16.5rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: .6rem;
  user-select: none;
}
.dp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .35rem; }
.dp-title { font-weight: 600; font-size: .85rem; color: var(--text); }
.dp-nav {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75rem; height: 1.75rem; padding: 0;
  border: none; background: transparent; color: var(--text-muted);
  border-radius: .4rem; cursor: pointer; transition: background-color .12s ease, color .12s ease;
}
.dp-nav:hover { background: var(--surface-sunken); color: var(--text); }
.dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow {
  text-align: center; font-size: .64rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .02em; color: var(--text-faint); padding: .25rem 0 .35rem;
}
.dp-day {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1 / 1; padding: 0; border: none; background: transparent;
  color: var(--text); font-size: .8rem; border-radius: .45rem; cursor: pointer;
  transition: background-color .1s ease, color .1s ease;
}
.dp-day:hover { background: var(--surface-sunken); }
.dp-day.is-other { color: var(--text-faint); }
.dp-day.is-today { box-shadow: inset 0 0 0 1.5px var(--accent); font-weight: 600; }
.dp-day.is-selected, .dp-day.is-selected:hover {
  background: var(--accent); color: #fff; font-weight: 600; box-shadow: none;
}
.dp-foot { display: flex; justify-content: space-between; margin-top: .45rem; padding-top: .4rem; border-top: 1px solid var(--border); }
.dp-link {
  border: none; background: transparent; color: var(--accent);
  font-size: .76rem; font-weight: 500; padding: .15rem .4rem; border-radius: .35rem; cursor: pointer;
}
.dp-link:hover { background: var(--accent-subtle); }
.dp-link--muted { color: var(--text-muted); }
.dp-link--muted:hover { background: var(--surface-sunken); color: var(--text); }

/* Searchable facet combobox (Improvement 15): typeahead over a growing list. Every
   facet is one of these now (static enum facets included) for a consistent look; a
   chevron marks it as a dropdown and flips when open. */
.fsel { position: relative; }
/* On the create forms the themed select comboboxes match the form's regular-size inputs
   (the shared .fsel input is otherwise -sm for the filter rails / detail editors). */
.form-page .fsel__input {
  padding-top: .375rem;
  padding-bottom: .375rem;
  padding-left: .75rem;
  font-size: 1rem;
  min-height: calc(1.5em + .75rem + 2px);
  border-radius: var(--bs-border-radius);
}
.fsel__input { padding-right: 1.75rem; text-overflow: ellipsis; }
.fsel__input[readonly] { cursor: pointer; background-color: var(--bs-body-bg); }
.fsel::after {
  content: "";
  position: absolute;
  right: .6rem;
  top: 50%;
  width: .7rem;
  height: .7rem;
  transform: translateY(-50%);
  pointer-events: none;
  background-color: var(--text-muted);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.5%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolyline%20points=%226%209%2012%2015%2018%209%22/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222.5%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolyline%20points=%226%209%2012%2015%2018%209%22/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .12s ease, background-color .12s ease;
}
.fsel:has(.fsel__input:focus)::after { background-color: var(--accent); }
.fsel:has(.fsel__input[aria-expanded="true"])::after { transform: translateY(-50%) rotate(180deg); }
/* Compact inline status comboboxes (Work lens rows + Details child rows) size to a
   fixed width instead of stretching, matching their old width:auto selects. */
.fsel:has(> .work-status), .fsel:has(> .wic-status), .fsel:has(> .pt-status) { width: 9rem; }
.fsel__menu {
  position: fixed;
  z-index: 1055;
  margin-top: .15rem;
  max-height: 15rem;
  overflow-y: auto;
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: .2rem;
}
.fsel__opt {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: .82rem;
  padding: .3rem .5rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.fsel__opt:hover,
.fsel__opt.is-active { background-color: var(--surface-sunken); }
.fsel__opt.is-selected { color: var(--accent); font-weight: 600; }
.fsel__group {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--text-faint);
  padding: .35rem .5rem .15rem;
}
.fsel__empty {
  font-size: .8rem;
  color: var(--text-muted);
  padding: .4rem .5rem;
}

.filter-rail__actions {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid var(--border);
}
.filter-rail__actions .btn { width: 100%; }

/* Wrapping pill toggles for multi-select facets (Status, Priority, Type). */
.filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
}
.filter-pills .btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
.filter-pill {
  padding: .22rem .6rem;
  font-size: .78rem;
  font-weight: 500;
  line-height: 1.3;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  background-color: var(--surface-card);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition), border-color var(--transition);
}
.filter-pill:hover { border-color: var(--accent); color: var(--accent); }
.btn-check:checked + .filter-pill {
  background-color: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}
.btn-check:focus-visible + .filter-pill {
  outline: 2px solid rgba(var(--accent-rgb), .5);
  outline-offset: 1px;
}
/* Small "?" help affordance next to a filter pill (Involved / My RFxs): opens a tiny
   vp-modal explaining the term. Subtle by default, accent on hover/focus. */
.filter-help,
.info-help {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  margin-left: .15rem;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}
.filter-help:hover,
.filter-help:focus-visible,
.info-help:hover,
.info-help:focus-visible { border-color: var(--accent); color: var(--accent); }

/* Inline info bubble (anchored popover) — lightweight in-context help; JS positions it
   near its trigger. Built from design tokens so it matches cards/panels. */
.info-bubble {
  position: absolute;
  z-index: 1080;
  max-width: 20rem;
  padding: .5rem .7rem;
  background: var(--surface-card);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.45;
}

/* =========================================================================
   Segmented control — unified Active|Archived / List|Board look (ADR 0018).
   ========================================================================= */
/* Improvement 7: unify small interactive control heights so inputs, selects,
   buttons and the segmented toggle line up (most visible in the page toolbars).
   All snap to --control-h-sm; flex-centring keeps their labels vertically centred. */
.btn-sm,
.form-control-sm,
.form-select-sm {
  min-height: var(--control-h-sm);
}
.form-control-sm:not(textarea),
.form-select-sm {
  height: var(--control-h-sm);
}
.btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.seg-toggle {
  display: inline-flex;
  height: var(--control-h-sm);
  align-items: stretch;
  padding: .15rem;
  gap: .2rem;
  background-color: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.seg-toggle .btn-check { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
.seg-toggle__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .8rem;
  font-size: .82rem;
  font-weight: 600;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--transition), background-color var(--transition);
}
.seg-toggle__btn:hover { color: var(--text); }
.seg-toggle__btn.is-active,
.btn-check:checked + .seg-toggle__btn {
  color: var(--accent-contrast);
  background-color: var(--accent);
}
.seg-toggle__btn.is-active:hover { color: var(--accent-contrast); }

/* Top-bar Search (ADR 0019): the general text search, separate from the rail facets.
   Sits in the right-hand action cluster, ahead of the toggles/buttons. A fixed width
   keeps it from stretching the flex row (which threw off button alignment). */
.page-search {
  width: 240px;
  max-width: 100%;
}

/* Filters as a collapsible drawer below the breakpoint. */
.filter-rail__toggle { display: none; }
@media (max-width: 991.98px) {
  .filter-rail__toggle {
    display: inline-flex;
    margin-bottom: 1rem;
  }
  .page-with-filters.filters-collapsed .filter-rail { display: none; }
}

/* =========================================================================
   Top nav — brand separation, understated theme toggle, tidy user cluster.
   ========================================================================= */
.navbar-brand {
  margin-right: 0;
}
/* Pipe separator + breathing room between brand and the section links. */
@media (min-width: 576px) {
  .navbar-nav.main-nav {
    margin-left: 1rem;
    padding-left: 1.15rem;
    border-left: 1px solid var(--border-strong);
  }
}

/* Right-hand user cluster: quiet name, subtle divider, icon theme toggle. */
.nav-user {
  font-size: .9rem;
  color: var(--text-muted);
}
.nav-divider {
  width: 1px;
  align-self: stretch;
  margin: .35rem .25rem;
  background-color: var(--border-strong);
}
.nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--transition), background-color var(--transition);
}
.nav-icon-btn:hover {
  color: var(--accent);
  background-color: var(--accent-subtle);
}
/* Monochromatic sun/moon (currentColor); show the one matching the theme. */
.theme-icon { display: none; }
[data-bs-theme="light"] .theme-icon--sun { display: inline; }
[data-bs-theme="dark"] .theme-icon--moon { display: inline; }

/* =========================================================================
   In-place editing / detail-as-editor (ADR 0017).
   ========================================================================= */
/* Editable title: reads like a heading until focused. */
.editable-title {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.25;
  width: 100%;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: .2rem .45rem;
  margin-left: -.45rem;
  background: transparent;
  color: var(--text);
}
.editable-title:hover { border-color: var(--border); }
.editable-title:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface-card);
}

/* Summary grid of label + editable control. */
.detail-fields {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: .35rem 1rem;
  align-items: center;
}
@media (max-width: 575.98px) {
  .detail-fields { grid-template-columns: 1fr; gap: .15rem; }
  .detail-fields .detail-fields__label { margin-top: .5rem; }
}
.detail-fields__label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
}
.detail-fields__value { min-width: 0; }
/* Pursuit Links required marker (ADR 0036): a subtle asterisk shown on the Collaboration
   / Opportunity Link labels while the Category obliges them. */
.detail-pursuit__req { color: var(--danger, #dc3545); font-weight: 700; }
/* Pursuit Link pill brand icons (ADR 0036): the SVG is used as a CSS mask so it inherits
   the caption's currentColor and themes cleanly in light/dark — drop a monochrome-friendly
   SVG at the referenced path (any shape; color is taken from the mask alpha, not the file). */
.pursuit-ico {
  display: inline-block;
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  background-color: currentColor;
  -webkit-mask: var(--pursuit-ico) center / contain no-repeat;
  mask: var(--pursuit-ico) center / contain no-repeat;
}
.pursuit-ico--collaboration { --pursuit-ico: url("/img/pursuit/collaboration.svg"); }
.pursuit-ico--dynamics { --pursuit-ico: url("/img/pursuit/dynamics.svg"); }
/* Account pill (ADR 0043): the Account read state — Dynamics logo + name linking to the
   record in Dynamics (holder-chip look), with a pencil that swaps in the typeahead. A
   Legacy Account (no Dynamics record) reads muted, link-less, with a small tag. */
.account-chip .holder-chip__link { font-size: .875rem; }
.account-chip__text,
.account-chip__text:hover { color: var(--text); text-decoration: none; cursor: default; }
.account-chip--legacy .account-chip__text { color: var(--text-muted); }
.holder-chip__link > .account-chip__tag,
.account-chip__tag {
  flex: 0 0 auto;
  padding: 0 .4rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
}
/* Single-element chip with only a pencil: keep the pill tight when no remove action. */
.account-chip:not(:has(.ap-edit-btn)) { padding-right: .5rem; }
.ap-edit .account-picker-input { max-width: 24rem; }
/* Steady attention ring + message on the empty Pursuit Link fields when a Category switch
   is rejected for missing them (ADR 0036). Persists until the user's next click/focus
   (pursuit-link.js). No animation — a calm, steady red ring. */
.pursuit-invalid {
  border-radius: .375rem;
  box-shadow: 0 0 0 2px rgba(220, 53, 69, .55);
}
.pursuit-reject {
  margin-top: .35rem;
  font-size: .8rem;
  color: var(--danger, #dc3545);
}
/* Multi-line fields (Description, Bidders) get a readable minimum height so they
   don't open as a single line (Improvement 10). Still user-resizable. */
.detail-textarea { min-height: 6.5rem; }

/* Cap how far any textarea can be dragged, and lock resizing to the vertical axis, so
   the resize grip can never be pulled past the bottom of the page/panel and become
   unreachable (Notes composer, Descriptions, Bidders). max-height also bounds the drag. */
textarea.form-control {
  resize: vertical;
  max-height: 60vh;
}

/* Auto-growing Description fields (app-wide): JS tracks height to the content; once it
   hits max-height the field scrolls instead of growing further. overflow-y:auto keeps
   the scrollbar from showing until it's actually needed. A min-height stops empty
   fields collapsing to a single line (detail-textarea's larger min-height still wins). */
textarea.autogrow {
  overflow-y: auto;
  min-height: 4.75rem;
}

/* Clickable links in Description fields (linkify.js): the read view shown in place of a
   Description textarea that contains a URL. Same box as the field, so swapping between
   view and edit doesn't jump; click (not on a link) or Tab drops into the textarea.
   Grows with its content up to the same cap as the textarea's autogrow. `.form-control`
   in the selector beats `.form-control-sm:not(textarea)`, whose fixed control height
   (meant for single-line inputs) would otherwise pin this div and make it scroll. */
.form-control.linkify-view {
  min-height: 4.75rem;
  max-height: 60vh;
  overflow-y: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
  height: auto;
}
.form-control.linkify-view.wic-desc { min-height: 2.4rem; max-height: 12rem; }
/* Pasted URLs in free text (Descriptions, Notes) — server Linkify + linkify.js. */
a.autolink {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
  cursor: pointer;
}
a.autolink:hover { text-decoration-thickness: 2px; }

/* (retired: the standalone-Task checklist drag styles were removed with ADR 0030) */

/* Shared child-Work-Item editor: Subtasks / RFx Tasks (ADR 0030). */
.wic-handle {
  cursor: grab;
  color: var(--text-muted);
  user-select: none;
  line-height: 1;
  padding: 0 .1rem;
}
.wic-handle:active { cursor: grabbing; }
.wic-item.dragging { opacity: .5; }
/* Order number chip next to the drag handle. */
.wic-num {
  min-width: 1.5em;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  color: var(--text-muted);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .05rem .35rem;
}
/* Left-aligned expand/collapse title button (no Bootstrap btn centering). */
.wic-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex: 1 1 auto;
  min-width: 0;
  background: none;
  border: none;
  padding: .15rem 0;
  text-align: left;
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
}
.wic-toggle:hover .wic-title { color: var(--accent); }
.wic-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; }
.wic-title--done {
  /* !important so the strike wins over Bootstrap's .text-decoration-none (also
     !important) that sits on the same title link in the Task Planner / RFx tables. */
  text-decoration: line-through !important;
  color: var(--bs-secondary-color);
}
/* Disclosure triangle matching the detail sections, in the accent colour. */
.wic-caret {
  display: inline-flex;
  align-items: center;
  color: var(--text);
  font-size: 1.3rem;
  line-height: 1;
  transition: transform .15s ease;
  transform: rotate(-90deg);
}
.wic-caret::before { content: "\25BE"; }
.wic-item.expanded .wic-caret,
.wic-rowtoggle[aria-expanded="true"] .wic-caret,
[data-tasktoggle][aria-expanded="true"] .wic-caret { transform: rotate(0deg); }
.wic-assignee { font-size: .8rem; white-space: nowrap; flex-shrink: 0; }
.wic-assignee-form { flex: 0 0 auto; }
.wic-assignee-form .people-picker { min-width: 10rem; }
.wic-due { white-space: nowrap; flex-shrink: 0; }
/* Deep-link highlight when arriving from the Work lens on a child item (ADR 0030). */
.wic-highlight {
  position: relative;
  z-index: 3;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  box-shadow: 0 0 0 2px var(--accent);
  transition: background .3s ease, box-shadow .3s ease;
}

/* Collapsed by default; the expanded body is a compact edit form. */
.wic-body { display: none; }
.wic-item.expanded .wic-body {
  display: block;
  margin-top: .5rem;
  padding: .75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-sunken);
  border: 1px solid var(--border);
}
.wic-edit__grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
  gap: .6rem;
}
.wic-field { display: flex; flex-direction: column; gap: .2rem; min-width: 0; }
.wic-field__label {
  font-size: .68rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; color: var(--text-muted);
}
.wic-edit__desc { margin-top: .6rem; }
textarea.form-control.wic-desc { max-height: 12rem; min-height: 2.4rem; resize: vertical; overflow: auto; }
.wic-edit__actions { display: flex; align-items: center; gap: .5rem; margin-top: .75rem; }
.wic-edit__actions .wic-del { margin-left: auto; }

/* Completed children tucked under a collapsed "Done" disclosure (keeps open work up top). */
.wic-done { margin-top: .5rem; }
.wic-done__summary {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  cursor: pointer;
  list-style: none;
  padding: .25rem 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--text-muted);
  user-select: none;
}
.wic-done__summary::-webkit-details-marker { display: none; }
.wic-done__summary:hover { color: var(--text); }
.wic-done[open] > .wic-done__summary .wic-caret { transform: rotate(0deg); }
.wic-list--done { margin-top: .35rem; opacity: .85; }

/* Work view: tucked Subtask rows under a parent Task (ADR 0030). */
.wic-rownest { display: inline-flex; align-items: center; gap: .35rem; }
.wic-rowtoggle { background: none; border: none; padding: 0; line-height: 1; }
.work-subrow > td.col-title { padding-left: 2rem; }
/* A Done child stays visible but is greyed + struck through, aligned with the Task /
   RFx Details child items (.wic-title--done); omission is left to the Status facet. The
   strike needs !important to beat the .text-decoration-none on the title link. */
.work-subrow--done .col-title .cell-title { text-decoration: line-through !important; color: var(--bs-secondary-color); }
.wic-childdot { color: var(--text-muted); }

/* Task Planner list/board: tucked subtask lists (ADR 0030). */
.task-subtasks {
  list-style: none;
  margin: .4rem 0 0;
  padding: .4rem 0 0;
  border-top: 1px dashed var(--border);
  font-size: .78rem;
}
.task-subitem { display: grid; grid-template-columns: auto 1fr; gap: .35rem; align-items: start; padding: .15rem 0; }
.task-subitem__num { color: var(--text-faint); font-weight: 700; }
.task-subitem__title { overflow: hidden; text-overflow: ellipsis; }
a.task-subitem__title { color: inherit; text-decoration: none; }
a.task-subitem__title:hover { color: var(--accent); text-decoration: underline; }
.task-subitem--done .task-subitem__title { text-decoration: line-through; color: var(--bs-secondary-color); }

/* RFx Checklist rows share the roster (Support Team / Collaborators / Goals) row rhythm
   so the sections line up: one shared min-height drives both, and the checklist gets a
   slightly larger, centred checkbox. */
.roster-row,
.checklist-item { min-height: 2.75rem; }
/* Non-editable person chip shown in a roster entry's right cluster (e.g. a member
   Task's Assignee) — sized down to match the compact row rhythm. */
.roster-person { font-size: .8rem; white-space: nowrap; }
/* Deep-link flash when arriving on a Goal from one of its member Tasks (roster-highlight.js). */
.roster-row--flash {
  position: relative;
  z-index: 3;
  border-radius: var(--radius-sm);
  background: var(--accent-subtle);
  box-shadow: 0 0 0 2px var(--accent);
  transition: background .3s ease, box-shadow .3s ease;
}
.checklist-item .checklist-item__box {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0;
  flex-shrink: 0;
  cursor: pointer;
}
.checklist-item .checklist-item__label { min-width: 0; overflow-wrap: anywhere; }
/* Optional Checklist steps (ADR 0041): muted label + a small trailing tag, so the hint
   doesn't rely on colour alone. Ticking is unaffected. */
.checklist-item--optional .checklist-item__label,
.checklist-template__item--optional .checklist-template__label { color: var(--text-muted); }
.checklist-item__optional {
  margin-left: auto;
  flex-shrink: 0;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--text-muted);
}
/* Checklist Template editor rows: the label input reads as inline text until focused. */
.checklist-template__label {
  border-color: transparent;
  background: transparent;
}
.checklist-template__label:hover { border-color: var(--border); }
.checklist-template__label:focus { background: var(--bs-body-bg); }
/* Clickable subtask pill on kanban cards. */
.kanban-subtoggle {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .1rem .45rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  color: var(--text-muted);
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.kanban-subtoggle:hover { color: var(--accent); border-color: var(--accent); }
.kanban-subtoggle .wic-caret { font-size: .85rem; }
/* Task Planner list: tucked subtask rows under a parent (like the Work lens). */
.wic-rowtoggle { cursor: pointer; }
/* Child rows (Subtasks / RFx Tasks) indent under their parent to signal nesting, like
   the Work lens. Their title is the row's FIRST cell, so the LIST SURFACE :first-child
   rule (padding-left:1rem) would otherwise flatten them — this override carries matching
   specificity and sizes the indent to the same relative nesting as the Work lens. */
.page-main .table-responsive > .table > :not(caption) > tr.task-subrow > td.col-title { padding-left: 2.25rem; }
.wic-childdot { color: var(--text-faint); margin-right: .35rem; font-weight: 600; }

/* Private Tasks list: truncate the description preview to one tidy line. */
.pt-desc {
  display: inline-block;
  max-width: 32rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: bottom;
}
.detail-fields__value.readonly { color: var(--text); padding: .25rem 0; }

/* Save feedback toast. */
.detail-toast {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1080;
  padding: .5rem .9rem;
  border-radius: var(--radius);
  font-size: .85rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(.5rem);
  pointer-events: none;
  transition: opacity var(--transition), transform var(--transition);
}
.detail-toast.is-visible { opacity: 1; transform: translateY(0); }
.detail-toast--ok  { background: var(--success); color: #fff; }
.detail-toast--err { background: var(--danger); color: #fff; }

.field-error {
  display: block;
  font-size: .78rem;
  color: var(--danger);
  margin-top: .2rem;
  min-height: 0;
}

/* Goal member-task filter: leading magnifier icon before the placeholder. */
.task-filter__icon {
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}
.task-filter__input { padding-left: 1.95rem; }

/* =========================================================================
   Work landing summary band (ADR 0008 triage lens): at-a-glance stat tiles.
   ========================================================================= */
.work-summary {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.work-stat {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: .55rem .9rem;
  min-width: 6.25rem;
}
.work-stat__num {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--text);
}
.work-stat__label {
  font-size: .72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--text-muted);
  margin-top: .2rem;
}
.work-stat--accent .work-stat__num { color: var(--accent); }
.work-stat--warn .work-stat__num { color: var(--warning); }
a.work-stat--link {
  text-decoration: none;
  transition: border-color var(--transition), background-color var(--transition);
}
a.work-stat--link:hover {
  border-color: var(--accent);
  background-color: var(--accent-subtle);
}
a.work-stat--link .work-stat__label { color: var(--accent); }

/* =========================================================================
   Work landing "Needs attention" triage panel (corpus-wide).
   ========================================================================= */
/* "About the Work view" explainer, shown in a modal from the header info button. */
.info-grid {
  columns: 2 230px;
  column-gap: 1.75rem;
}
.info-grid__item {
  min-width: 0;
  break-inside: avoid;
  margin-bottom: 1rem;
}
.info-grid__term {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--text-body);
  margin-bottom: .2rem;
}
.info-grid__item p,
.info-grid__item ul {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--text-muted);
  text-wrap: pretty;
}
.info-grid__item ul { padding-left: 1.05rem; }
.info-grid__item li + li { margin-top: .15rem; }

/* Soft, transparent-yellow “Needs attention” button (matches the badge-soft warning). */
.btn-attention {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background-color: var(--warning-subtle);
  border: 1px solid rgba(var(--warning-rgb), .35);
  color: var(--text-body);
}
.btn-attention:hover,
.btn-attention:focus-visible {
  background-color: rgba(var(--warning-rgb), .22);
  border-color: rgba(var(--warning-rgb), .5);
  color: var(--text-body);
}
.btn-attention__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background-color: #A96E12;
  color: #fff;
}
/* Dimmed count (ADR 0042): the default (Task Planner) view is empty, but other-source work
   (RFx Tasks) needs attention. The button stays reachable and shows that count quietly,
   so it doesn't read as the default view's tally. */
.btn-attention__count--muted {
  background-color: transparent;
  border: 1px solid rgba(var(--warning-rgb), .5);
  color: var(--text-muted);
  font-weight: 500;
}
/* Value Architects queue button (ADR 0037): sibling of Needs attention, but accent-tinted
   with a notification-style count bubble so the two read as distinct at a glance. */
.btn-vapool {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background-color: var(--accent-subtle);
  border: 1px solid rgba(var(--accent-rgb), .35);
  color: var(--text-body);
}
.btn-vapool:hover,
.btn-vapool:focus-visible {
  background-color: rgba(var(--accent-rgb), .18);
  border-color: rgba(var(--accent-rgb), .5);
  color: var(--text-body);
}
.btn-vapool svg { color: var(--accent); }
.btn-vapool__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 .35rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background-color: var(--accent);
  color: #fff;
}
/* Value Architects queue page (ADR 0037): claimed rows settle in place until reload. */
.vap-table { overflow: visible; }
/* The panel surface comes from .table-responsive; keep it, but let the inline picker
   dropdown escape the panel (the shared wrapper otherwise clips overflow). */
.page-main .table-responsive.vap-table { overflow: visible; }
.vap-assignee-col { width: 16rem; }
/* table-layout is auto here, so a <th> width is only advisory and the empty picker input
   collapses the column. min-width on the cell forces the real width. */
.vap-assignee { min-width: 16rem; }
.vap-assignee .people-picker,
.vap-assignee .people-picker-input { width: 100%; }
.vap-actions-col { width: 1%; }
.vap-actions { white-space: nowrap; text-align: right; }

/* =========================================================================
   Avatars (ADR 0006): circular directory photo with an initials fallback.
   ========================================================================= */
.avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  overflow: hidden;
  flex: 0 0 auto;
  background-color: hsl(var(--avatar-hue, 210) 40% 45%);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  line-height: 1;
  user-select: none;
}
.avatar__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.avatar--xs { width: 1.25rem; height: 1.25rem; font-size: .5rem; }.avatar--sm { width: 1.5rem; height: 1.5rem; font-size: .6rem; }
.avatar--lg { width: 2.25rem; height: 2.25rem; font-size: .82rem; }
/* VA Team Pool (ADR 0037): the team "avatar" is a distinct accent tile with a group
   glyph, so a pooled assignee reads as a team, never a person. */
.avatar--team {
  background-color: var(--accent-subtle);
  color: var(--accent);
}
.avatar--team svg { width: 64%; height: 64%; }
.avatar--empty {
  background: transparent;
  border: 1px dashed var(--border-strong);
  color: var(--text-faint);
}
/* System sender (e.g. due-date reminders, ADR 0039): the app's bird badge on a subtle
   tile, so a system notification reads as "from VA Planner" rather than from a person. */
.avatar--logo {
  background-color: var(--surface-sunken);
}
.avatar--logo .avatar__img {
  object-fit: contain;
  box-sizing: border-box;
  padding: 16%;
}

/* Collapsible detail section (Improvement 4): the general-details card on Task/RFx
   detail pages. Native <details>; the summary is styled as a card header with a
   chevron that rotates with the open state. */
.detail-section > summary.detail-section__head {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  user-select: none;
}
.detail-section > summary.detail-section__head::-webkit-details-marker { display: none; }
.detail-section > summary.detail-section__head::before {
  content: "\25BE"; /* ▾ */
  font-size: 0.8em;
  color: var(--text-faint);
  transition: transform 0.15s ease;
}
.detail-section:not([open]) > summary.detail-section__head::before {
  transform: rotate(-90deg);
}
/* When open, the summary sits directly above the body — trim the body's top padding
   so the header and fields read as one card, not two stacked blocks. */
.detail-section[open] > .card-body { padding-top: 0.25rem; }

/* ---- Create form pages (New Task, New RFx) ------------------------------------
   A single themed card with lightly-divided sections and a footer action bar, so the
   create surfaces read like the detail pages rather than a bare Bootstrap form. ---- */
.form-page { max-width: 760px; }
.form-card .card-body { padding: 1.35rem 1.5rem; }
.form-section + .form-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}
.form-section__title {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 700;
  color: var(--text-faint);
  margin: 0 0 .95rem;
}
.form-card .form-label {
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .3rem;
}
.form-card .card-footer {
  display: flex;
  gap: .5rem;
  align-items: center;
  padding: .9rem 1.5rem;
}
/* Goals picker inside the create form: a sunken well, not a plain hairline border. */
.form-check-well {
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .55rem .75rem;
  max-height: 12rem;
  overflow-y: auto;
}
.form-check-well .form-check { margin-bottom: .15rem; }
/* Hide server validation summaries when there is nothing to show, so the alert box
   only appears on real errors. */
.validation-summary-valid { display: none; }

/* Archive toggle button (Task / RFx Details header): a grey outline "Archive" button
   that flips to a solid "Archived" state. Built over a real checkbox with data-field
   so it auto-saves like any other field (and keeps its disabled state). */
.archive-btn {
  border: 1px solid var(--border-strong);
  background-color: transparent;
  color: var(--text-muted);
}
.archive-btn:hover {
  border-color: var(--text-muted);
  color: var(--text);
  background-color: transparent;
}
.btn-check:checked + .archive-btn {
  background-color: var(--text-muted);
  border-color: var(--text-muted);
  color: var(--surface-card);
}
.btn-check:checked + .archive-btn:hover {
  background-color: var(--text);
  border-color: var(--text);
  color: var(--surface-card);
}
.btn-check:focus-visible + .archive-btn {
  outline: 2px solid rgba(var(--accent-rgb), .5);
  outline-offset: 1px;
}
.archive-btn__on { display: none; }
.btn-check:checked + .archive-btn .archive-btn__off { display: none; }
.btn-check:checked + .archive-btn .archive-btn__on { display: inline; }
/* Keep the disabled Archive button hoverable so its explanatory title tooltip shows
   (Bootstrap sets pointer-events:none on a disabled btn-check label). Clicking still
   does nothing — the underlying checkbox is disabled. */
.btn-check:disabled + .archive-btn {
  pointer-events: auto;
  cursor: pointer;
}

/* People / Account picker dropdown results (Improvement 9): the results float
   absolutely over the page, so give them a solid surface — otherwise the translucent
   row-hover wash lets the content behind show through. Also truncate long labels so
   they never spill past the dropdown's right edge. */
.people-picker-results,
.account-picker-results,
.entity-picker-results,
.group-picker-results,
.rfx-picker-results,
.holder-label-results {
  background-color: var(--surface-card);
  border-radius: var(--radius-sm);
}
/* Collaboration-Link DCP-task typeahead (ADR 0040): two-line rows (task title + customer·project). */
.dcp-task-results { background-color: var(--surface-card); border-radius: var(--radius-sm); max-height: 15rem; overflow-y: auto; }
.dcp-task-results .list-group-item-action:hover,
.dcp-task-results .list-group-item-action.is-active { background-color: var(--surface-sunken); color: var(--text); }
.dcp-task-opt { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; line-height: 1.25; }
.dcp-task-opt__title { font-size: .85rem; color: var(--text); }
.dcp-task-opt__sub { font-size: .72rem; color: var(--text-muted); }
/* The dropdown inherits w-100 from the (sometimes very narrow) input — e.g. the compact
   Subtask / RFx-task inline editors — which truncated names and the team label. Give the
   results list a readable floor while leaving the textbox size untouched. */
.people-picker-results {
  min-width: 17rem;
  max-width: min(24rem, 90vw);
}
/* Scope hint (ADR 0029): a balloon that floats above the field instead of pushing the
   layout (which looked bad in the compact subtask/RFx-task editors). */
.picker-scope-hint {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: .3rem;
  z-index: 1002;
  max-width: 22rem;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: .25rem .55rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .14);
  line-height: 1.3;
}
.picker-scope-hint::after {
  content: "";
  position: absolute;
  top: 100%;
  left: .9rem;
  border: 5px solid transparent;
  border-top-color: var(--surface-card);
}
.people-picker-results .list-group-item,
.account-picker-results .list-group-item,
.entity-picker-results .list-group-item,
.group-picker-results .list-group-item,
.rfx-picker-results .list-group-item,
.holder-label-results .list-group-item {
  overflow: hidden;
}
/* Opaque hover + keyboard-navigated active row (arrows/Enter). Explicit so the row
   never washes out to transparent (Bootstrap's default hover bg is see-through here). */
.people-picker-results .list-group-item-action:hover,
.people-picker-results .list-group-item-action.is-active,
.account-picker-results .list-group-item-action:hover,
.account-picker-results .list-group-item-action.is-active,
.entity-picker-results .list-group-item-action:hover,
.entity-picker-results .list-group-item-action.is-active,
.group-picker-results .list-group-item-action:hover,
.group-picker-results .list-group-item-action.is-active,
.rfx-picker-results .list-group-item-action:hover,
.rfx-picker-results .list-group-item-action.is-active,
.holder-label-results .list-group-item-action:hover,
.holder-label-results .list-group-item-action.is-active {
  background-color: var(--surface-sunken);
  color: var(--text);
}
/* Holder-label combobox (ADR 0027): the results float over following controls, so
   pin a solid surface, a border to match the other pickers, and a comfortable z-index.
   Rows truncate rather than spill past the dropdown edge. */
.holder-label-results {
  z-index: 1000;
  max-height: 13rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  margin-top: 2px;
}
.holder-label-results:empty { display: none; }
.holder-label-results .list-group-item {
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* Account rows are a single text button: truncate the button itself. */
.account-picker-results .list-group-item,
.rfx-picker-results .list-group-item {
  white-space: nowrap;
  text-overflow: ellipsis;
}
/* People rows are flex (avatar + label): let the label shrink and ellipsize. */
.people-picker-results .list-group-item > span:last-child {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Busy spinner overlaid at the right of a picker's input while a directory query
   is in flight (Improvement 4). Positioned against the .position-relative wrapper;
   JS aligns its vertical centre to the input row. */
.picker-spinner {
  position: absolute;
  right: 0.6rem;
  /* Centre vertically via margin, not transform: the Bootstrap spinner-border
     animation drives `transform: rotate(...)`, so using transform here would fight
     it and make the spinner wobble instead of spin. JS sets `top` to the input's
     vertical centre; this margin pulls it up by half its own height. */
  margin-top: -0.5rem;
  pointer-events: none;
  z-index: 1001;
  width: 1rem;
  height: 1rem;
  border-width: 0.15em;
}

/* Single-select people field: click-to-edit read chip (Improvement 5). Reads as a
   quiet avatar + name value until hovered/focused, when it reveals a field-like
   affordance and a pencil, signalling it is editable. Clicking swaps in the input. */
.pp-display {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.2rem 1.6rem 0.2rem 0.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
}
.pp-display:hover,
.pp-display:focus-visible {
  border-color: var(--border);
  background: var(--surface-sunken);
}
.pp-display::after {
  content: "\270E"; /* pencil */
  position: absolute;
  right: 0.5rem;
  opacity: 0;
  font-size: 0.85em;
  color: var(--text-muted);
  transition: opacity 0.12s ease;
}
.pp-display:hover::after,
.pp-display:focus-visible::after {
  opacity: 0.75;
}
.pp-display-placeholder {
  color: var(--text-muted);
}
.pp-display-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* =========================================================================
   List-view title/name links (Improvement 4): cap long names so they don't
   shove the other columns right or wrap onto a second line. The host cell
   (.col-title) takes the row's leftover width and clips to it, so names only
   ellipsize when they genuinely don't fit — not at a fixed character count.
   ========================================================================= */
.col-title {
  width: 100%;
  max-width: 0;
  overflow: hidden;
}
.cell-title {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* When the title shares its cell with a trailing badge, lay them out as a flex
   row so the name truncates while the badge stays on the same line. */
.col-title__wrap {
  display: flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}
.col-title__wrap > .cell-title {
  min-width: 0;
}
.col-title__wrap > :not(.cell-title) {
  flex: 0 0 auto;
}
/* A secondary truncating column (e.g. Work "Source"): sized to its content up
   to a cap and ellipsized beyond it — unlike .col-title it is not greedy, so it
   doesn't fight the primary title column for the row's leftover width. */
.col-source {
  max-width: 16rem;
  overflow: hidden;
}
/* Siblings of the greedy title column stay on one line, so they claim only
   their natural width and the title takes the leftover space — without pushing
   anyone onto a second row (Improvement 4 follow-up). Overflow, if any, scrolls
   via the surrounding .table-responsive rather than wrapping. */
table:has(.col-title) > tbody > tr > td,
table:has(.col-title) > thead > tr > th {
  white-space: nowrap;
}

/* =========================================================================
   LIST SURFACE — solid panels for the main lists
   Give every main list (Work lens, Tasks, Private Tasks, Goals, RFx) a solid,
   softly-elevated card surface so rows read as one cohesive panel instead of
   floating on the app background. Applied to the .table-responsive wrappers
   inside a page's main column, so all list surfaces share one modern identity
   and light/dark parity by construction. The Goals timeline and the My Focus
   band are deliberately excluded — they carry their own layout.
   ========================================================================= */
.page-main .table-responsive {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  /* Clip the rows to the rounded corners while preserving horizontal scroll
     on narrow viewports (the table itself never scrolls vertically). */
  overflow-x: auto;
  overflow-y: hidden;
}

/* Table hugs the panel: flush to the rounded edges, no stray bottom margin. */
.page-main .table-responsive > .table {
  margin-bottom: 0;
}
/* Breathing room where the first/last columns meet the panel edge. */
.page-main .table-responsive > .table > :not(caption) > * > *:first-child {
  padding-left: 1rem;
}
.page-main .table-responsive > .table > :not(caption) > * > *:last-child {
  padding-right: 1rem;
}
/* Header band: a subtly sunken strip that anchors the column labels and reads
   as part of the panel rather than a floating row. Rounds the top corners. */
.page-main .table-responsive > .table > thead > tr > th {
  background-color: var(--surface-sunken);
  border-bottom-color: var(--border);
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
.page-main .table-responsive > .table > thead > tr > th:first-child {
  border-top-left-radius: var(--radius-lg);
}
.page-main .table-responsive > .table > thead > tr > th:last-child {
  border-top-right-radius: var(--radius-lg);
}
/* The panel's own border closes off the bottom — drop the last row's hairline
   so the two don't stack into a double line. */
.page-main .table-responsive > .table > tbody > tr:last-child > * {
  border-bottom: 0;
}

/* --- My Focus band (ADR 0033): per-User curated focus list on the Work lens --- */
.focus-panel {
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  box-shadow: var(--shadow-sm);
  padding: 0.85rem 1rem 1rem;
  margin-bottom: 1.25rem;
}
.focus-panel__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.focus-panel__title { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--text); }
/* The header cycles the band view on click (collapsed → expanded → focus); the live
   controls inside it keep their own cursors. */
.focus-panel__head { cursor: pointer; }
.focus-panel__head button,
.focus-panel__head input,
.focus-panel__head label,
.focus-panel__head a { cursor: auto; }
.focus-panel__head button,
.focus-panel__head .focus-autoremove .form-check-input,
.focus-panel__head .focus-autoremove .form-check-label { cursor: pointer; }
.focus-panel__count { font-variant-numeric: tabular-nums; }
.focus-panel__actions { display: inline-flex; align-items: center; gap: 0.75rem; }
.focus-autoremove { display: inline-block; padding-left: 0; min-height: 0; margin: 0; white-space: nowrap; }
.focus-autoremove .form-check-input { margin: 0 0.45rem 0 0; float: none; vertical-align: middle; }
.focus-autoremove .form-check-label { margin: 0; vertical-align: middle; cursor: pointer; color: var(--text-muted); }
.focus-panel__body { border-radius: 0.5rem; }
.focus-panel__drop { border-radius: 0.5rem; transition: background-color 0.12s ease, box-shadow 0.12s ease; }
.focus-panel__drop.is-droptarget {
  background-color: var(--accent-subtle);
  box-shadow: inset 0 0 0 2px var(--accent);
}
.focus-empty {
  border: 1px dashed var(--border-strong, var(--border));
  border-radius: 0.5rem;
  padding: 1.1rem 1rem;
  text-align: center;
  color: var(--text-muted, var(--neutral));
  font-size: 0.9rem;
}

/* Leading control column shared by the Work list (star) and the band (grip + remove). */
.col-focus { width: 2.75rem; white-space: nowrap; text-align: center; }
/* My Focus band: a self-updating position number that matches the manual-sort number
   on Subtasks / RFx Tasks (the .wic-num pill), sitting right after the drag grip. A CSS
   counter renumbers automatically on drag-reorder, add, and remove — no JS bookkeeping.
   The band's leading column is widened to fit grip + pill + remove, all middle-aligned. */
.focus-panel .col-focus { width: 4.75rem; }
.focus-panel .col-focus > * { vertical-align: middle; }
tbody[data-focus-list] { counter-reset: focusnum; }
tbody[data-focus-list] > tr { counter-increment: focusnum; }
.focus-num { margin: 0 0.15rem; }
.focus-num::before { content: counter(focusnum); }
.focus-add {
  background: none; border: none; padding: 0.1rem 0.25rem; line-height: 1;
  font-size: 1.05rem; cursor: pointer; color: var(--border-strong, var(--neutral));
  opacity: 0.55; transition: color 0.12s ease, opacity 0.12s ease;
}
.focus-add:hover { opacity: 1; color: var(--accent); }
.focus-add.is-on { color: var(--accent); opacity: 1; cursor: pointer; }
.focus-add:disabled { cursor: default; }
.focus-grip { cursor: grab; color: var(--text-muted); user-select: none; line-height: 1; margin-right: 0.15rem; }
.focus-grip:active { cursor: grabbing; }
.focus-remove {
  background: none; border: none; padding: 0 0.2rem; line-height: 1;
  font-size: 1.05rem; cursor: pointer; color: var(--neutral); opacity: 0.7;
}
.focus-remove:hover { color: var(--danger); opacity: 1; }

.focus-row { cursor: grab; }
.focus-row.is-dragging { opacity: 0.45; }
tr.is-dragging { opacity: 0.45; }
/* My Focus band: a Done pick lingers greyed + struck through (ADR 0033), aligned with
   the rest of the Work lens. !important beats the title link's .text-decoration-none. */
.focus-row--done .col-title .cell-title { text-decoration: line-through !important; color: var(--bs-secondary-color); }

/* Focus mode: fill the screen and tuck the browse list + filters away. Done purely
   with a flexbox chain (body → container → main → panel → list) rather than JS pixel
   measuring, so the band fills to the exact viewport bottom with no post-load reflow,
   and the list scrolls internally (overflow:hidden guarantees no page scrollbar). */
body.focus-mode [data-work-shell] { display: none; }
body.focus-mode {
  height: 100vh; height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.focus-mode > header { flex: 0 0 auto; }
body.focus-mode > .app-container { flex: 1 1 auto; min-height: 0; display: flex; }
body.focus-mode main { flex: 1 1 auto; min-height: 0; width: 100%; display: flex; flex-direction: column; }
body.focus-mode .focus-panel {
  flex: 1 1 auto; min-height: 0; margin-bottom: 0;
  display: flex; flex-direction: column;
}
body.focus-mode .focus-panel__body,
body.focus-mode .focus-panel__drop { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
body.focus-mode [data-focus-table-wrap] { flex: 1 1 auto; min-height: 0; max-height: none; overflow-y: auto; }

/* My Focus: header grouping + three-position view toggle (ADR 0033). */
.focus-panel__headmain { display: inline-flex; align-items: center; gap: 0.4rem; }
.focus-viewtoggle .btn { display: inline-flex; align-items: center; }
.focus-viewtoggle .btn:focus:not(:focus-visible) { box-shadow: none; }
.focus-viewtoggle .btn.active {
  background-color: var(--accent); border-color: var(--accent); color: #fff;
}
.focus-panel--collapsed .focus-panel__body { display: none; }
.focus-panel--collapsed { padding-top: 0.55rem; padding-bottom: 0.55rem; }
.focus-panel--collapsed .focus-panel__head { margin-bottom: 0; }

/* My Focus: quick-add a private task (ADR 0030 entry point). */
.focus-quickadd { display: flex; gap: 0.5rem; margin-bottom: 0.65rem; }
.focus-quickadd input { width: 26rem; max-width: 100%; }
/* Shared “arrow link” used by the Details "Back" links and the My Focus → Private Tasks
   shortcut: the Details link weight/size, a feather SVG arrow rendered via a CSS mask
   (so it inherits currentColor — no inline SVG per link), and a hover pill. */
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.875em;
  text-decoration: none;
  padding: 0.3rem 0.55rem;
  border-radius: 0.45rem;
  transition: color 0.12s ease, background-color 0.12s ease;
}
.arrow-link:hover { background: var(--accent-subtle); }
/* Pull the back link's left padding out so its arrow still aligns with the page edge /
   the title below it; the hover pill just bleeds slightly left. */
.arrow-link--back { margin-left: -0.55rem; }
.arrow-link--back::before,
.arrow-link--fwd::after {
  content: "";
  width: 0.9em;
  height: 0.9em;
  flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.arrow-link--back::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cline%20x1=%2219%22%20y1=%2212%22%20x2=%225%22%20y2=%2212%22/%3E%3Cpolyline%20points=%2212%2019%205%2012%2012%205%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cline%20x1=%2219%22%20y1=%2212%22%20x2=%225%22%20y2=%2212%22/%3E%3Cpolyline%20points=%2212%2019%205%2012%2012%205%22/%3E%3C/svg%3E");
}
.arrow-link--fwd::after {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cline%20x1=%225%22%20y1=%2212%22%20x2=%2219%22%20y2=%2212%22/%3E%3Cpolyline%20points=%2212%205%2019%2012%2012%2019%22/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22%23000%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cline%20x1=%225%22%20y1=%2212%22%20x2=%2219%22%20y2=%2212%22/%3E%3Cpolyline%20points=%2212%205%2019%2012%2012%2019%22/%3E%3C/svg%3E");
}

/* My Focus: cap the band's list with an internal scroll so it never pushes the
   filter rail / main table down indefinitely (ADR 0033). Taller in focus mode. */
[data-focus-table-wrap] { max-height: 42vh; overflow-y: auto; }
[data-focus-table-wrap] thead th {
  position: sticky; top: 0; z-index: 2; background-color: var(--surface-card);
}

/* ============================================================================
   Group Scopes (ADR 0029): a master–detail settings surface. A left rail lists
   the baseline + field slots with sub-headings; the right pane shows the groups
   bound to the selected slot as rich rows (name · member count · object ID).
   ========================================================================== */
.gscope {
  display: grid;
  grid-template-columns: minmax(240px, 336px) 1fr;
  gap: 1.25rem;
  align-items: start;
}
@media (max-width: 820px) {
  .gscope { grid-template-columns: 1fr; }
  .gscope__rail { position: static; }
}

/* --- left rail --- */
.gscope__rail {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  position: sticky;
  top: 1rem;
}
.gscope__navitem {
  display: grid;
  gap: 0.2rem;
  width: 100%;
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 0.6rem;
  padding: 0.6rem 0.8rem;
  cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease;
}
.gscope__navitem:hover { background: var(--surface-sunken); }
.gscope__navitem.is-active {
  border-color: var(--accent);
  background: var(--accent-subtle);
}
.gscope__navmain { display: flex; align-items: center; gap: 0.4rem; }
.gscope__navlabel { font-weight: 600; color: var(--text); }
.gscope__navdesc {
  font-size: 0.78rem;
  color: var(--text-muted);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gscope__navstatus {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.74rem;
  margin-top: 0.1rem;
}

/* --- shared tags + status pills --- */
.gscope__tag {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 0.1rem 0.42rem;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.gscope__tag--baseline { background: var(--accent-subtle); color: var(--accent); border-color: transparent; }
.gscope__tag--warn { background: transparent; color: var(--warning); border-color: var(--warning); }
.gscope__pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.4em;
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.72rem;
  background: var(--accent-subtle);
  color: var(--accent);
}
.gscope__pill--warn { background: transparent; color: var(--warning); border: 1px solid var(--warning); }
.gscope__pilltext { color: var(--text-muted); }
.gscope__inherit { color: var(--text-faint); font-style: italic; }

/* --- right detail pane --- */
.gscope__panels { min-width: 0; }
.gscope__panel {
  background: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: 0.7rem;
  padding: 1.1rem 1.2rem 1.2rem;
}
.gscope__panel.is-baseline { border-color: var(--accent); }
.gscope__panelhead { margin-bottom: 1rem; }
.gscope__paneltitle { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.gscope__paneldesc { margin: 0.45rem 0 0; color: var(--text-muted); font-size: 0.9rem; max-width: 62ch; }
.gscope__panelnote { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--text-faint); }

/* --- group typeahead --- */
.gscope__pickerrow { margin-bottom: 0.9rem; }
.gscope .group-picker { max-width: 26rem; }
.gscope__pickericon {
  position: absolute;
  left: 0.6rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-faint);
  pointer-events: none;
}
.gscope .group-picker-input { padding-left: 2rem; }

/* --- bound-group rows --- */
.gscope__groups { display: flex; flex-direction: column; gap: 0.5rem; }
.gscope-group {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--surface-sunken);
  border: 1px solid var(--border);
  border-radius: 0.55rem;
  padding: 0.55rem 0.7rem;
}
.gscope-group__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  flex: none;
  border-radius: 50%;
  background: var(--accent-subtle);
  color: var(--accent);
}
.gscope-group__body { min-width: 0; flex: 1 1 auto; }
.gscope-group__name {
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gscope-group__meta {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 0.76rem;
  color: var(--text-muted);
  min-width: 0;
}
.gscope-group__count { font-weight: 600; white-space: nowrap; }
.gscope-group__dot { color: var(--text-faint); }
.gscope-group__oid {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--text-faint);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gscope-group__remove {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  border-radius: 50%;
  background: transparent;
  border: none;
  color: var(--text-faint);
  cursor: pointer;
  transition: background-color 0.12s ease, color 0.12s ease;
}
.gscope-group__remove:hover { background: var(--danger-subtle); color: var(--danger); }
.gscope-group.is-unresolved { border-color: var(--danger); }
.gscope-group.is-unresolved .gscope-group__icon { background: var(--danger-subtle); color: var(--danger); }
.gscope-group.is-unresolved .gscope-group__name { color: var(--danger); }

/* --- empty state --- */
.gscope__empty {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-faint);
  font-size: 0.85rem;
  border: 1px dashed var(--border-strong);
  border-radius: 0.55rem;
  padding: 0.9rem 1rem;
}
.gscope__empty svg { flex: none; }

/* Search hit: a matching child (subtask / RFx task) revealed by a title search. Its
   parent is auto-expanded (search-expand.js) and the matching row/card is tinted. */
tr.task-subrow.search-hit > td { background-color: var(--accent-subtle); }
tr.task-subrow.search-hit > td.col-title { box-shadow: inset 3px 0 0 var(--accent); }
.task-subitem.search-hit {
  background-color: var(--accent-subtle);
  box-shadow: inset 2px 0 0 var(--accent);
  padding-left: 0.45rem;
}

/* Shared list-row "…" action menu (Open / Archive / Delete) — aligns the Task
   Planner, RFx and Goals lists on one context menu. */
.row-actions { display: inline-block; }
/* Center the kebab in its action cell (overrides the cell's .text-end). */
td:has(> .row-actions) { text-align: center !important; }
.row-actions__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.row-actions__toggle:hover,
.row-actions__toggle[aria-expanded="true"] {
  background-color: var(--surface-sunken);
  border-color: var(--border);
  color: var(--text);
}
.row-actions__menu {
  position: fixed;
  z-index: 1055;
  min-width: 9rem;
  padding: .2rem;
  background-color: var(--surface-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.row-actions__form { margin: 0; }
.row-actions__item {
  display: block;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  color: var(--text);
  font-size: .82rem;
  padding: .35rem .55rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
}
.row-actions__item:hover { background-color: var(--surface-sunken); }
.row-actions__item--danger { color: var(--bs-danger, #dc3545); }
.row-actions__item--danger:hover { background-color: var(--accent-subtle); }

/* Bulk-archive button aligned with the header of the section it acts on (Done /
   Closed / Achieved), not floating above it. */
.bulk-scope { position: relative; }
.bulk-scope__bar {
  position: absolute;
  top: .3rem;
  right: 0;
  z-index: 2;
}

/* Archive bulk restore/delete bar: sits at the top-right of the list column, aligned
   with the first time-period header without pushing the tables down, and reads as a
   page-level action (not owned by that first section). */
.page-main { position: relative; }
.arch-bulk-bar {
  position: absolute;
  top: .3rem;
  right: 0;
  z-index: 3;
  display: flex;
  gap: .5rem;
}

/* ===== Notifications (ADR 0038) ===== */

/* Bell badge: centered counter, no ring/shadow. */
.notif-badge {
  position: absolute;
  top: -.25rem;
  right: -.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.05rem;
  height: 1.05rem;
  padding: 0 .28rem;
  border-radius: 999px;
  background: var(--danger, #dc3545);
  color: #fff;
  font-size: .66rem;
  font-weight: 700;
  line-height: 1;
}
.notif-badge.d-none { display: none !important; }

/* Shared icon-button (mark-read / dismiss): squared with soft-rounded corners,
   matching the app's control language (not fully circular). */
.notif-iconbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.9rem;
  height: 1.9rem;
  border-radius: .45rem;
  border: 1px solid transparent;
  background: transparent;
  color: var(--bs-secondary-color);
  cursor: pointer;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.notif-iconbtn:hover {
  background: var(--bs-tertiary-bg);
  border-color: var(--bs-border-color);
  color: var(--bs-emphasis-color);
}

/* Target-name link (the click-through). */
.notif-target, .notif-card__target {
  font-weight: 600;
  color: var(--bs-link-color);
  text-decoration: none;
}
.notif-target:hover, .notif-card__target:hover { text-decoration: underline; }
.notif-target--dead, .notif-card__target--dead {
  color: var(--bs-secondary-color);
  font-weight: 600;
  text-decoration: line-through;
  cursor: default;
}

/* --- Cards (page + panel share the .notif-card shape) --- */
.notif-cards { display: flex; flex-direction: column; gap: .5rem; }
.notif-panel-list { display: flex; flex-direction: column; gap: .6rem; }
.notif-card {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  padding: .85rem .9rem;
  background: var(--surface-card);
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  box-shadow: 0 1px 2px rgba(0,0,0,.05);
  transition: box-shadow .12s ease, border-color .12s ease;
}
.notif-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.notif-card--clickable { cursor: pointer; }
.notif-card--unread {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--bs-border-color));
  background: color-mix(in srgb, var(--accent) 6%, var(--surface-card));
}
.notif-card__body { flex: 1 1 auto; min-width: 0; }
.notif-card__title { display: flex; align-items: center; gap: .4rem; font-weight: 700; }
.notif-card__msg { color: var(--bs-secondary-color); margin-top: .1rem; }
.notif-card__time { color: var(--bs-secondary-color); font-size: .78rem; margin-top: .3rem; }
.notif-card__actions { display: flex; align-items: center; gap: .15rem; flex: 0 0 auto; }

/* Bigger, tasteful actor photo in notification surfaces; top-aligned with the title text. */
.notif-card .avatar, .notif-toast .avatar {
  width: 2.25rem;
  height: 2.25rem;
  font-size: .82rem;
  margin-top: .18rem;
}
/* Panel + toast titles are a touch smaller, so nudge their photos down a little more. */
.notif-panel-list .notif-card .avatar, .notif-toast .avatar { margin-top: .3rem; }
.notif-toast--clickable { cursor: pointer; }

/* Kill the default blue focus ring on the bell and the panel (keep a neutral hover). */
#notif-bell:focus,
#notif-bell:focus-visible { outline: none; box-shadow: none; }
.notif-panel:focus,
.notif-panel:focus-visible { outline: none !important; box-shadow: none; }

/* --- Side panel (offcanvas): straight edge (flush shadow), solid surface --- */
.notif-panel { background: var(--surface-app); }
.notif-panel__head { border-bottom: 1px solid var(--bs-border-color); }
.notif-panel__body { padding: .9rem; }
.notif-panel__toolbar { display: flex; justify-content: flex-end; margin-bottom: .6rem; }
.notif-panel__foot { background: var(--surface-app); }
.notif-panel-list .notif-card__title { font-size: .95rem; }
.notif-panel-list .notif-card__msg { font-size: .88rem; }

/* --- Toast: solid card, slides up on enter, collapses down on leave --- */
.notif-toast {
  display: flex;
  align-items: flex-start;
  gap: .7rem;
  width: 25rem;
  max-width: calc(100vw - 2rem);
  margin-top: .65rem;
  padding: .95rem 1rem;
  overflow: hidden;
  pointer-events: auto; /* the Bootstrap .toast-container is pointer-events:none */
  border: 1px solid var(--bs-border-color);
  border-radius: var(--radius);
  background: var(--surface-card);
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  max-height: 16rem;
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .25s ease, transform .25s cubic-bezier(.2,.7,.3,1),
              max-height .3s ease, margin-top .3s ease, padding .3s ease;
}
.notif-toast--in { opacity: 1; transform: translateY(0); }
.notif-toast--leaving {
  opacity: 0;
  transform: translateY(.5rem);
  max-height: 0;
  margin-top: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
}
.notif-toast__main { flex: 1 1 auto; min-width: 0; }
.notif-toast__head { display: flex; align-items: center; gap: .5rem; }
.notif-toast__title { font-weight: 700; flex: 1 1 auto; }
.notif-toast__x { width: 1.6rem; height: 1.6rem; }
.notif-toast__msg { color: var(--bs-secondary-color); margin-top: .3rem; }

/* --- Notification settings: one card per setting, independent Save --- */
.notif-settings { display: flex; flex-direction: column; gap: .75rem; max-width: 40rem; }
.setting-card { border-radius: .9rem; }
.setting-card .card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
}
.setting-card__label { min-width: 0; }
.setting-card__control { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; justify-content: flex-end; }
.setting-card__control .form-control { width: 6rem; }
.setting-card__unit { color: var(--bs-secondary-color); font-size: .9rem; min-width: 4rem; text-align: left; }
.setting-card__foot {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem 1rem;
  border-top: 1px solid var(--bs-border-color);
  color: var(--bs-secondary-color);
  font-size: .8rem;
}