/* App layout + components — buildless SPA, Sensr brand.
   Companion to brand.css (tokens). No build step required. */

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT — sidebar + content column
   ═══════════════════════════════════════════════════════════════════════════ */

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

/* ── Sidebar ─────────────────────────────────────────────────────────────── */

.app-sidebar {
  width: var(--sidebar-width);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  color: var(--color-text);
  border-right: 1px solid var(--color-border);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: var(--z-drawer);
  overflow: hidden; /* logo + footer pin; only .app-nav scrolls */
  transition: transform var(--duration-normal) var(--ease-out);
}

.sidebar-logo {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-5) var(--space-5) var(--space-6);
  text-decoration: none !important;
}

.sidebar-logo img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.sidebar-logo-text {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.app-nav {
  flex: 1;
  min-height: 0; /* allow shrinking inside flex column */
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: 0 var(--space-3) var(--space-3);
}

.nav-link {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius);
  color: var(--sidebar-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.nav-link:hover {
  background: var(--sidebar-hover);
  color: var(--color-text);
  text-decoration: none;
}

.nav-link.active {
  background: var(--sidebar-active);
  color: var(--sidebar-active-text);
}

/* Nav section label */
.nav-section {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--space-4) var(--space-3) var(--space-1);
}

/* Remove top gap from the first section so there's no dead space below the logo */
.nav-section.first {
  padding-top: var(--space-1);
}

/* Sidebar footer: user badge + sign-out */
.sidebar-footer {
  padding: var(--space-4) var(--space-4) var(--space-5);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-4);
}

.user-badge {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.user-badge-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-badge-role {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.logout-btn {
  margin-top: var(--space-2);
  background: var(--color-surface);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family);
  cursor: pointer;
  width: 100%;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.logout-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

/* Hamburger (mobile only) */
.sidebar-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--color-text);
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* Sidebar overlay (mobile) */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(6, 6, 40, 0.5);
  z-index: calc(var(--z-drawer) - 1);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--duration-normal) var(--ease-out);
}

.sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Top bar (mobile) ───────────────────────────────────────────────────── */

.app-topbar {
  display: none;
  align-items: center;
  gap: var(--space-3);
  background: var(--sidebar-bg);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  position: sticky;
  top: 0;
  z-index: var(--z-raised);
}

.app-topbar img {
  height: 28px;
  width: auto;
}

.app-topbar > a {
  display: flex;
  align-items: center;
  line-height: 0;
}

.topbar-title {
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
  letter-spacing: -0.02em;
}

.topbar-spacer {
  flex: 1;
}

/* ── Main content area ──────────────────────────────────────────────────── */

.app-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.page-header {
  padding: var(--space-6) var(--space-8) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.page-header h1 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  letter-spacing: -0.02em;
}

main {
  padding: var(--space-6) var(--space-8);
  width: 80%;
  max-width: 1200px;
  margin: 0 auto;
}

/* A table with many columns — the questionnaire overview has eight — gets the
   width the screen has rather than 80% of it, but stays capped so rows do not
   stretch across an ultra-wide monitor. */
main.wide-main {
  width: 100%;
  max-width: 1600px;
  box-sizing: border-box;
}

/* Schedule gets more horizontal space */
main.schedule-main {
  max-width: none;
  padding: var(--space-5) var(--space-6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   PROGRESS BAR (top of page, driven by api.js in-flight counter)
   ═══════════════════════════════════════════════════════════════════════════ */

.progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--sensr-gradient);
  z-index: var(--z-toast);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out),
              opacity var(--duration-slow) var(--ease-out);
  opacity: 0;
}

.progress-bar.active {
  transform: scaleX(0.8);
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CARDS
   ═══════════════════════════════════════════════════════════════════════════ */

.card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-6);
}

.card + .card {
  margin-top: var(--space-5);
}

.accent-bar {
  height: 3px;
  border-radius: var(--radius-pill);
  background: var(--sensr-gradient);
  margin-bottom: var(--space-5);
}

.card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.card-head h2 {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0;
  margin-right: auto;
  letter-spacing: -0.01em;
}

/* A title with a status label beside it and a grey line of facts under it,
   for a detail page naming one thing. The block takes over the title's job of
   pushing the buttons to the right. */
.card-title-block {
  margin-right: auto;
  min-width: 0;
}

.card-title-block h2 {
  margin-right: 0;
}

.card-title-status {
  margin-left: var(--space-2);
  vertical-align: middle;
  letter-spacing: 0.02em;
}

.card-title-meta {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-sm);
}

/* One status label per person answering, under the grey line: "Ada [Draft
   saved]   Team lead (you) [Not started]". Wraps on a narrow screen rather
   than pushing the back button off the card. */
.card-title-parts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  margin-top: var(--space-3);
}

.card-title-part {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TABLES
   ═══════════════════════════════════════════════════════════════════════════ */

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

/* A header reads as part of its column, so it follows the values below it —
   which are left-aligned unless a cell asks otherwise. Columns that ARE
   centred (a status tag, a count) get a centred header from table() in
   public/js/ui.js, which copies .cell-center up out of the column. */
th {
  text-align: left;
  padding: var(--space-2) var(--space-4);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr {
  transition: background var(--duration-fast) var(--ease-out);
}

tbody tr:hover {
  background: var(--color-surface);
}

/* A list whose rows open something when clicked — see questionnaires.js. The
   row hover above is already there; only the cursor has to say that the whole
   line is the target and not just the link inside it. thead is untouched, so
   the sortable headers keep their own pointer. */
.rows-clickable tbody tr {
  cursor: pointer;
}

td a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
}

td a:hover {
  text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LIST SEARCH + PAGINATION
   ═══════════════════════════════════════════════════════════════════════════ */

.list-search-wrap {
  margin-bottom: var(--space-4);
}

.list-filter-bar {
  display: flex;
  align-items: center;
  /* Wraps, because the questionnaire bar can run to seven pills and a narrow
     window would otherwise push the row off the side. A no-op for the other
     eight screens using this class, which have never had enough in them to
     overflow. */
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-bottom: var(--space-3);
}

/* The selects of a filter bar, held together as one unit. The gap is
   DELIBERATELY TIGHTER than the bar's — 8px inside against 16px between — which
   is the whole of what makes two dropdowns read as a pair. The bar keeps its
   own spacing, so the eight other screens drawing a plain .list-filter-bar are
   untouched. */
.list-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* A pill group with the question it answers written in front of it. Two pill
   groups side by side are seven identical pills in a row, and a gap — however
   wide — only ever asks the reader to infer where one question ends. The word
   says it. See _labelled() in views/hr/questionnaires.js for why the selects
   beside them are NOT labelled: they already say what they are. */
.filter-labelled {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

/* "Clear filters", pushed to the far end of the bar. margin-left: auto rather
   than a fixed gap, so it sits away from the controls it undoes instead of
   reading as one more filter at the end of the row. The bar wraps, so on a
   narrow window it drops onto its own line and the auto margin costs nothing.
   Drawn only while something is narrowing the list — see clearFiltersButton()
   in public/js/ui.js. */
.filter-clear {
  margin-left: auto;
}

/* Full text colour and semibold, deliberately heavier than the pills beside it.
   It was muted and regular-weight to begin with, on the reasoning that the
   pills are what the reader acts on and a label competing with them would be
   worse than none. In use it went the other way: at muted xs it sat below the
   INACTIVE pills in weight, so the row read as eight pills with two faint
   things in it rather than as two labelled questions, which is the one job the
   label has.

   It stays at --font-size-xs, so it shares a baseline with the pills and the
   row keeps one line height. What changed is contrast and weight, which is what
   separates a heading from the things under it — not size, which would make the
   bar ragged. It stays quieter than the ACTIVE pill, which is inverse on the
   accent colour and still the loudest thing on the row. */
.filter-label {
  color: var(--color-text);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
}

/* Every control in the bar can be withdrawn — a filter with one meaningful
   setting is not drawn at all — so the bar itself can end up empty, and an
   empty flex row still spends its margin. display:flex outranks the UA's
   [hidden] rule, so hiding it needs saying explicitly, the same reason
   .skill-filter-chips carries one. */
.list-filter-bar[hidden] {
  display: none;
}

/* One filter drawn as pills instead of a <select>, for an axis worth switching
   with one click. It lives inside .list-filter-bar beside the selects on
   purpose: sitting on the same row as two obvious filters is what stops a row
   of buttons reading as a tab strip. Separate pills, never one divided
   rectangle and never an underline under the active item, for the same
   reason — see segmentedFilter() in public/js/ui.js. */
.filter-segments {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.filter-segment {
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.filter-segment:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.filter-segment:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.filter-segment[aria-checked="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

/* Still focusable and still announced — it is aria-disabled, not disabled, so
   that a category with no rows can be READ as empty rather than vanishing. It
   only has to look unavailable and refuse the click. */
.filter-segment[aria-disabled="true"] {
  opacity: 0.45;
  cursor: default;
}

.filter-segment[aria-disabled="true"]:hover {
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.list-search-input {
  width: 100%;
  max-width: 300px;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.list-search-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.list-paging {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-4);
  justify-content: flex-end;
}

.list-paging-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   TAGS / STATUS PILLS
   ═══════════════════════════════════════════════════════════════════════════ */

.tag {
  display: inline-block;
  padding: 2px var(--space-2);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  background: var(--color-surface);
  color: var(--color-text);
  letter-spacing: 0.02em;
}

.tag-ok      { background: var(--sensr-light-green); color: var(--sensr-dark-blue); }
.tag-dim     { background: var(--color-surface); opacity: 0.65; }
.tag-active  { background: var(--sensr-light-green); color: var(--sensr-dark-blue); }
.tag-prospect { background: #fff3cd; color: #7a5300; }
.tag-closed  { background: var(--color-surface); opacity: 0.65; }
.tag-warn    { background: #fff3cd; color: #7a5300; }
.tag-danger  { background: #fde8e8; color: #9b1c1c; }

/* The warning sign before a questionnaire's Send again button when there is no
   proof its mail went out. A button so a tap can show its text on a phone;
   drawn borderless in the same amber as .tag-warn. */
.mail-warning {
  background: none;
  border: 0;
  padding: 0 var(--space-1);
  color: #7a5300;
  font-size: var(--font-size-lg);
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
}

/* The warning sign and Send again stay on one line; the button dropping under
   the sign reads as a second, unrelated thing in the cell. */
.action-cell {
  white-space: nowrap;
}

/* Several status chips in one table cell — the questionnaire overview puts the
   self and lead halves of one round side by side. inline-flex so the chips
   keep the cell's own centring, and wrap rather than overflow when the column
   is narrow. */
.tag-stack {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   COLOUR SWATCH
   ═══════════════════════════════════════════════════════════════════════════ */

.swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
  margin-right: var(--space-2);
  vertical-align: middle;
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}

/* Swatch picker grid (Phase 3) */
.swatch-picker {
  display: grid;
  grid-template-columns: repeat(6, 28px);
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.swatch-option {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.swatch-option:hover {
  transform: scale(1.15);
}

.swatch-option.selected {
  border-color: var(--color-text);
  transform: scale(1.15);
}

.color-preview-row {
  display: flex;
  align-items: center;
  min-height: 24px;
  font-size: var(--text-sm);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORMS
   ═══════════════════════════════════════════════════════════════════════════ */

.form {
  max-width: 540px;
}

.form-row {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--space-5);
}

.form-row.inline {
  flex-direction: row;
  align-items: center;
  gap: var(--space-3);
}

.form-row label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
  color: var(--color-text);
}

/* Required asterisk */
.form-row label .req {
  color: var(--color-danger);
  margin-left: 2px;
}

/* Optional hint */
.form-row label .opt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-normal);
  color: var(--color-text-muted);
  margin-left: var(--space-1);
}

/* Hint text below the input */
.field-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

/* Per-field error */
.field-error {
  font-size: var(--font-size-xs);
  color: var(--color-danger);
  margin-top: var(--space-1);
}

.form-row input,
.form-row select,
.form-row textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.form-row textarea {
  resize: vertical;
  min-height: 80px;
  line-height: var(--line-height-normal);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.form-row input[aria-invalid="true"],
.form-row select[aria-invalid="true"],
.form-row textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.form-actions {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-2);
  align-items: center;
}

.form-error {
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  margin-bottom: var(--space-3);
  min-height: 1em;
}

.form-success {
  color: var(--color-ok);
  font-size: var(--font-size-sm);
  margin-top: var(--space-3);
}

/* Date input — the custom dd/mm/yyyy component */
.date-field {
  position: relative;
}

.date-field input {
  padding-right: 2.2rem;
}

.date-field .date-icon {
  position: absolute;
  right: var(--space-2);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: var(--font-size-md);
}

/* Combobox */
.combobox-wrap {
  position: relative;
}

.combobox-input {
  width: 100%;
}

.combobox-listbox {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  max-height: 220px;
  overflow-y: auto;
  z-index: var(--z-overlay);
  padding: var(--space-1) 0;
}

.combobox-option {
  padding: var(--space-2) var(--space-4);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out);
}

.combobox-option:hover,
.combobox-option[aria-selected="true"] {
  background: var(--color-surface);
}

.combobox-option[aria-selected="true"] {
  font-weight: var(--font-weight-semibold);
}

.combobox-empty {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-5);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  line-height: var(--line-height-tight);
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              opacity var(--duration-fast) var(--ease-out);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.btn:hover {
  text-decoration: none;
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border-color: var(--color-accent);
}

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

.btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

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

.btn-ghost:hover {
  background: var(--color-surface);
}

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

.btn-icon {
  padding: var(--space-1) var(--space-2);
  min-width: 32px;
}

.btn-danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
  margin-left: auto;
}

.btn-danger:hover {
  background: var(--color-danger);
  color: var(--color-text-inverse);
}

/* Active/pressed state (e.g. zoom level on schedule toolbar) */
.btn-ghost.btn-active {
  background: var(--color-surface);
  border-color: var(--color-accent-soft);
  color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MISC HELPERS
   ═══════════════════════════════════════════════════════════════════════════ */

.muted {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
}

.error-text {
  color: var(--color-danger);
}

/* ── Skeleton shimmer ─────────────────────────────────────────────────────── */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

.skeleton-line {
  height: 1em;
  border-radius: var(--radius-sm);
  background: linear-gradient(
    90deg,
    var(--color-surface) 25%,
    var(--color-surface-hover) 50%,
    var(--color-surface) 75%
  );
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}

.skeleton-row {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.skeleton-row .skeleton-line:nth-child(1) { flex: 2; }
.skeleton-row .skeleton-line:nth-child(2) { flex: 3; }
.skeleton-row .skeleton-line:nth-child(3) { flex: 1; }

/* ── Toast notifications ───────────────────────────────────────────────── */
#toast-region {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  z-index: var(--z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  pointer-events: none;
}

.toast {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  background: var(--sensr-dark-blue);
  color: var(--color-text-inverse);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  min-width: 200px;
  max-width: 360px;
  pointer-events: auto;
  animation: toast-in var(--duration-normal) var(--ease-out) both;
}

.toast.toast-error {
  background: var(--color-danger);
}

.toast.toast-ok {
  background: var(--sensr-medium-green);
  color: var(--sensr-dark-blue);
}

.toast.toast-out {
  animation: toast-out var(--duration-normal) var(--ease-in) both;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes toast-out {
  from { opacity: 1; transform: none; }
  to   { opacity: 0; transform: translateY(8px); }
}

/* ── Confirm dialog ────────────────────────────────────────────────────── */
.confirm-dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  max-width: 380px;
  width: 100%;
  font-family: var(--font-family);
  color: var(--color-text);
  animation: dialog-in var(--duration-normal) var(--ease-out) both;
}

.confirm-dialog::backdrop {
  background: rgba(6, 6, 40, 0.4);
  animation: backdrop-in var(--duration-normal) var(--ease-out) both;
}

.confirm-dialog p {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-base);
  line-height: var(--line-height-normal);
}

.confirm-dialog .dialog-actions {
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
}

/* ═══════════════════════════════════════════════════════════════════════════
   AUTH SCREENS
   ═══════════════════════════════════════════════════════════════════════════ */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  padding: var(--space-6);
}

.auth-page main {
  width: auto;
  max-width: none;
  margin: 0;
  padding: 0;
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8) var(--space-8) var(--space-6);
}

.auth-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-6);
}

.auth-logo img {
  height: 40px;
  width: auto;
}

.auth-card h2 {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-6);
  text-align: center;
  letter-spacing: -0.02em;
}

.auth-card .form {
  max-width: none;
}

/* The invited respondent's page. Same card as the auth screens, but a
   questionnaire does not fit in a 400px login box. */
.public-feedback-card {
  max-width: 720px;
}

.public-feedback-card h3 {
  font-size: var(--font-size-lg);
  margin: var(--space-5) 0 var(--space-3);
}

.auth-footer-link {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-5);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCHEDULE / GANTT
   ═══════════════════════════════════════════════════════════════════════════ */

.schedule-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.schedule-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3) var(--space-4);
  box-shadow: var(--shadow-sm);
}

.toolbar-group {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.toolbar-sep {
  width: 1px;
  height: 20px;
  background: var(--color-border);
  margin: 0 var(--space-2);
}

.toolbar-label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-left: var(--space-1);
}

.schedule-filter {
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  background: var(--color-bg);
  color: var(--color-text);
  max-width: 180px;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.schedule-filter:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

/* ── Custom Gantt timeline ───────────────────────────────────────────────── */

/* Outer container */
.gantt-container {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  background: var(--color-bg);
  overflow: hidden; /* clip the inner scroll el's radius */
}

/* The one scroll container — both axes scroll here */
.gantt-scroll {
  width: 100%;
  max-height: 65vh;
  overflow: auto;
  position: relative;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
}

/* Inner wrapper — sets the real scrollable width */
.gantt-inner {
  position: relative;
  min-width: 100%;
}

/* ── Axis (sticky top) ────────────────────────────────────────────────────── */

.gantt-axis {
  position: sticky;
  top: 0;
  z-index: 10;
  height: 52px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

/* Top-left cover so the name column header doesn't show content behind it */
.gantt-corner {
  position: sticky;
  left: 0;
  top: 0;
  z-index: 11;
  width: 200px;
  height: 100%;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  display: inline-block;
  flex-shrink: 0;
}

/* Month label band */
.gantt-month-band {
  position: absolute;
  top: 0;
  left: 200px; /* start after name column */
  right: 0;
  height: 24px;
  overflow: hidden;
}

.gantt-month-label {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  padding: 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  white-space: nowrap;
  overflow: hidden;
}

/* Day/week tick band */
.gantt-tick-band {
  position: absolute;
  top: 24px;
  left: 200px;
  right: 0;
  height: 28px;
  overflow: hidden;
}

.gantt-tick {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: var(--color-text-muted);
  border-right: 1px solid color-mix(in srgb, var(--color-border) 50%, transparent);
  user-select: none;
  box-sizing: border-box;
}

.gantt-tick-weekend {
  background: color-mix(in srgb, var(--color-border) 25%, transparent);
  color: color-mix(in srgb, var(--color-text-muted) 60%, transparent);
}

.gantt-tick-today {
  background: color-mix(in srgb, var(--color-accent) 15%, transparent);
  font-weight: var(--font-weight-bold);
  color: var(--color-accent);
}

/* Today vertical line */
.gantt-today-line {
  position: absolute;
  top: 52px; /* below the axis */
  bottom: 0;
  width: 2px;
  background: #ff7f6e;
  pointer-events: none;
  z-index: 5;
  display: none;
}

/* ── Rows ─────────────────────────────────────────────────────────────────── */

.gantt-rows {
  position: relative;
}

.gantt-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
  min-height: 44px;
}

.gantt-row:last-child {
  border-bottom: none;
}

/* Sticky left name column */
.gantt-namecell {
  position: sticky;
  left: 0;
  z-index: 3;
  width: 200px;
  min-width: 200px;
  flex-shrink: 0;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  padding: var(--space-2) var(--space-3);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  overflow: hidden;
}

.gantt-name {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Utilisation mini-bar + percentage */
.gantt-util-summary {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gantt-util-bar-wrap {
  display: flex;
  height: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.gantt-util-bar-confirmed {
  height: 100%;
  background: #4caf7d;
  transition: width 0.2s;
}

.gantt-util-bar-conditional {
  height: 100%;
  background: #d4863a;
  transition: width 0.2s;
}

.gantt-util-pct {
  font-size: 10px;
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  line-height: 1;
}

.gantt-util-ok {
  color: #4caf7d;
}

.gantt-util-over {
  color: #e05252;
}

.gantt-util-low {
  color: var(--color-text-muted);
}

.gantt-util-cond {
  font-weight: normal;
  opacity: 0.75;
}

/* ── Lane (scrollable area per row) ──────────────────────────────────────── */

.gantt-lane {
  position: relative;
  flex: 1;
  min-height: 44px;
  overflow: visible;
}

/* Weekend background stripes inside the lane */
.gantt-weekend-stripe {
  position: absolute;
  top: 0;
  bottom: 0;
  background: color-mix(in srgb, var(--color-border) 20%, transparent);
  pointer-events: none;
}

/* ── Capacity fill layer ──────────────────────────────────────────────────── */

.gantt-fill-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.gantt-fill-confirmed {
  position: absolute;
  background: rgba(76, 175, 125, 0.18);
  border-radius: 2px 2px 0 0;
}

.gantt-fill-conditional {
  position: absolute;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 3px,
    rgba(212, 134, 58, 0.25) 3px,
    rgba(212, 134, 58, 0.25) 6px
  );
  border-radius: 2px 2px 0 0;
}

/* Red cap for overbooked days */
.gantt-fill-overbooked {
  position: absolute;
  height: 3px;
  background: #e05252;
  border-radius: 2px 2px 0 0;
}

/* ── Bars layer ───────────────────────────────────────────────────────────── */

.gantt-bars-layer {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.gantt-bar {
  position: absolute;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  padding: 0 6px;
  cursor: default;
  user-select: none;
  box-sizing: border-box;
  overflow: hidden;
  transition: box-shadow 0.1s;
}

.gantt-bar:hover {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.25);
  z-index: 4;
}

.gantt-bar-label {
  font-size: 11px;
  font-weight: var(--font-weight-semibold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  pointer-events: none;
}

/* Prospect/tentative bar — hatch overlay applied via JS inline style */
.gantt-bar-prospect {
  border-style: dashed !important;
}

/* Drag handles on bar edges */
.gantt-bar-handle {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  cursor: ew-resize;
  z-index: 2;
  opacity: 0;
  transition: opacity 0.15s;
  background: rgba(255, 255, 255, 0.4);
}

.gantt-bar:hover .gantt-bar-handle {
  opacity: 1;
}

.gantt-bar-handle-left {
  left: 0;
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.gantt-bar-handle-right {
  right: 0;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

/* ── Responsive: hide Gantt on small screens, show table only ─────────────── */

@media (max-width: 700px) {
  .gantt-container {
    display: none;
  }
}

/* Assignment create/edit dialog */
.assignment-dialog {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-6);
  min-width: 320px;
  max-width: 480px;
  width: min(480px, calc(100vw - 2rem));
  font-family: var(--font-family);
  color: var(--color-text);
  animation: dialog-in var(--duration-normal) var(--ease-out) both;
}

.assignment-dialog::backdrop {
  background: rgba(6, 6, 40, 0.4);
  animation: backdrop-in var(--duration-normal) var(--ease-out) both;
}

.dialog-title {
  margin: 0 0 var(--space-5);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.dialog-error {
  min-height: 1.2em;
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
}

.dialog-actions {
  display: flex;
  gap: var(--space-2);
  margin-top: var(--space-5);
  align-items: center;
}

/* Schedule: upcoming assignments table */
.schedule-table-section {
  margin-top: var(--space-4);
}

.schedule-table-section h3 {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

/* Floating action button (mobile) */
.fab {
  position: fixed;
  bottom: var(--space-6);
  right: var(--space-6);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-text-inverse);
  border: none;
  box-shadow: var(--shadow-lg);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  z-index: var(--z-raised);
  transition: background var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.fab:hover {
  background: var(--color-accent-dark);
  transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CAPACITY REPORT
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Utilisation chart ──────────────────────────────────────────────────── */

.util-chart-wrap {
  margin-bottom: var(--space-5);
}

.util-chart-svg-wrap {
  position: relative;
}

.util-chart-svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Grid and reference lines */
.chart-grid-line {
  stroke: var(--color-border);
  stroke-width: 1;
}
.chart-ref-line {
  stroke: var(--color-danger);
  stroke-width: 1.2;
  stroke-dasharray: 5 4;
  opacity: 0.55;
}

/* Y-axis labels */
.chart-axis-label {
  font-size: 10px;
  font-family: var(--font-family);
  fill: var(--color-text-muted);
  text-anchor: end;
}

/* Column highlight for current month */
.chart-col-current {
  fill: var(--sensr-blue);
  fill-opacity: 0.05;
}

/* Bars */
.bar-confirmed {
  fill: var(--sensr-blue);
}
.bar-confirmed.bar-overbooked {
  fill: var(--color-danger);
}
.bar-conditional {
  /* fill is set inline to url(#util-prospect-hatch) */
  stroke: #d4863a;
  stroke-width: 0.5;
  stroke-opacity: 0.4;
}
.bar-internal {
  fill: #7d5fc4;
}

/* Hit targets (transparent overlays for tooltip) */
.chart-hit-target {
  cursor: default;
}

/* Month / year labels */
.chart-month-label {
  font-size: 11px;
  font-family: var(--font-family);
  fill: var(--color-text-muted);
  text-anchor: middle;
}
.chart-month-current {
  fill: var(--color-accent);
  font-weight: 600;
}
.chart-year-label {
  font-size: 10px;
  font-family: var(--font-family);
  fill: var(--color-text-muted);
  text-anchor: middle;
  opacity: 0.65;
}

/* Current month indicator dot */
.chart-current-dot {
  fill: var(--color-accent);
}

/* Tooltip */
.util-chart-tooltip {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  background: var(--color-text);
  color: var(--sensr-white);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-xs);
  line-height: 1.6;
  white-space: nowrap;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: var(--z-raised);
}
.util-chart-tooltip[hidden] { display: none; }
.util-chart-tooltip strong { font-weight: var(--font-weight-semibold); }
.util-chart-tooltip .tooltip-conditional { opacity: 0.75; }
.util-chart-tooltip .tooltip-internal { color: #d0c2f7; }

/* Legend */
.util-chart-legend {
  display: flex;
  gap: var(--space-5);
  margin-top: var(--space-2);
  justify-content: center;
}
.util-chart-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.legend-swatch {
  display: inline-block;
  width: 14px;
  height: 10px;
  border-radius: 2px;
  flex-shrink: 0;
}
.legend-swatch-confirmed {
  background: var(--sensr-blue);
}
.legend-swatch-conditional {
  background: repeating-linear-gradient(
    45deg,
    #d4863a 0px,
    #d4863a 3px,
    rgba(212, 134, 58, 0.2) 3px,
    rgba(212, 134, 58, 0.2) 6px
  );
  border: 1px solid rgba(212, 134, 58, 0.4);
}
.legend-swatch-internal {
  background: #7d5fc4;
}

/* ── Month navigator ─────────────────────────────────────────────────────── */

.capacity-toolbar {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.capacity-month-label {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  min-width: 160px;
  text-align: center;
}

/* ── Report table ────────────────────────────────────────────────────────── */

.cap-delta-pos { color: var(--sensr-medium-green); font-weight: var(--font-weight-semibold); }
.cap-delta-neg { color: var(--color-danger); font-weight: var(--font-weight-semibold); }

/* Column alignment, set on the cells and copied up onto the header by
   table() in public/js/ui.js. Text is left (the default), a tag or a label
   centred, and anything a reader compares or sums down the column — hours,
   money, a count — right, so the digits line up. */
.cell-center { text-align: center; }
.cell-right  { text-align: right; }

.cap-total,
.cap-total-label {
  font-weight: var(--font-weight-bold);
  border-top: 2px solid var(--color-border);
}

.cap-total-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Conditional (prospect) hours column */
.cap-conditional {
  color: #7a5300;
  font-size: var(--font-size-sm);
}
.cap-conditional-pct {
  opacity: 0.7;
  font-size: var(--font-size-xs);
}

/* Internal (non-billable) hours column */
.cap-internal {
  color: #5c4394;
  font-size: var(--font-size-sm);
}
.cap-internal-pct {
  opacity: 0.7;
  font-size: var(--font-size-xs);
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════════════════════════════════ */

@keyframes dialog-in {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: none; }
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── < 900px: collapse sidebar to drawer ──────────────────────────────── */
@media (max-width: 899px) {
  .app-sidebar {
    transform: translateX(-100%);
  }

  .app-sidebar.open {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
  }

  .app-topbar {
    display: flex;
  }

  .app-content {
    margin-left: 0;
  }

  .sidebar-toggle {
    display: flex;
  }

  /* Schedule table is primary on mobile; Gantt hidden */
  .vis-timeline-container {
    display: none;
  }

  .fab {
    display: flex;
  }

  main {
    padding: var(--space-3) var(--space-4);
    width: 100%;
    max-width: none;
    box-sizing: border-box;
  }

  main.schedule-main {
    padding: var(--space-3) var(--space-4);
  }

  #toast-region {
    bottom: var(--space-4);
    right: var(--space-4);
    left: var(--space-4);
  }

  .toast {
    max-width: none;
  }
}

/* ── < 640px: stacked tables, narrow dialogs ─────────────────────────── */
@media (max-width: 639px) {
  .card {
    padding: var(--space-4);
    border-radius: var(--radius);
  }

  .auth-card {
    padding: var(--space-6) var(--space-5);
  }

  .assignment-dialog {
    min-width: 0;
    width: min(480px, calc(100vw - 1.5rem));
  }

  .confirm-dialog {
    max-width: none;
    width: calc(100vw - 2rem);
  }

  /* Stacked table rows on very narrow screens */
  .table-responsive table,
  .table-responsive thead,
  .table-responsive tbody,
  .table-responsive th,
  .table-responsive td,
  .table-responsive tr {
    display: block;
  }

  .table-responsive thead {
    display: none;
  }

  .table-responsive td {
    border-bottom: none;
    padding: var(--space-1) var(--space-3);
  }

  .table-responsive td::before {
    content: attr(data-label);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    display: block;
    margin-bottom: 2px;
  }

  .table-responsive tr {
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    margin-bottom: var(--space-3);
    padding: var(--space-3) var(--space-1);
  }

  .table-responsive tr:hover {
    background: var(--color-surface);
  }

  .table-wrap {
    border: none;
    border-radius: 0;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   UTILITY
   ═══════════════════════════════════════════════════════════════════════════ */

/* Screen-reader only — visually hidden but accessible */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Input with inline prefix/suffix (e.g. currency symbol) ─────────────── */

.input-affix-wrap {
  display: flex;
  align-items: stretch;
}

.input-affix {
  display: flex;
  align-items: center;
  padding: 0 var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.input-affix-left {
  border-right: none;
  border-radius: var(--radius) 0 0 var(--radius);
}

.input-affix-right {
  border-left: none;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.input-affix-input {
  flex: 1;
  min-width: 0;
  border-radius: 0 var(--radius) var(--radius) 0;
}

/* When inside a .form-row, .form-row input (0-1-1) beats .input-affix-input
   (0-1-0) and adds a full border + wrong border-radius. Override both here. */
.form-row .input-affix-input {
  border-radius: 0 var(--radius) var(--radius) 0;
  border-left: none;
}

/* ═══════════════════════════════════════════════════════════════════════════
   BOARD — kanban pipeline (sales + future chapters)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Lock page scroll when board is active so columns scroll internally */
.app-shell:has(main.board-main) {
  height: 100vh;
  min-height: 0;
  overflow: hidden;
}

.app-content:has(main.board-main) {
  overflow: hidden;
}

/* Board view removes the content max-width so the 6-column grid can breathe */
main.board-main {
  max-width: none;
  padding: var(--space-5) var(--space-6);
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.board-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  flex: 1;
}

/* ── Board toolbar ───────────────────────────────────────────────────────── */

.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
}

.board-toolbar-title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
  margin: 0;
}

.board-toolbar-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
}

.board-toolbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.board-views {
  gap: var(--space-2);
}

/* Mine / Everyone toggle */
.seg-toggle {
  display: inline-flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.seg-toggle-btn {
  background: var(--color-bg);
  border: 0;
  padding: var(--space-1) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.seg-toggle-btn + .seg-toggle-btn {
  border-left: 1px solid var(--color-border);
}

.seg-toggle-btn.active {
  background: var(--color-accent);
  color: var(--color-text-inverse);
}

.board-filter-account .combobox-wrap {
  width: 11rem;
}

.board-filter-account .combobox-input {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

.board-filter-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  cursor: pointer;
}

.board-filter-check {
  gap: var(--space-2);
}

.board-filter-checkbox {
  cursor: pointer;
}

/* Small select used in the toolbar */
.select-sm {
  appearance: none;
  -webkit-appearance: none;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-1) var(--space-5) var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--color-text);
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-2) center;
}

.select-sm:focus {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ── Board slot (board engine renders here) ──────────────────────────────── */

.board-slot {
  flex: 1;
  min-height: 0;
  display: flex;
}

/* ── Board root ──────────────────────────────────────────────────────────── */

.board {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

/* ── Board scroll container ──────────────────────────────────────────────── */

.board-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  flex: 1;
  min-height: 0;
  display: flex;                     /* makes .board-cols a flex item so it fills height */
  align-items: stretch;
  padding-bottom: var(--space-4);    /* room for horizontal scrollbar */
  scroll-padding: var(--space-3);
}

/* Inner flex row — centered via auto margins when columns don't fill width */
.board-cols {
  display: flex;
  gap: var(--space-3);
  min-width: min-content;
  align-items: stretch;
  margin: 0 auto;
}

.board-scroll::-webkit-scrollbar {
  height: 6px;
}

.board-scroll::-webkit-scrollbar-track {
  background: var(--color-surface);
  border-radius: 3px;
}

.board-scroll::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}

/* ── Column ──────────────────────────────────────────────────────────────── */

.board-col {
  display: flex;
  flex-direction: column;
  width: 264px;
  min-width: 264px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.board-col-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
  flex-shrink: 0;
}

.board-col-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.board-col-count {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--space-2);
}

.board-col-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-height: 80px;
}

.board-load-more {
  width: 100%;
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s, color 0.15s;
}

.board-load-more:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.board-col-foot {
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  flex-shrink: 0;
}

.board-foot-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.board-foot-total {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.board-foot-weighted {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ── Card ────────────────────────────────────────────────────────────────── */

.board-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: var(--space-3);
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: box-shadow var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out);
}

.board-card:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--color-text-muted);
}

.board-card:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* The column a dragged card would land in if let go now. */
.board-col--over {
  border-color: var(--sensr-blue);
  box-shadow: 0 0 0 2px var(--sensr-blue);
}

.board-card--placeholder {
  opacity: 0;
  pointer-events: none;
}

.board-card--ghost {
  box-shadow: var(--shadow-lg);
  cursor: grabbing;
  opacity: 0.92;
}

/* ── Card inner layout ───────────────────────────────────────────────────── */

.board-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.board-card-swatch {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--color-border);
}

.board-card-company {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.board-card-title {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  text-decoration: none;
  margin-bottom: var(--space-2);
  line-height: var(--line-height-tight);
}

.board-card-title:hover {
  color: var(--sensr-blue);
  text-decoration: underline;
}

.board-card-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-1);
}

.board-card-amount {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.board-card-prob {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  padding: 1px var(--space-2);
}

.board-card-date {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-1);
}

.board-card-owner {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 2px;
}

/* ── Stage tag colours ───────────────────────────────────────────────────── */

.stage-identified  { background: rgba(104, 117, 217, 0.12); color: #5256c8; }
.stage-in-contact  { background: rgba(59, 130, 246, 0.12);  color: #1d4ed8; }
.stage-preparing   { background: rgba(245, 158, 11, 0.12);  color: #b45309; }
.stage-awaiting    { background: rgba(249, 115, 22, 0.12);  color: #c2410c; }
.stage-won         { background: rgba(34, 197, 94, 0.12);   color: #15803d; }
.stage-lost        { background: rgba(239, 68, 68, 0.12);   color: #b91c1c; }
.stage-no-bid      { background: rgba(100, 116, 139, 0.12); color: #475569; }

/* ── Candidate status pills ─────────────────────────────────────────────── */
.status-pool             { background: rgba(100, 116, 139, 0.12); color: #475569; }
.status-contacted        { background: rgba(104, 117, 217, 0.12); color: #5256c8; }
.status-first-interview  { background: rgba(59,  130, 246, 0.12); color: #1d4ed8; }
.status-second-interview { background: rgba(14,  165, 233, 0.12); color: #0369a1; }
.status-offer            { background: rgba(245, 158, 11,  0.12); color: #b45309; }
.status-hired            { background: rgba(34,  197, 94,  0.12); color: #15803d; }
.status-closed           { background: rgba(100, 116, 139, 0.12); color: #475569; }
.status-rejected         { background: rgba(239, 68,  68,  0.12); color: #b91c1c; }
.status-freelance-pool   { background: rgba(168, 85,  247, 0.12); color: #7e22ce; }

/* ── Interview calendar ─────────────────────────────────────────────────── */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin-top: var(--space-4);
}

.cal-day-header {
  background: var(--color-surface);
  padding: var(--space-2);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.cal-cell {
  background: var(--color-bg);
  min-height: 80px;
  padding: var(--space-2);
  vertical-align: top;
}

.cal-cell-blank {
  background: var(--color-surface);
}

.cal-cell-today {
  background: rgba(var(--sensr-blue-rgb, 59, 130, 246), 0.06);
}

.cal-day-num {
  display: block;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-bottom: var(--space-1);
}

.cal-chip {
  display: block;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  padding: 1px 5px;
  border-radius: 4px;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}

.cal-chip:hover {
  opacity: 0.85;
}

/* ── Responsive — stack columns below 900px ──────────────────────────────── */

@media (max-width: 900px) {
  main.board-main {
    overflow: visible;
    padding: var(--space-3) var(--space-4);
  }

  .board-scroll {
    overflow-x: visible;
    overflow-y: visible;
    flex: none;
    display: block;
  }

  .board-cols {
    flex-direction: column;
    width: 100%;
  }

  .board-col {
    width: 100%;
    min-width: 0;
  }

  .board-col-body {
    max-height: 360px;
  }

  .app-shell:has(main.board-main) {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .app-content:has(main.board-main) {
    overflow: visible;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DEAL DETAIL — two-column layout + activity feed + reminders + timeline
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Header ──────────────────────────────────────────────────────────────── */

.deal-detail-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.deal-detail-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.deal-detail-title-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 1;
  min-width: 0;
}

.deal-detail-name {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  margin: 0;
  letter-spacing: -0.02em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.deal-detail-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ── Two-column body ─────────────────────────────────────────────────────── */

.deal-detail-body {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-5);
  align-items: start;
}

.deal-detail-left,
.deal-detail-right {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* ── Company colour swatch (small inline circle) ────────────────────────── */

.company-swatch {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1px solid rgba(0, 0, 0, 0.08);
}

/* ── Deal summary ────────────────────────────────────────────────────────── */

.deal-summary h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

.summary-list {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-5);
  margin: 0 0 var(--space-3);
}

.summary-list dt {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  white-space: nowrap;
  padding: var(--space-1) 0;
}

.summary-list dd {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin: 0;
  padding: var(--space-1) 0;
}

.deal-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-3);
  white-space: pre-wrap;
}

/* ── Section headings inside cards ───────────────────────────────────────── */

.deal-detail-left .card h3,
.deal-detail-right .card h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-semibold);
}

/* ── Activity composer ────────────────────────────────────────────────────── */

.activity-composer {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
  align-items: flex-start;
}

.activity-composer input,
.activity-composer select,
.activity-composer textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.activity-composer input:focus,
.activity-composer select:focus,
.activity-composer textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.activity-composer-type {
  width: 110px;
  flex-shrink: 0;
}

.activity-composer-subject {
  flex: 1;
  min-width: 140px;
}

.activity-composer-body {
  width: 100%;
  resize: vertical;
  min-height: 60px;
  flex-shrink: 0;
}

/* ── Activity feed ────────────────────────────────────────────────────────── */

.activity-feed {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.activity-item {
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-3);
}

.activity-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-bottom: var(--space-1);
}

.activity-type-tag {
  font-size: var(--font-size-xs);
  text-transform: capitalize;
}

.activity-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.activity-by {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.activity-by::before {
  content: "·";
  margin-right: var(--space-2);
}

.activity-subject {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-1);
}

.activity-body {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
  white-space: pre-wrap;
}

.activity-delete {
  margin-left: auto;
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.activity-edit {
  color: var(--color-text-muted);
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.activity-item:hover .activity-delete,
.activity-item:hover .activity-edit {
  opacity: 1;
}

/* ── Markdown body ──────────────────────────────────────────────────────────── */

.md-body {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  line-height: 1.6;
  margin-top: var(--space-2);
}

.md-body p { margin: 0 0 var(--space-2); }
.md-body p:last-child { margin-bottom: 0; }
.md-body h1,.md-body h2,.md-body h3 {
  font-weight: 600;
  margin: var(--space-3) 0 var(--space-1);
  color: var(--color-text);
}
.md-body h1 { font-size: 1.1em; }
.md-body h2 { font-size: 1em; }
.md-body h3 { font-size: 0.95em; }
.md-body ul,.md-body ol { margin: 0 0 var(--space-2) var(--space-4); padding: 0; }
.md-body li { margin-bottom: var(--space-1); }
.md-body code {
  font-family: var(--font-mono, monospace);
  font-size: 0.875em;
  background: var(--color-bg-subtle, rgba(0,0,0,0.06));
  padding: 1px 4px;
  border-radius: 3px;
}
.md-body pre {
  background: var(--color-bg-subtle, rgba(0,0,0,0.06));
  border-radius: var(--radius-md);
  padding: var(--space-3);
  overflow-x: auto;
  margin: 0 0 var(--space-2);
}
.md-body pre code { background: none; padding: 0; }
.md-body blockquote {
  border-left: 3px solid var(--color-border);
  margin: 0 0 var(--space-2);
  padding: var(--space-1) var(--space-3);
  color: var(--color-text-muted);
}
.md-body a { color: var(--color-primary); text-decoration: underline; }
.md-body hr { border: none; border-top: 1px solid var(--color-border); margin: var(--space-3) 0; }

/* ── Interview note editor ──────────────────────────────────────────────────── */

.interview-note-editor {
  margin-top: var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.interview-note-actions {
  display: flex;
  gap: var(--space-2);
}

.activity-composer-notes {
  width: 100%;
  margin-top: var(--space-2);
  resize: vertical;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  background: var(--color-bg);
  color: var(--color-text);
  font-family: inherit;
}

.activity-composer-notes:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--sensr-blue-rgb, 59, 130, 246), 0.15);
}

/* ── New interview form (interviews list) ────────────────────────────────────── */

.new-interview-form {
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg-subtle, rgba(0,0,0,0.02));
  margin: var(--space-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.new-interview-form .form-section-heading {
  font-size: var(--font-size-base);
  font-weight: 600;
  margin: 0;
}

/* Scoped field layout for the new-interview form */
.new-interview-form .iv-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.new-interview-form .iv-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-muted);
}

.new-interview-form .iv-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
}

.new-interview-form .form-actions {
  display: flex;
  gap: var(--space-2);
  padding-top: var(--space-1);
}

/* Shared input/select/textarea styling outside of .form-row */
.form-input,
.form-select,
.form-textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  width: 100%;
  box-sizing: border-box;
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.form-textarea {
  resize: vertical;
  min-height: 80px;
  line-height: var(--line-height-normal);
}

/* ── Summary list inline variant (interview header) ─────────────────────────── */

.summary-list-inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
  margin-top: var(--space-3);
}

.summary-list-inline dt {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}

.summary-list-inline dd {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  margin-left: var(--space-1);
}

/* ── Interview detail note section ──────────────────────────────────────────── */

.interview-note-section .interview-note-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.interview-note-section h3 { margin: 0; }

.interview-note-view { min-height: 3rem; }

.interview-note-editor-full {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.interview-note-textarea {
  width: 100%;
  min-height: 18rem;
  resize: vertical;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm);
  line-height: 1.6;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--color-bg);
  color: var(--color-text);
}

.interview-note-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(var(--sensr-blue-rgb, 59, 130, 246), 0.15);
}

.interview-note-toolbar {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.interview-note-preview {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  min-height: 18rem;
  background: var(--color-bg-subtle, rgba(0,0,0,0.02));
}

/* ── Reminders ────────────────────────────────────────────────────────────── */

.reminder-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.reminder-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--color-border);
}

.reminder-item:last-child {
  border-bottom: none;
}

.reminder-item.reminder-done .reminder-subject {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.reminder-done-btn {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: transparent;
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  cursor: pointer;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.reminder-done-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.reminder-item.reminder-done .reminder-done-btn {
  border-color: var(--color-success);
  color: var(--color-success);
}

.reminder-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reminder-subject {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.reminder-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.reminder-delete {
  color: var(--color-text-muted);
  opacity: 0;
  margin-left: auto;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.reminder-item:hover .reminder-delete {
  opacity: 1;
}

/* ── Deal contacts ────────────────────────────────────────────────────────── */

.deal-contacts-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.deal-contact-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  flex-wrap: wrap;
}

.deal-contact-name {
  font-weight: var(--font-weight-medium);
}

.deal-contact-role,
.deal-contact-email {
  font-size: var(--font-size-xs);
}

.deal-contact-item .btn-icon {
  margin-left: auto;
  opacity: 0;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.deal-contact-item:hover .btn-icon {
  opacity: 1;
}

/* ── Stage history timeline ───────────────────────────────────────────────── */

.stage-history {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.stage-history-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) 0;
  padding-left: var(--space-4);
  border-left: 2px solid var(--color-border);
  position: relative;
}

.stage-history-item::before {
  content: "";
  position: absolute;
  left: -5px;
  top: var(--space-4);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-border);
}

.stage-history-item:first-child::before {
  background: var(--color-primary);
}

.stage-history-arrow {
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.stage-history-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* ── Small button variant ─────────────────────────────────────────────────── */

.btn-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-xs);
}

/* ── Icon-only button (×, ✓ without a border) ─────────────────────────────── */

.btn-icon {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: var(--font-size-md);
  padding: 0 var(--space-1);
  line-height: 1;
  font-family: var(--font-family);
}

.btn-icon:hover {
  color: var(--color-danger);
}

/* ── Responsive deal detail ───────────────────────────────────────────────── */

@media (max-width: 900px) {
  .deal-detail-body {
    grid-template-columns: 1fr;
  }
}

/* ── Combobox inline variant (contact linker) ─────────────────────────────── */

.combobox-listbox-inline {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: var(--z-raised);
}

/* ═══════════════════════════════════════════════════════════════════════════
   OVERVIEW — dashboard page
   ═══════════════════════════════════════════════════════════════════════════ */

.overview-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.overview-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--space-4);
  align-items: start;
}

.overview-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.overview-section-heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin: 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

/* ── Cards (no gradient bar — plain bordered box) ─────────────────────────── */

.overview-card {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: var(--space-4);
}

.overview-card-title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin: 0 0 var(--space-3);
  color: var(--color-text);
}

.overview-card-icon {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* ── List items ───────────────────────────────────────────────────────────── */

.overview-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.overview-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  min-width: 0;
  overflow: hidden;
}

.overview-item a {
  color: var(--color-accent);
  text-decoration: none;
  font-weight: var(--font-weight-semibold);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-item a:hover {
  text-decoration: underline;
}

.overview-item span:first-child {
  flex-shrink: 0;
}

.overview-item-meta {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  flex-shrink: 0;
  white-space: nowrap;
  margin-left: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50%;
}

.overview-pct {
  margin-left: auto;
  flex-shrink: 0;
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-xs);
  padding: 1px var(--space-2);
  border-radius: var(--radius-pill);
}

.overview-pct-low {
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.overview-pct-high {
  background: #fde8e8;
  color: #9b1c1c;
}

.overview-empty {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin: 0;
}

.overview-see-all {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-accent);
  text-decoration: none;
}

.overview-see-all:hover {
  text-decoration: underline;
}

@media (max-width: 899px) {
  .overview-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .overview-card {
    padding: var(--space-3);
  }
}

/* ── Capacity chart (reuses .util-chart-* from the Capacity report; kept
   unboxed like the Sankey/funnel charts so the overview stays consistent) ── */

.overview-capacity-chart {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.overview-capacity-chart .util-chart-wrap {
  margin-bottom: 0;
}

/* ── Pipeline Sankey ──────────────────────────────────────────────────────── */

.overview-sankey {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.overview-sankey-svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
}

.overview-sankey-caption {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin: 0;
  text-align: center;
}

.sankey-label-stage {
  font-size: 9px;
  fill: var(--color-text-muted);
  font-family: var(--font-family);
}

.sankey-label-val {
  font-size: 9px;
  font-weight: 600;
  fill: var(--color-text);
  font-family: var(--font-family);
}

.sankey-label-won {
  fill: var(--color-ok);
  font-weight: 600;
}

.sankey-label-lost {
  fill: var(--color-danger);
  font-weight: 600;
}

.sankey-label-ratio {
  font-size: 9px;
  font-weight: 700;
  fill: var(--color-text-muted);
  font-family: var(--font-family);
}

/* ── Recruitment tasks ────────────────────────────────────────────────────── */

.tasks-page {
  max-width: 800px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-8);
}

.tasks-list-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-3);
}

.tasks-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.tasks-section-heading {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-1);
}

.task-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.task-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background 0.1s;
}

.task-item:hover {
  background: var(--color-surface-raised, var(--color-border));
}

.task-item--done .task-title {
  text-decoration: line-through;
  color: var(--color-text-muted);
}

.task-checkbox {
  margin-top: 2px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--color-primary);
  width: 15px;
  height: 15px;
}

.task-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.task-meta {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.task-meta a {
  color: var(--color-accent);
  text-decoration: none;
}

.task-meta a:hover {
  text-decoration: underline;
}

.task-description {
  font-size: var(--font-size-xs);
  margin: 0;
}

.task-delete {
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.1s;
}

.task-item:hover .task-delete {
  opacity: 1;
}

.task-composer {
  margin: var(--space-3) 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}

.task-composer h3 {
  margin: 0 0 var(--space-3);
}

.task-composer .form-select,
.task-composer .form-input,
.task-composer .form-textarea {
  display: block;
  width: 100%;
  margin-bottom: var(--space-3);
  box-sizing: border-box;
}

.task-inline-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}

.card-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}

.card-header-row h3 {
  margin: 0;
}

.composer-actions {
  display: flex;
  gap: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   SKILLS — the proficiency scale, skill rows and the proposals queue
   ═══════════════════════════════════════════════════════════════════════════ */

.skills-intro {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  max-width: 70ch;
}

/* ── The 1-5 scale, kept on screen next to the ratings ───────────────────── */

.skills-scale-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.skills-scale-chip {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.skills-scale-chip + .skills-scale-chip::before {
  content: "·";
  margin-right: var(--space-2);
  color: var(--color-border);
}

.skills-scale-chip b {
  color: var(--color-text);
  font-weight: var(--font-weight-semibold);
}

/* ── Add / propose ──────────────────────────────────────────────────────── */

.skill-add-composer {
  margin-bottom: var(--space-5);
}

.skill-add-composer .combobox-wrap {
  max-width: 32rem;
}

/* ── Grouped by root competence ─────────────────────────────────────────── */

/* <details> rather than a plain heading: someone with forty skills across eight
   competences wants to fold the ones they are not editing. Open by default. */
.skill-group + .skill-group {
  margin-top: var(--space-5);
}

.skill-group-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-2) 0;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.skill-group-count {
  font-size: var(--font-size-xs);
  text-transform: none;
  letter-spacing: 0;
}

/* ── One skill per row ──────────────────────────────────────────────────── */

.skills-my-list {
  display: flex;
  flex-direction: column;
}

.skill-row {
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto minmax(0, 18rem) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

.skill-row:last-child {
  border-bottom: 1px solid var(--color-border);
}

/* A freshly added row, so the eye can find it in a long list.
   A brief flash, not a persistent fill: --color-accent-soft is the brand green
   at full strength (used everywhere else only as a border-color), so filling the
   row with it drowned the labels and never went away. */
@keyframes skill-row-added {
  from {
    background: var(--color-surface);
  }
  to {
    background: transparent;
  }
}

.skill-row--new {
  animation: skill-row-added 1.6s var(--ease-out) forwards;
}

@media (prefers-reduced-motion: reduce) {
  .skill-row--new {
    animation: none;
  }
}

.skill-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.skill-row-name {
  font-weight: var(--font-weight-medium);
}

.skill-level-hint {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.skill-row-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
}

/* Both expandable panes span the full row width. */
.skill-row-detail,
.skill-row-history {
  grid-column: 1 / -1;
}

.skill-row-detail {
  padding: var(--space-4) 0 var(--space-2);
}

/* ── The level control ──────────────────────────────────────────────────── */

.skill-level-picker {
  display: inline-flex;
  gap: var(--space-1);
}

.skill-level-dot {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.skill-level-dot:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.skill-level-dot:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.skill-level-dot[aria-checked="true"] {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-text-inverse);
  font-weight: var(--font-weight-semibold);
}

/* ── Goal + evidence ───────────────────────────────────────────────────── */

.skill-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
  align-items: end;
}

.skill-detail-grid label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.skill-detail-note {
  grid-column: 1 / -1;
}

.skill-history {
  grid-column: 1 / -1;
  margin: var(--space-3) 0 var(--space-2);
}

/* The <li> carries two spans — the level move and who/when. Without a gap they
   run together as "3 Independentby thomas". Not .stage-history-item, which is a
   vertical timeline; a level change is one line. */
.skill-history li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2);
  padding: var(--space-1) 0 var(--space-1) var(--space-4);
  border-left: 2px solid var(--color-border);
}

/* ── Parent chips (queue and, later, the skill detail page) ─────────────── */

.skill-chip-list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.skill-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-2);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
}

.skill-chip-list .combobox-wrap {
  min-width: 14rem;
  flex: 0 1 16rem;
}

/* ── Proposals queue ───────────────────────────────────────────────────── */

.skills-proposal-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.skills-proposal-item {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.skills-proposal-name {
  font-weight: var(--font-weight-medium);
  max-width: 28rem;
}

.skills-proposal-meta {
  margin: 0;
  font-size: var(--font-size-xs);
}

.skills-proposal-root {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.skills-proposal-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.skill-merge-dialog {
  min-width: min(30rem, 90vw);
}

.skill-merge-target {
  font-weight: var(--font-weight-medium);
  min-height: 1.25rem;
}

.skill-propose-parent {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--font-weight-medium);
}

/* ── Evidence ───────────────────────────────────────────────────────────── */

.evidence-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-2) 0;
}

.evidence-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  font-size: var(--font-size-sm);
}

.evidence-chip b {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* The one kind a lead cannot check against Sensr's own records. Dashed rather
   than coloured: it is a caveat, not a problem. */
.evidence-chip--unverifiable {
  border-style: dashed;
}

.evidence-editor {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.evidence-controls,
.evidence-picker-slot {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--space-2);
}

.evidence-picker-slot .combobox-wrap,
.evidence-picker-slot textarea {
  min-width: 18rem;
}

.skill-evidence-pane {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) 0;
}

.skill-evidence-note {
  font-size: var(--font-size-sm);
  margin: 0;
}

.skills-scale-inline {
  font-size: var(--font-size-xs);
  margin: 0;
}

/* ── Courses & Certificates ─────────────────────────────────────────────── */

.learning-section + .learning-section {
  margin-top: var(--space-6);
}

.learning-composer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.learning-fields {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-2);
}

.learning-fields label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.cell-actions {
  display: flex;
  gap: var(--space-1);
  justify-content: flex-end;
  white-space: nowrap;
}

/* ── Goals ──────────────────────────────────────────────────────────────── */

.goal-row {
  display: grid;
  grid-template-columns: minmax(14rem, 1fr) minmax(0, 20rem) auto;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--color-border);
}

.goal-row:last-child {
  border-bottom: 1px solid var(--color-border);
}

.goal-row-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  min-width: 0;
}

.goal-row-meta {
  font-size: var(--font-size-xs);
}

.goal-composer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.goal-composer-slot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.goal-composer-slot .combobox-wrap {
  min-width: 16rem;
}

/* ── Profile fit ────────────────────────────────────────────────────────── */

.fit-profile-label {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
}

.fit-profile-select {
  max-width: 24rem;
}

.stat-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-bottom: var(--space-5);
}

.stat-tile {
  display: flex;
  flex-direction: column;
}

.stat-tile b {
  font-size: var(--font-size-lg);
}

.stat-tile-hero b {
  font-size: 2rem;
  line-height: 1.1;
}

.stat-tile span {
  font-size: var(--font-size-xs);
}

.fit-pending-note {
  max-width: 26rem;
  white-space: normal;
  line-height: 1.4;
}

/* The diagram grows with the profile; scroll it rather than shrink the labels to
   nothing, the same way .skill-dag-wrap does. */
.fit-radar-wrap {
  overflow-x: auto;
  max-width: 100%;
}

.fit-radar {
  display: block;
  margin-inline: auto;
  max-width: 100%;
  height: auto;
}

.fit-radar-ring {
  /* Recessive: the rings are a ruler, not data. */
  opacity: 0.55;
}

/* REQUIRED is context — a dashed boundary, so it frames the subject rather than
   competing with it. */
.fit-radar-required {
  fill: none;
  stroke: var(--color-text-muted);
  stroke-width: 1.5;
  stroke-dasharray: 5 4;
}

/* The consultant is the subject, so it gets the accent. */
.fit-radar-have {
  fill: var(--color-accent);
  fill-opacity: 0.18;
  stroke: var(--color-accent);
  stroke-width: 2;
}

/* With open goals met (#157): the subject's hue, unfilled and dashed — where the
   shape is heading, not where it is. The dash is the second encoding, so the
   series never depends on colour alone. */
.fit-radar-projected {
  fill: none;
  stroke: var(--color-accent);
  stroke-width: 2;
  stroke-dasharray: 6 4;
}

.fit-radar-marker {
  fill: var(--color-accent);
  /* A surface ring keeps the marker readable where it sits on a gridline. */
  stroke: var(--color-bg);
  stroke-width: 2;
}

.fit-radar-axis-label {
  font-size: var(--font-size-xs);
}

.fit-radar-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.fit-legend-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.fit-legend-swatch {
  width: 14px;
  height: 14px;
  border-radius: var(--radius-sm);
}

.fit-legend-have {
  background: var(--color-accent);
  opacity: 0.5;
  border: 2px solid var(--color-accent);
}

.fit-legend-projected {
  border: 2px dashed var(--color-accent);
}

.fit-legend-required {
  border: 1.5px dashed var(--color-text-muted);
}

.fit-gaps {
  margin-top: var(--space-6);
}

/* ── Proficiency: shared "how a level looks" glyphs ─────────────────────── */

/* The same 1-5 pips used everywhere a level is shown, so a level looks like a
   level regardless of which screen is drawing it. */
.level-scale {
  display: inline-flex;
  gap: 3px;
}

.level-pip {
  width: 12px;
  height: 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
}

.level-pip--have {
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* The level being asked for, marked on the same scale. */
.level-pip--required {
  box-shadow: 0 0 0 2px var(--color-text-muted);
}

/* The 1-5 level DISTRIBUTION strip: a sequential ramp (never categorical
   colours — levels are an ORDER) whose outer width also carries magnitude
   (holders / maxHolders), so a skill held by one person does not look as
   "full" as one held by thirty. See levelStrip() in views/skills/level_glyphs.js. */
.level-strip-track {
  width: 100%;
  max-width: 160px;
  background: var(--color-surface);
  border-radius: 2px;
  height: 12px;
}

.level-strip {
  display: flex;
  height: 100%;
  border-radius: 2px;
  overflow: hidden;
}

.level-seg {
  min-width: 2px;
}

/* Adjacent steps of a 5-step lightness ramp are separable in isolation but not
   abutting at 12px tall without a hairline between them. */
.level-seg + .level-seg {
  box-shadow: inset 1px 0 0 var(--color-bg);
}

.level-seg-1 { background: var(--level-1); }
.level-seg-2 { background: var(--level-2); }
.level-seg-3 { background: var(--level-3); }
.level-seg-4 { background: var(--level-4); }
.level-seg-5 { background: var(--level-5); }

.level-key {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-bottom: var(--space-2);
}

.level-key-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
}

.level-key-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

/* ── Competence analysis ───────────────────────────────────────────────── */

.analysis-section {
  margin-top: var(--space-8);
}

/* The diagram grows with the profile count; scroll it rather than shrink the
   labels to nothing, the same call .fit-radar-wrap and .skill-dag-wrap make. */
.analysis-coverage-wrap {
  overflow-x: auto;
  max-width: 100%;
  margin-bottom: var(--space-3);
}

.analysis-coverage-svg {
  display: block;
  width: 100%;
  min-width: 560px;
  height: auto;
}

.analysis-bar-qualified {
  fill: var(--color-accent);
}

/* An empty row reads as missing data; a 3px stub reads as zero — and zero rows
   are the whole point of the coverage section. */
.analysis-bar-zero {
  fill: var(--color-danger);
}

.analysis-hatch-line {
  fill: var(--swatch-11);
  fill-opacity: 0.65;
}

.analysis-bar-value {
  font-size: var(--font-size-xs);
  font-family: var(--font-family);
  fill: var(--color-text);
}

.analysis-bar-value-delta {
  fill: var(--swatch-11);
}

.analysis-tick-label {
  font-size: 10px;
  font-family: var(--font-family);
  fill: var(--color-text-muted);
  text-anchor: middle;
}

.analysis-row-label--uncovered {
  fill: var(--color-danger);
  font-weight: var(--font-weight-semibold);
}

.legend-swatch-validated {
  background: var(--color-accent);
}

/* ── Growth record & the validation inbox ───────────────────────────────── */

.growth-section + .growth-section {
  margin-top: var(--space-6);
}

.growth-section h3,
.review-section-heading {
  font-size: var(--font-size-base);
  margin-bottom: var(--space-2);
}

/* The inbox stacks two queues; space them like the growth sections so the page
   reads as sections rather than one long list. */
.review-section-heading {
  margin-top: var(--space-6);
}

/* ── Progress Tracker ───────────────────────────────────────────────────── */

.review-row {
  padding: var(--space-4) 0;
  border-top: 1px solid var(--color-border);
}

.review-row:last-child {
  border-bottom: 1px solid var(--color-border);
}

.review-row-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.review-evidence {
  margin: var(--space-2) 0;
}

.review-note {
  font-size: var(--font-size-sm);
  margin: 0 0 var(--space-2);
}

.review-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.review-actions .muted {
  font-size: var(--font-size-xs);
}

.form-select-sm {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
}

@media (max-width: 720px) {
  .goal-row,
  .skill-row {
    grid-template-columns: 1fr;
  }
}

/* ── inlineCombobox additions to the shared combobox styles ─────────────── */

.combobox-option-meta {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.combobox-option-create {
  border-top: 1px solid var(--color-border);
  color: var(--color-accent);
  font-weight: var(--font-weight-medium);
  position: sticky;
  bottom: 0;
  background: var(--color-bg);
}

/* ── Narrow screens: the row grid collapses to stacked blocks ──────────── */

@media (max-width: 899px) {
  .skill-row {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }

  .skill-row-actions {
    justify-content: flex-start;
  }
}

/* ── Ontology list, detail and tree (Block 2) ───────────────────────────── */

.skill-rename-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-4) 0;
  max-width: 32rem;
}

.skill-detail-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

.skills-tree-toggle {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.skill-tree {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Indentation comes from an inline padding-left driven by the API's `depth`,
   so a node at any level lines up without nested markup. */
.skill-tree-node {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) 0;
  border-bottom: 1px solid var(--color-border);
}

.skill-tree-node:hover {
  background: var(--color-surface);
}

/* The own tree's list rows open the claim dialog, so they are buttons — styled
   as the link text they replace on the governance tree. */
.skill-tree-pick {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-accent);
  font: inherit;
  cursor: pointer;
}

.skill-tree-pick:hover {
  text-decoration: underline;
}

.skill-tree-count {
  font-size: var(--font-size-xs);
  margin-left: auto;
}

/* ── Ontology diagram (layered DAG) ─────────────────────────────────────── */

/* The diagram grows with the ontology; scroll it rather than shrink the labels
   to nothing. .table-wrap does the same for wide tables. */
.skill-dag-wrap {
  overflow: auto;
  padding: var(--space-4) 0;
  max-width: 100%;
}

/* Give the diagram the whole window, like the schedule does — capped at 1200px
   it scrolled sideways on screens with room to spare. */
main.skills-dag-main {
  max-width: none;
  padding: var(--space-5) var(--space-6);
}

/* Shrink to fit, never grow. The width/height attributes carry the natural size,
   so max-width caps it at the container while height:auto keeps the aspect ratio;
   a small graph still draws 1:1 because the attributes bound it from above.
   (min-width:100% here was what magnified a single node.) */
.skill-dag-svg {
  display: block;
  /* NO max-width here. It contradicted .skill-dag-wrap's overflow: auto — the
     wrapper offered to scroll, and this shrank the SVG so it never had to. At 25
     skills that merely looked small; at 90 it scaled the labels to ~4px and the
     diagram became unreadable with no way to zoom. The SVG carries explicit
     width/height (its natural size, times the zoom factor), and overflow is the
     wrapper's job — as the comment in dag.js always claimed. */
  /* Centre a diagram narrower than the page. Auto margins on a block element
     collapse to 0 once the content fills its container, so the wide case still
     starts at the left edge and scrolls normally — no special-casing needed. */
  margin-inline: auto;
}

.skill-dag-section-heading {
  font-size: var(--font-size-base);
  margin: var(--space-5) 0 var(--space-1);
}

/* Fold control. Sits ON the bottom edge of the box, in the accent colour, always
   visible in both states — floating below in a muted grey it read as decoration
   and nobody knew where to click. */
.skill-dag-fold {
  cursor: pointer;
}

.skill-dag-fold-box {
  fill: var(--color-bg);
  stroke: var(--color-accent);
  stroke-width: 1.5;
}

.skill-dag-fold-glyph {
  fill: var(--color-accent);
}

.skill-dag-fold-label {
  fill: var(--color-accent);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: 600;
  pointer-events: none;
}

/* The + shares the fold pill's box and hover behaviour; only the glyph differs,
   and it is stroked rather than filled. */
.skill-dag-add-glyph {
  stroke: var(--color-accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  fill: none;
}

.skill-dag-add:hover .skill-dag-add-glyph,
.skill-dag-add:focus-visible .skill-dag-add-glyph {
  stroke: var(--color-bg);
}

/* Filled on hover: the control is small, so the whole pill changing state is a
   clearer hit confirmation than a border tint. */
.skill-dag-fold:hover .skill-dag-fold-box,
.skill-dag-fold:focus-visible .skill-dag-fold-box {
  fill: var(--color-accent);
}

.skill-dag-fold:hover .skill-dag-fold-glyph,
.skill-dag-fold:focus-visible .skill-dag-fold-glyph {
  fill: var(--color-bg);
}

.skill-dag-fold:hover .skill-dag-fold-label,
.skill-dag-fold:focus-visible .skill-dag-fold-label {
  fill: var(--color-bg);
}

/* Hover isolation. One lineage at full strength, everything else faded far
   enough to read as background — 0.12 rather than a lighter dim, because at 25
   long crossing edges anything subtler leaves the tangle legible and the point
   is to make it disappear. Only opacity moves: no reflow, and it costs the
   layout nothing. */
.skill-dag-svg.is-focusing .skill-dag-node,
.skill-dag-svg.is-focusing .skill-dag-fold,
.skill-dag-svg.is-focusing .skill-dag-edge {
  opacity: 0.12;
  transition: opacity var(--duration-fast) var(--ease-out);
}

.skill-dag-svg.is-focusing .is-related {
  opacity: 1;
}

/* The lineage's own edges get the accent, so a path through four layers reads as
   one line rather than four unrelated curves. */
.skill-dag-edge.is-related {
  stroke: var(--color-accent);
  stroke-width: 2;
}

.skill-dag-edge {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 1.5;
}

.skill-dag-box {
  fill: var(--color-bg);
  stroke: var(--color-border);
  stroke-width: 1.5;
  transition: fill var(--duration-fast) var(--ease-out);
}

a.skill-dag-node:hover .skill-dag-box,
.skill-dag-node.is-pickable:hover .skill-dag-box {
  fill: var(--color-surface);
  stroke: var(--color-accent);
}

.skill-dag-box-proposed {
  stroke-dasharray: 4 3;
}

.skill-dag-label {
  fill: var(--color-text);
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  pointer-events: none;
}

a.skill-dag-node,
.skill-dag-node.is-pickable {
  cursor: pointer;
}

.skill-dag-node:focus-visible .skill-dag-box {
  stroke: var(--color-accent);
  stroke-width: 3;
}

/* ── "You are here" on the tree ─────────────────────────────────────────── */

/* The BADGE is the only signal that a skill is held — deliberately not the box.
   Multi-parent highlighting is gone now, but the box still carries `proposed`,
   so keeping "held" out of the box keeps one meaning per channel. */

.skill-dag-mine-dot {
  fill: var(--color-accent);
  /* A surface ring so the badge stays readable over an edge or a neighbour. */
  stroke: var(--color-bg);
  stroke-width: 2;
}

/* Under review: outlined rather than filled, so a claim never looks like a
   confirmed fact — the same distinction the pills make everywhere else. */
.skill-dag-mine-pending .skill-dag-mine-dot {
  fill: var(--color-bg);
  stroke: var(--color-accent);
}

.skill-dag-mine-label {
  fill: var(--color-text-inverse);
  font-family: var(--font-family);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  pointer-events: none;
}

.skill-dag-mine-pending .skill-dag-mine-label {
  fill: var(--color-accent);
}

/* The indented list says it in words — there is room for them there. */
.skill-tree-mine {
  font-size: var(--font-size-xs);
}

.skill-dag-legend {
  font-size: var(--font-size-xs);
  margin: 0;
}

/* ── Category filter chips (ontology views) ─────────────────────────────── */

/* display:flex outranks the UA's [hidden] rule, so hiding the chips needs saying
   explicitly — same reason .util-chart-tooltip carries one. */
.skill-filter-chips[hidden] {
  display: none;
}

.skill-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.skill-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  cursor: pointer;
  transition:
    background var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.skill-filter-chip:hover {
  border-color: var(--color-accent);
  color: var(--color-text);
}

.skill-filter-chip.is-on {
  background: var(--color-surface);
  border-color: var(--color-accent);
  color: var(--color-text);
  font-weight: var(--font-weight-medium);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HR — yearly goals and one-to-ones
   ═══════════════════════════════════════════════════════════════════════════ */

.hr-goal-dialog {
  min-width: min(34rem, 90vw);
}

/* The <select> is nested inside its <label>, so .list-filter-bar's gap never
   applies — the label is the bar's only child. Same shape as
   .board-filter-label. */
.hr-year-label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

/* The year select drives what all three HR screens show, not a small in-page
   filter, so it gets more presence than a plain .select-sm: an accent
   border, bolder value text and a resting shadow instead of only on focus. */
.hr-year-select {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-sm);
  font-weight: var(--font-weight-medium);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

.hr-year-select:hover {
  background-color: var(--color-surface);
}

.hr-goal-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  margin-bottom: var(--space-3);
}

.hr-goal-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* .tag's background is --color-surface and so is .hr-goal-card's, so a bare
   .tag here is an invisible chip whose padding reads as a misaligned left
   edge against the description below it. */
.hr-goal-category {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
}

.hr-goal-by {
  font-size: var(--font-size-xs);
}

.hr-goal-actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}

.hr-reorder-group {
  display: flex;
  gap: var(--space-1);
}

.hr-goal-group-heading {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  margin: 0 0 var(--space-2);
}

/* The grading control sits in .hr-goal-actions beside the buttons, so it needs
   to align to them rather than stack as a normal labelled field. The select
   itself is .select-sm, the same small styled dropdown used for the year
   filter and elsewhere in the app (it was unstyled "input input-sm" before,
   two classes with no matching CSS anywhere). */
.hr-goal-outcome {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
}

/* The subject's outstanding-questionnaire banner, first thing on
   #/hr/my-review — see feedback_action_banner.js. Bordered, like .hr-review
   just below, and DELIBERATELY carries no background override: a bare .tag's
   background is --color-surface, and the gotcha noted on .hr-goal-category
   above is that .hr-goal-card's background is ALSO --color-surface, making a
   .tag invisible there. This banner is a direct child of .card instead, whose
   background is --color-bg — a different token — so the tag stays visible
   without needing a border of its own. Do not give this element a
   --color-surface background without also bordering the tag. */
.hr-action-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.hr-action-banner-left {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}

/* A sentence on the left of the box rather than a name and a label, as on a
   colleague's or customer's questionnaire, where it says how their invitation
   stands and the buttons beside it act on that. */
.hr-action-banner-text {
  margin: 0;
  flex: 1 1 20rem;
  font-size: var(--font-size-sm);
}

.hr-action-banner .hr-invite-actions {
  margin-top: 0;
}

/* The year-end review. Bordered rather than another .hr-goal-card, because it
   is one panel about the whole year and should not read as a fourth goal. */
.hr-review {
  margin: var(--space-6) 0 var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.hr-review-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.hr-review-header h3 {
  margin: 0;
  font-size: var(--font-size-md);
}

/* The hint is a full-width row under the tags, not another inline item. */
.hr-review-header .field-hint {
  flex-basis: 100%;
  margin: 0;
}

.hr-review-field + .hr-review-field {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}

.hr-review-field h4 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

/* Withheld is styled apart from a merely empty field: italic, so "not shared
   yet" does not read as the lead's actual words. */
.hr-review-withheld {
  font-style: italic;
}

/* Goals, Review and One-to-ones on the lead's report screen: each its own
   <details>, label and count on the summary, so the page reads as three
   bounded sections instead of one long scroll (report_detail.js). The border
   and chevron exist so a section reads as an expandable box on sight,
   without someone having to first click it to discover that it opens. */
.hr-section-collapse {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
}

.hr-section-collapse + .hr-section-collapse {
  margin-top: var(--space-6);
}

.hr-section-summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  padding: var(--space-3) 0;
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-md);
  list-style: none;
}

.hr-section-summary::-webkit-details-marker {
  display: none;
}

/* A chevron pointing down while collapsed ("open me"), rotated to point up
   once the section is open ("close me"). */
.hr-section-summary::before {
  content: "";
  width: 0.5em;
  height: 0.5em;
  flex-shrink: 0;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg);
  transition: transform 0.15s ease;
}

.hr-section-collapse[open] > .hr-section-summary::before {
  transform: rotate(-135deg);
}

.hr-section-count {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.hr-section-body {
  margin-top: var(--space-3);
  padding-bottom: var(--space-4);
}

/* Just the "Log a one-to-one" button now that the label lives on the
   <details> summary above it (see .hr-section-summary). */
.hr-section-actions {
  margin-bottom: var(--space-3);
}

/* The team member screen's card head: "Team member: Anna Janssens", the year
   beside the name, the back link pushed right (report_detail.js). The auto
   margin that normally lives on .card-head h2 moves onto the year, so the year
   reads as part of the title rather than as one more action button.

   Wraps at phone width: the name must be allowed a second line rather than be
   squeezed between a select and a button. */
.hr-detail-head {
  flex-wrap: wrap;
}

.hr-detail-head h2 {
  margin-right: var(--space-4);
}

/* yearSelect() is shared with direct_reports.js, where it IS a filter bar and
   keeps its own margin. Here it is part of the heading, so the bar's own
   spacing is cleared and the control is sized up to sit beside an h2. */
.hr-detail-head .hr-head-year {
  margin-right: auto;
  margin-bottom: 0;
}

.hr-detail-head .hr-head-year .hr-year-label {
  font-size: var(--font-size-md);
}

.hr-detail-head .hr-head-year .hr-year-select {
  font-size: var(--font-size-md);
  padding-top: var(--space-2);
  padding-bottom: var(--space-2);
}

/* The questionnaire round, as one clickable line at the top of the Review
   section. An <a> wearing .activity-item, so it needs the block display and
   the link colour reset the class does not carry. */
.hr-round-line {
  display: block;
  text-decoration: none;
  color: inherit;
  margin-bottom: var(--space-3);
}

.hr-round-line:hover {
  border-left-color: var(--color-primary);
}

.hr-round-send {
  margin-bottom: var(--space-4);
}

.hr-comment-log {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
}

.hr-comment-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HR — scheduling a questionnaire (send_questionnaire_dialog.js)
   ═══════════════════════════════════════════════════════════════════════════

   THE PEOPLE PICKER IS NOT .hr-comment-list, which is what it used to reuse.
   That class is a flex column with a var(--space-3) gap, which is right for
   comments and wrong for a list of names: twelve people at 12px apart is a
   dialog the reader has to scroll past rather than scan. This list sets gap to
   zero and gives each row its own small padding instead, so the names sit
   close enough to read as one list and still have somewhere to hover.

   IT IS ALSO NOT .checkbox-group, the built-in type in ui.js, which has no
   rules in this file at all — that field type has never been used on a
   polished screen, and adopting it here would have meant styling it anyway
   while also giving up the search, the select-all and the counter. */

/* WIDER AND DENSER THAN .hr-goal-dialog, which this dialog also carries.
   Scheduling asks for more at once than any other dialog here — a form, a
   year, two dates, a list of reminders and a list of people — and at
   .confirm-dialog's 380px the two-column schedule grid has nowhere to go and
   the people list scrolls after three names. Its own class rather than
   widening .hr-goal-dialog, which the yearly-goal dialog also uses and which
   asks for far less.

   max-width has to be restated: .confirm-dialog caps at 380px, and min-width
   alone would win the argument while leaving a contradictory rule in place for
   the next reader to puzzle over. */
.hr-schedule-dialog {
  min-width: min(46rem, 94vw);
  max-width: min(46rem, 94vw);
  /* .confirm-dialog's var(--space-6) is generous for a sentence and a pair of
     buttons; this dialog would rather spend it on names. */
  padding: var(--space-5);
}

/* .form-row's var(--space-5) between every field is right for a short form and
   wrong for eleven controls in one dialog: it pushes the people list and the
   Send button below the fold on a laptop. Tightened here only. */
.hr-schedule-dialog .form-row {
  margin-bottom: var(--space-2);
}

.hr-schedule-dialog .form-row label {
  margin-bottom: var(--space-1);
}

/* A colleague or customer questionnaire picks its one person from a dropdown,
   and a modal <dialog> clips its own overflow, so the list was cut off at the
   dialog's bottom edge: for these two kinds the dialog is short, because the
   schedule fields are hidden. Letting it overflow is safe only because it is
   short; the self_lead version is tall and keeps scrolling, which is why this
   is a class the dialog toggles by kind rather than a rule on the dialog. */
.hr-schedule-dialog.hr-schedule-dialog-single {
  overflow: visible;
}

/* `.confirm-dialog p` is written for the one sentence a confirmation dialog
   normally holds, and a field hint is also a <p> — so all three of its
   declarations land on our hints, and being a two-part selector it outranks
   `.field-hint`. That cost us `margin: 0 0 var(--space-5)` of dead space under
   every hint AND, worse, `font-size: var(--font-size-base)`: 15px hints under
   13px labels, the hierarchy exactly upside down. Every property it sets has to
   be restated here, not just the ones that were noticed first. */
.hr-schedule-dialog .field-hint {
  margin: var(--space-2) 0 0;
  font-size: var(--font-size-xs);
  /* Tight leading: these are short fragments sitting directly under their
     field, not prose, and the default normal line-height leaves them looking
     detached from the control they describe. */
  line-height: var(--line-height-tight);
}

/* The reminder list: one line per mail, "[3] [days before] the due date ✕",
   with the reason a line is refused written under it. */
.hr-schedule-group {
  margin-bottom: var(--space-2);
}

.hr-reminder-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.hr-reminder-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.hr-reminder-line input[type="number"] {
  width: 5rem;
}

/* Smaller than the date boxes above: a list of these lines should read as
   detail under the dates, not as a stack of full-size fields. */
.hr-reminder-line input,
.hr-reminder-line select {
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-sm);
}

.hr-reminder-line > span {
  font-size: var(--font-size-sm);
}

/* Pushed to the right-hand end of the line, next to the remove button. */
.hr-reminder-line .hr-reminder-date {
  margin-left: auto;
  color: var(--color-text-muted);
}

/* .form-row is a column that stretches its children, which would make the
   add button a full-width bar. */
.hr-schedule-group > .btn {
  align-self: flex-start;
}

/* On its own row under the controls, not squeezed in beside them. */
.hr-reminder-line .hr-reminder-problem {
  flex-basis: 100%;
  margin: 0;
}

.hr-reminder-line.is-refused input,
.hr-reminder-line.is-refused select {
  border-color: var(--color-danger);
}

.hr-schedule-dialog .dialog-actions {
  margin-top: var(--space-3);
}

.hr-schedule-dialog h3 {
  margin-top: 0;
  margin-bottom: var(--space-3);
}

/* THE PEOPLE LIST TAKES WHATEVER IS LEFT, rather than a fixed height somebody
   has to keep re-tuning. The dialog is a flex column capped at 90vh, every
   control above the list keeps its natural height, and the list is the only
   thing that grows — so hiding the schedule fields for a token questionnaire
   hands that space straight to the list instead of leaving a gap.

   `min-height: 0` on every link in the chain is what makes it work: a flex
   item's default min-height is `auto`, which refuses to shrink below its
   content, and without it the list would grow past the dialog and take the
   Send button off screen rather than scrolling. */
.hr-schedule-dialog {
  display: flex;
  flex-direction: column;
  max-height: 90vh;
}

.hr-schedule-body,
.hr-people-slot,
.hr-people-slot .form-row,
.hr-people-picker {
  min-height: 0;
}

.hr-schedule-body,
.hr-people-slot,
.hr-people-slot .form-row {
  display: flex;
  flex-direction: column;
}

.hr-schedule-body,
.hr-people-slot,
.hr-people-slot .form-row,
.hr-people-slot .hr-people-picker {
  flex: 1 1 auto;
}

/* The grid supplies the gaps between the five schedule fields, so their own
   bottom margins would double every one of them. */
.hr-schedule-fields .form-row {
  margin-bottom: 0;
}

.hr-people-picker {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.hr-people-picker-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
}

.hr-people-picker-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Bounded and scrollable: an admin's list is every active consultant, and a
   dialog that grows past the viewport puts its own Send button off screen. */
.hr-people-picker-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  flex: 1 1 auto;
  min-height: 6rem;
  overflow-y: auto;
  padding: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

/* display:flex outranks the UA's [hidden] rule, so hiding a filtered-out row
   needs saying explicitly — exactly as .skill-filter-chips[hidden] does above.
   Without this the search box sets the attribute on every non-matching row and
   the list carries on showing all of them. */
.hr-people-picker-row[hidden] {
  display: none;
}

.hr-people-picker-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

/* The rows are deliberately dense, so a hover is what tells the reader which
   label belongs to which box. */
.hr-people-picker-row:hover {
  background: var(--color-surface);
}

.hr-people-picker-row label {
  margin: 0;
  font-weight: normal;
  cursor: pointer;
}

/* "Already sent" and "No team lead", on the right of the name so the notes
   line up down the list. */
.hr-people-notes {
  margin-left: auto;
  display: flex;
  gap: var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: normal;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* The two dates read better side by side than as a column. */
.hr-schedule-fields {
  display: grid;
  gap: var(--space-2) var(--space-4);
  margin-bottom: var(--space-2);
}

.hr-schedule-fields-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (max-width: 560px) {
  .hr-schedule-fields-2 {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HR — feedback invitations (invite_dialog.js, report_feedback.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* "Who should answer?", styled like every other field label in a dialog. */
.confirm-dialog .hr-invite-people-label {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.hr-invite-people {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin: 0 0 var(--space-2);
}

/* One person to ask: a small grey card, so several people read as a list of
   separate people rather than one long run of boxes. */
.hr-invite-person {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

/* Name, address and the × on one line while there is room; name and address
   stack when the dialog is narrower than the two inputs want to be. */
.hr-invite-person-fields {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
}

.hr-invite-person-fields input {
  flex: 1 1 11rem;
  min-width: 0;
}

/* The same look as a .form-row field. These boxes sit outside a .form-row,
   so without this they are drawn as bare browser defaults. */
.hr-invite-person input,
.hr-invite-person textarea {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-base);
  font-family: var(--font-family);
  color: var(--color-text);
  background: var(--color-bg);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}

.hr-invite-person input:focus,
.hr-invite-person textarea:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: var(--focus-ring);
}

.hr-invite-person textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  line-height: var(--line-height-normal);
}

.hr-invite-remove {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.hr-invite-remove:hover {
  background: var(--color-surface-hover);
  color: var(--color-danger);
}

/* A button that reads as a link: "+ Add a personal message", "Remove message". */
.hr-text-button {
  align-self: flex-start;
  padding: 0;
  border: 0;
  background: none;
  font-family: var(--font-family);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-accent);
  cursor: pointer;
}

.hr-text-button:hover {
  text-decoration: underline;
}

.hr-invite-note {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.hr-invite-note[hidden],
.hr-invite-add[hidden] {
  display: none;
}

.hr-invite-note-head,
.hr-invite-note-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
}

.hr-invite-note-head {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.hr-invite-note-foot {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.hr-invite-add {
  margin-bottom: var(--space-4);
}

/* "112 / 1000" under a note box. Never wraps, so it stays on the right. */
.hr-char-count {
  flex: 0 0 auto;
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.form-row .hr-char-count {
  align-self: flex-end;
  margin-top: var(--space-1);
}

/* The lead's note to a respondent, on the answer page and on the lead's own
   screen: their line breaks are kept, because they typed them on purpose. */
.hr-personal-message {
  white-space: pre-line;
}

.hr-invite-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

/* A reissued link: one soft grey field holding the link, with a copy icon at
   its right end. The link is selectable text in a borderless read-only input,
   cut short with an ellipsis, because the whole point is copying it and it is
   unrecoverable once this page re-renders. */
/* Room below as well as above: the next thing on the page is a section
   heading, "Personal message" or the answers, and it sat right on the field. */
.hr-revealed-link {
  margin: var(--space-3) 0 var(--space-6);
}

.hr-revealed-link-caption {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.hr-revealed-link-field {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-1) var(--space-1) var(--space-3);
  background: var(--color-surface);
  border-radius: var(--radius-md);
}

.hr-revealed-link-field input {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-1) 0;
  border: 0;
  background: transparent;
  color: var(--color-text);
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm);
  text-overflow: ellipsis;
}

.hr-revealed-link-field input:focus {
  outline: none;
}

.hr-copy-button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.hr-copy-button:hover {
  background: var(--color-surface-hover);
  color: var(--color-text);
}

.hr-copy-button:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Just copied: the check mark, in the accent blue, for two seconds. The
   brand green is too pale to read on the grey field. */
.hr-copy-button.is-copied {
  color: var(--color-accent);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HR — feedback form builder (public/js/views/hr/feedback_form_edit.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* The questions are a section of the form rather than one more field, so the
   heading gets more air above it than a .form-row's own bottom margin. */
.hr-form-section-head {
  margin-top: var(--space-6);
}

/* A question is one row of a list, not a page of its own, so it is a light
   surface panel rather than a nested .card — which repeated the page card's
   padding and shadow one level down. Spacing between questions comes from
   .hr-question-list's gap, so the panel itself carries no margin. */
.hr-question-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.hr-question-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
}

/* .card-head only pushes its actions right when the title is an <h2>; a
   question's title is an <h3>, so it needs its own row. */
.hr-question-head {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}

.hr-question-head h3 {
  font-size: var(--font-size-base);
  margin: 0;
  margin-right: auto;
}

/* The panel's own padding closes the card off, so the last field does not
   also need its bottom margin. */
.hr-question-card .form-row:last-child {
  margin-bottom: 0;
}

/* "Add point" sits in a flex column, which would otherwise stretch it across
   the full width of the card. */
.hr-scale-editor > .btn {
  align-self: flex-start;
}

/* Adding a question extends the list, so the button reads as the next, empty
   row of it — dashed and full width, like .board-load-more — rather than as a
   third form action next to Save and Cancel. */
.hr-question-add {
  width: 100%;
  margin-top: var(--space-4);
  padding: var(--space-3);
  background: none;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  font-family: var(--font-family);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}

.hr-question-add:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

/* Save and Cancel are the only buttons left at the bottom of the form; the
   rule separates them from the question list above. */
.hr-form-footer {
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-6);
  padding-top: var(--space-5);
}

/* Destructive, but it should not compete with the page's own actions, so it
   keeps the ghost shape and only borrows the danger colour. */
.btn-ghost-danger {
  color: var(--color-danger);
}

.btn-ghost-danger:hover {
  border-color: var(--color-danger);
  color: var(--color-danger-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HR — feedback questionnaire (public/js/views/hr/questionnaire.js)
   ═══════════════════════════════════════════════════════════════════════════ */

.feedback-questionnaire {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

/* A real heading, one step under the page title and one step over the
   question prompts, with a rule beneath it. At sm/semibold this sat at the
   same size as the prompts, so a section grouped nothing; the small grey
   capitals that followed were too quiet to find while scrolling a long form.
   It has to be bold: at normal weight the medium-weight prompts under it
   out-weighed it. */
.feedback-section-heading {
  margin: var(--space-6) 0 0;
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  color: var(--color-text);
}

.feedback-section-heading:first-child {
  margin-top: 0;
}

.feedback-question-prompt {
  margin: 0 0 var(--space-1);
  font-weight: var(--font-weight-medium);
}

/* The read-only answer, which had no rule of its own at all. The left edge
   ties a one-word answer to the long question above it, instead of leaving it
   floating. The margin resets are what shortens the page: the plain
   "No answer." <p> was taking a browser-default 1em above AND below, on top
   of .feedback-questionnaire's own gap, so an unanswered form scrolled for
   pages of nothing. */
.feedback-answer {
  border-left: 2px solid var(--color-border);
  padding-left: var(--space-3);
}

.feedback-answer > p {
  margin: 0;
}

/* renderMarkdown's wrapper carries its own top margin, for the places it is
   dropped straight under a label. Here the border already does that work. */
.feedback-answer > .md-body {
  margin-top: 0;
}

.feedback-scale-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-4);
}

.feedback-scale-option {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-normal);
}

.feedback-actions {
  margin-top: var(--space-2);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HR — the lead's paired feedback view
   (public/js/views/hr/questionnaire_pair.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Two answer columns side by side, each about 500px inside the card at
   1440px, which is why `main` is not widened for this page. The prompt above
   them keeps a reading measure of its own (below). */
.feedback-pair {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.feedback-pair-question + .feedback-pair-question {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

.feedback-pair-prompt {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-medium);
  /* Spans both columns, so it needs its own measure. */
  max-width: 70ch;
}

.feedback-pair-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4) var(--space-8);
  align-items: start;
}

/* A `1fr` track floors at min-content, so one long unbroken token in a
   markdown answer would otherwise push the second column out of the card. */
.feedback-pair-columns > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Same treatment as .feedback-section-heading, one step quieter: these repeat
   on every row and must not compete with the section headings. */
.feedback-pair-column-label {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
}

/* ── Narrow screens: the two answers stack, the subject's first ─────────── */
@media (max-width: 899px) {
  .feedback-pair-columns {
    grid-template-columns: 1fr;
    gap: var(--space-4);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   HR — one colleague's or customer's feedback, read on its own
   (public/js/views/hr/report_feedback_request.js)
   ═══════════════════════════════════════════════════════════════════════════ */

/* The prompt keeps a reading measure of its own below.

   These three class names outlived the renderer they were written for. Several
   people's answers used to be lined up under each question here, with a
   labelled block per respondent; that comparison turned out not to be what a
   lead wants from colleague and customer feedback, so the page shows one
   person and the per-respondent block, its label and the stack that held them
   went with it. */
.feedback-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.feedback-group-question {
  /* A long unbroken token in a markdown answer would otherwise push the block
     out of the card. */
  min-width: 0;
  overflow-wrap: anywhere;
}

.feedback-group-question + .feedback-group-question {
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-6);
}

.feedback-group-prompt {
  margin: 0 0 var(--space-3);
  font-weight: var(--font-weight-medium);
  /* Spans the whole row, so it needs its own measure. */
  max-width: 70ch;
}

/* Lead board: the backlog controls sit in their own row under the filters. */
.backlog-bar .form-input-sm {
  width: 14rem;
}

.backlog-check {
  margin: 0 var(--space-2) 0 0;
  cursor: pointer;
}

/* Accounts list: the bar that appears while rows are ticked, and the tick column. */
.selection-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  padding: var(--space-3) var(--space-4);
  margin: var(--space-3) 0;
  background: var(--color-bg-subtle, var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.selection-bar[hidden] {
  display: none;
}

.cell-check,
th:has(> input[type="checkbox"]) {
  width: 2rem;
}

.form-input-sm {
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
}

/* Account page lists. */
.plain-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-3);
}

.card-head-split {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.subhead {
  margin: var(--space-4) 0 var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold, 600);
}

/* ── Portfolio (reference cases) ─────────────────────────────────────────── */

.pf-filter-search { max-width: 220px; }
.pf-filter-small  { max-width: 150px; }

.pf-case {
  padding: var(--space-4) 0;
  border-bottom: 1px solid var(--color-border);
}
.pf-case:last-child { border-bottom: 0; }
.pf-case-title {
  font-weight: var(--font-weight-semibold);
  font-size: var(--font-size-base);
  margin-right: var(--space-2);
}
.pf-case-meta { margin-top: var(--space-1); font-size: var(--font-size-sm); }
.pf-case-summary { margin-top: var(--space-2); max-width: 70ch; }

.pf-tags { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-top: var(--space-2); }
.pf-summary { font-style: italic; max-width: 70ch; }

.pf-facts {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: var(--space-1) var(--space-5);
  margin: var(--space-3) 0;
}
.pf-facts dt { color: var(--color-text-muted); font-size: var(--font-size-sm); }
.pf-facts dd { margin: 0; }

.pf-actions { display: flex; gap: var(--space-2); margin: var(--space-4) 0; }

/* Form: titled sections on a two-column grid, write-up beside its preview. */
.form.pf-form { max-width: 1040px; }
.pf-section {
  margin-bottom: var(--space-6);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}
.pf-section h3 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}
.pf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
}
.pf-grid .form-row { margin-bottom: var(--space-4); }
.pf-grid .pf-wide { grid-column: 1 / -1; }

.pf-writeup {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-6);
}
.pf-writeup .form-row { margin-bottom: var(--space-4); }
.form-row textarea.pf-markdown {
  min-height: 28rem;
  font-family: var(--font-mono, monospace);
  font-size: var(--font-size-sm);
  line-height: 1.6;
}
.pf-preview-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  margin-bottom: var(--space-1);
}
.pf-preview {
  min-height: 28rem;
  max-height: 40rem;
  overflow: auto;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

@media (max-width: 900px) {
  .pf-grid,
  .pf-writeup { grid-template-columns: 1fr; }
  .pf-facts { grid-template-columns: 1fr; }
}