/* Hand-maintained. The header used to claim this file was generated from
   bi/static/sass/project.scss, but nothing compiles that file -- there is no sass build in
   requirements/ and no package.json -- and the rules below it have only ever existed here. Edit
   this file directly; if a build is ever added, reconcile the two then. */

.alert-debug {
  color: black;
  background-color: white;
  border-color: #d6e9c6;
}

.alert-error {
  color: #b94a48;
  background-color: #f2dede;
  border-color: #eed3d7;
}

#header-logo {
  height: 40px;
}

/* ---------- Staff tracker ----------
   Cluster colours, drawn from the policy-area photos on econw.com (People: classroom slate, Place:
   doorway amber, Economy: dusk rose, Environment: lake teal) and tuned until every pair stays
   distinct under colour-blindness and holds 3:1 against white. Placeholders until official cluster
   colours exist. Colour means one thing on a card: the cluster of a project. */
:root {
  --cluster-people: #3a5ca8;
  --cluster-place: #c0861a;
  --cluster-economy: #a8375a;
  --cluster-environment: #22a08b;
  --cluster-none: #b5bcb8;
}

/* The staff pages' palette: green-tinted greys, one teal, one rust. Named for the role each plays so
   the dark theme (theme.css) can swap them as a set; nothing below this block spells a colour out. */
:root {
  --people-ink: #1c2320;
  --people-ink-rgb: 28, 35, 32;
  --people-ink-2: #4f5a55;
  --people-ink-3: #7d8781;
  --people-ink-4: #9aa39e;
  --people-ink-5: #a3aba6;
  --people-mute: #b5bcb8;
  --people-mute-2: #c3c9c5;
  --people-dotted: #c9d0cb;
  --people-line: #cfd5d1;
  --people-chip-line: #d5dbd7;
  --people-rest: #d7dcd9;
  --people-rule: #dde2de;
  --people-hair: #e3e7e4;
  --people-avatar: #e4ebe7;
  --people-on: #e8ebe9;
  --people-tint: #eceeed;
  --people-tint-2: #eef1ef;
  --people-tint-3: #f1f4f2;
  --people-group: #f4f6f5;
  --people-panel: #f7f8f7;
  --people-surface: #fff;
  --people-shadow-rgb: 28, 35, 32;
  --people-mine-tag: #f1f3f5;
  --people-mine-tag-ink: #6c757d;
  --people-teal: #2c8c8d;
  --people-teal-tint: #d9ecec;
  --people-teal-soft: #e3f1f1;
  --people-teal-wash: #e8f3f3;
  --people-under: #dcefef;
  --people-under-ink: #1f6b6c;
  --people-rust: #b4552d;
  --people-over: #f5e1d8;
  --people-over-ink: #8f3f1f;
  --people-saved: #e3f1ec;
  --people-saved-ink: #1f5c47;
}

.cluster-people { background-color: var(--cluster-people); }
.cluster-place { background-color: var(--cluster-place); }
.cluster-economy { background-color: var(--cluster-economy); }
.cluster-environment { background-color: var(--cluster-environment); }
.cluster-none { background-color: var(--cluster-none); }

.cluster-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 5px;
  border-radius: 50%;
  vertical-align: 1px;
}

/* The card. The whole thing opens the profile, so the whole thing says so on hover. */
.person-card {
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.person-card:hover {
  border-color: var(--people-line);
  box-shadow: 0 2px 4px rgba(var(--people-shadow-rgb), 0.06), 0 6px 16px rgba(var(--people-shadow-rgb), 0.07);
}

.person-card:focus-within {
  border-color: var(--people-line);
}

.person-card__body {
  display: grid;
  gap: 0.7rem;
  align-content: start;
  padding: 0.9rem 1rem;
}

/* Your own card. Deliberately NOT a different colour: it sorts in its normal position and should
   read as one card among many, with a quiet corner note rather than a highlight. The class stays
   as the positioning context for that note. */
.person-card--mine {
  position: relative;
}

.person-card--mine .person-card__body {
  padding-top: 1.4rem;
}

.person-mine-tag {
  position: absolute;
  top: 0;
  right: 0;
  padding: 0.1rem 0.4rem;
  border-bottom-left-radius: 0.25rem;
  background-color: var(--people-mine-tag);
  color: var(--people-mine-tag-ink);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Initials now; the same slot takes a thumbnail photo later. */
.person-who {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  min-width: 0;
}

.person-who__text {
  min-width: 0;
}

.person-avatar {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background-color: var(--people-avatar);
  color: var(--people-ink-2);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

.person-name {
  display: block;
  color: var(--people-ink);
  font-weight: 600;
  font-size: 0.97rem;
  line-height: 1.25;
}

.person-name:hover {
  color: var(--people-ink);
  text-decoration: underline;
}

.person-meta {
  color: var(--people-ink-3);
  font-size: 0.78rem;
  line-height: 1.35;
}

/* The card's header: who they are on the left, their title and its scale in the top-right corner. */
.person-head {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  justify-content: space-between;
  min-width: 0;
}

.person-head .person-who {
  flex: 1 1 auto;
}

.person-rank {
  flex: none;
  max-width: 45%;
  text-align: right;
}

.person-rank__title {
  color: var(--people-ink-2);
  font-size: 0.75rem;
  line-height: 1.25;
}

.person-rank .seniority-scale {
  display: block;
  margin: 3px 0 0 auto;
}

/* The seniority scale beside a title: a hairline with a tick per ladder step, and the person's
   place as a purple burst -- a soft glow around a solid core. Purple because it is none of the
   four cluster colours, which on a card mean a project's cluster and nothing else. */
.seniority-scale {
  margin: 0 0.15rem 0 0.35rem;
  vertical-align: -1px;
  overflow: visible;
}

.seniority-scale__line {
  stroke: var(--people-rule);
  stroke-width: 1;
}

.seniority-scale__tick {
  stroke: var(--people-mute-2);
  stroke-width: 1;
}

.seniority-scale__glow {
  fill: #7b5bd0;
  opacity: 0.18;
}

.seniority-scale__core {
  fill: #6d4bc0;
}

/* Clusters in the subtitle: each keeps its dot beside its name, spaced rather than comma'd. */
.person-cluster {
  display: inline-block;
  margin-right: 0.75em;
  white-space: nowrap;
}

.person-cluster:last-child {
  margin-right: 0;
}

.person-meta a {
  color: inherit;
  border-bottom: 1px dotted var(--people-dotted);
}

.person-meta a:hover {
  color: var(--people-ink);
  text-decoration: none;
}

.person-headline {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--people-ink-2);
  font-size: 0.85rem;
  line-height: 1.45;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* Label/value pairs. The label column fits its labels up to 6rem; a longer one ("Representative
   projects") wraps rather than pushing every value to the right. */
.person-facts {
  display: grid;
  grid-template-columns: fit-content(6rem) minmax(0, 1fr);
  gap: 0.3rem 0.6rem;
  margin: 0;
  font-size: 0.8rem;
}

.person-facts dt {
  padding-top: 1px;
  color: var(--people-ink-3);
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.25;
}

.person-facts dd {
  min-width: 0;
  margin: 0;
  color: var(--people-ink-2);
}

/* A skill, interest, office, cluster or title on a card: plain text at rest, a filter link on
   hover. */
.person-topic,
.person-topic:hover {
  color: inherit;
}

.person-topic:hover,
.person-topic:focus-visible {
  color: var(--people-ink);
  text-decoration: underline;
  text-decoration-color: var(--people-ink-4);
  text-underline-offset: 2px;
}

/* A topic the page is filtered to: marked in the switch's teal, like a highlighter pass. */
.person-topic--match {
  padding: 0 0.3em;
  border-radius: 3px;
  background-color: var(--people-teal-tint);
  color: var(--people-ink);
  font-weight: 600;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/* One project per line, cut off rather than wrapped, so every card keeps the same shape. */
.person-fact-line {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.person-time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.9rem;
  align-items: end;
}

.person-time__work {
  text-align: right;
}

/* "Project distribution in last two years" is long for its column; let it wrap rather than run
   into the workload bars. */
.person-time__projects .person-mini-label {
  white-space: normal;
}

.person-time__work .capacity-spark {
  display: block;
  margin-left: auto;
}

.person-time__word {
  margin-top: 2px;
  color: var(--people-ink-2);
  font-size: 0.75rem;
  white-space: nowrap;
}

/* The load, under the weekly bars. Grey like them -- colour on the card means a project's cluster --
   with the stretched in the capacity page's flagged rust. */
.load-meter {
  margin-top: 2px;
  color: var(--people-ink-2);
  font-size: 0.75rem;
  white-space: nowrap;
}

.load-meter--heavy {
  color: var(--people-rust);
  font-weight: 600;
}

.person-mini-label {
  margin-bottom: 4px;
  color: var(--people-ink-3);
  font-size: 0.72rem;
  white-space: nowrap;
}

/* The two-year bar: one segment per project, width by hours, colour by cluster. */
.project-bar {
  display: flex;
  gap: 2px;
  height: 9px;
  overflow: hidden;
  border-radius: 4px;
}

.project-bar__seg {
  flex-basis: 0;
  min-width: 3px;
  height: 100%;
  outline-offset: 2px;
}

.project-bar__seg:focus {
  outline: 2px solid var(--people-ink);
}

.project-bar__seg--rest {
  opacity: 0.45;
}

.project-bar__phrase {
  margin-top: 4px;
  color: var(--people-ink-2);
  font-size: 0.75rem;
  line-height: 1.35;
}

.project-bar__phrase b {
  font-weight: 600;
}

/* The full profile. */
.person-detail {
  display: grid;
  gap: 1.1rem;
}

.person-who--large .person-avatar {
  width: 52px;
  height: 52px;
  font-size: 1.05rem;
}

.person-detail__name {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1.2;
}

.person-who--large .person-meta {
  margin-top: 2px;
  font-size: 0.85rem;
}

.person-detail__headline {
  max-width: 62ch;
  margin: 0;
  font-size: 1rem;
}

.person-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 1.2rem 2rem;
}

@media (max-width: 767.98px) {
  .person-detail__body {
    grid-template-columns: 1fr;
  }
}

/* Bootstrap's modal-xl stops at 1140px; on a big monitor let the full card spread a little more. */
@media (min-width: 1600px) {
  #personModal .modal-xl {
    max-width: 1400px;
  }
}

/* Section labels in full ink and weight, with a rule between the lists, so each section reads as
   its own block rather than one run of text. */
.person-detail__label {
  margin: 0 0 0.4rem;
  font-size: 0.82rem;
  font-weight: 600;
}

.person-detail__block + .person-detail__block {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--people-hair);
}

.person-detail__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

/* "+12 more" past a long list on the card: quiet text, since a click anywhere opens the profile. */
.person-more {
  color: var(--people-ink-3);
  white-space: nowrap;
}

/* Every tag, a line per category: the name small in a left column, the tags beside it. */
.person-detail__groups {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: 0.2rem 0.75rem;
  max-width: 100%;
  margin: 0;
}

.person-detail__groups dt {
  max-width: 9rem;
  padding-top: 0.2rem;
  color: var(--people-ink-3);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.person-detail__groups dd {
  margin: 0;
}

.person-detail__groups .person-detail__list {
  font-size: 0.84rem;
}

/* The few on their browse card, starred where they sit. */
.person-detail__list li.is-top a::before {
  content: "★";
  margin-right: 0.15rem;
  color: #e0a526;
  font-size: 0.7rem;
}

.person-detail__list li:not(:last-child)::after {
  content: "·";
  margin: 0 0.5rem;
  color: var(--people-ink-3);
}

.person-detail__list a {
  color: var(--people-ink-2);
  border-bottom: 1px dotted var(--people-dotted);
}

.person-detail__list a:hover {
  color: var(--people-ink);
  text-decoration: none;
  border-bottom-style: solid;
}

.person-detail__projects {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.88rem;
}

.person-detail__projects li {
  display: grid;
  gap: 0.1rem;
}

/* "• 26293.00 Washington County Urb. Serv. Framework": the cluster dot, the number in muted
   tabular figures so a list of them lines up, then the title. Space, not a divider, between. */
.person-detail__number {
  margin-right: 0.45rem;
  color: var(--people-ink-3);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.person-detail__faded {
  color: var(--people-ink-5);
  font-size: 0.75rem;
}

.person-detail__project {
  color: var(--people-ink);
  font-weight: 500;
}

.person-detail__blurb {
  color: var(--people-ink-2);
  font-size: 0.84rem;
}

/* A fixed-width right column: sized to its content, the weekly chart's explanation would stretch
   it and squeeze the project bar on the left. The note wraps inside it instead. */
.person-detail__time {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 13rem;
  gap: 1rem 2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--people-hair);
}

@media (max-width: 767.98px) {
  .person-detail__time {
    grid-template-columns: 1fr;
  }
}

.person-detail__time .project-bar {
  height: 14px;
}

.person-detail__work {
  min-width: 0;
}

.person-detail__foot {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 1px solid var(--people-hair);
  color: var(--people-ink-3);
  font-size: 0.8rem;
}

/* Browse filters: one ruled row per filter, label on the left, in the cards' quiet style. */
.people-filters {
  border-top: 1px solid var(--people-hair);
  border-bottom: 1px solid var(--people-hair);
}

.people-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.75rem;
  align-items: center;
  margin: 0;
  padding: 0.4rem 0;
  border: 0;
}

.people-filter-row + .people-filter-row {
  border-top: 1px solid var(--people-hair);
}

.people-filter-label {
  flex: 0 0 7rem;
  width: auto;
  margin: 0;
  padding: 0;
  color: var(--people-ink-3);
  font-size: 0.8rem;
  line-height: 1.25;
}

.people-filter-hint {
  display: block;
  font-size: 0.7rem;
  opacity: 0.8;
}

.people-filter-control {
  flex: 1 1 0;
  min-width: 0;
  font-size: 0.85rem;
}

.people-filter-control--topic {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
}

.people-topic-select {
  flex: 1 1 18rem;
  max-width: 34rem;
  min-width: 0;
}

/* Segmented switch over radio inputs: the same control as the design mockups. Each option is a
   label wrapping its own radio, so there are no sibling selectors to go wrong. */
.people-toggle {
  display: inline-flex;
  flex: none;
  overflow: hidden;
  border: 1px solid var(--people-line);
  border-radius: 6px;
  background-color: var(--people-surface);
}

.people-toggle__option {
  position: relative;
  margin: 0;
  cursor: pointer;
}

.people-toggle__option + .people-toggle__option {
  border-left: 1px solid var(--people-line);
}

/* Hidden but still focusable and clickable through its label. */
.people-toggle__option input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.people-toggle__option span {
  display: block;
  padding: 0.25rem 0.8rem;
  color: var(--people-ink-2);
  font-size: 0.82rem;
  line-height: 1.5;
  white-space: nowrap;
}

.people-toggle__option:hover span {
  background-color: var(--people-tint-3);
}

.people-toggle__option input:checked + span {
  background-color: var(--people-teal-tint);
  color: var(--people-ink);
  font-weight: 600;
}

.people-toggle__option input:focus-visible + span {
  outline: 2px solid var(--people-teal);
  outline-offset: -2px;
}

/* Cluster, Title and Office. Each list is three rows deep across --facet-columns columns (set per
   list from its length), and grows to a share of the width in proportion, so the lists fill the
   row evenly and the panel stays short. */
.people-facets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: stretch;
  padding: 0.5rem 0 0.6rem;
}

/* A hairline between lists, full height, in the panel's own rule colour. */
.people-facet + .people-facet {
  padding-left: 1.25rem;
  border-left: 1px solid var(--people-hair);
}

.people-facet {
  flex: var(--facet-columns, 1) 1 0;
  min-width: calc(var(--facet-columns, 1) * 9rem);
  margin: 0;
  padding: 0;
  border: 0;
}

.people-facet__head {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  width: auto;
  margin-bottom: 0.2rem;
  padding: 0;
  font-size: 0.8rem;
}

.people-facet__label {
  color: var(--people-ink-3);
}

/* Deliberately quiet: small and grey, and invisible (but still taking its space, so nothing
   shifts) until something in its list is ticked. */
.people-facet__clear {
  padding: 0;
  border: 0;
  background: none;
  color: var(--people-ink-5);
  font-size: 0.7rem;
  cursor: pointer;
}

.people-facet__clear:hover,
.people-facet__clear:focus-visible {
  color: var(--people-ink-2);
  text-decoration: underline;
}

.people-facet__clear:disabled {
  visibility: hidden;
}

.people-facet__list {
  columns: var(--facet-columns, 1);
  column-gap: 1.5rem;
}

.people-facet__list .custom-control {
  break-inside: avoid;
  min-height: 1.3rem;
}

.people-facet .custom-control-label {
  color: var(--people-ink);
  font-size: 0.85rem;
  line-height: 1.5;
}

/* While the next set of results is on its way: dimmed, not blanked, so nothing jumps. */
#people-results {
  transition: opacity 0.12s;
}

.people-results--loading {
  opacity: 0.55;
}

.people-results-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1rem;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

@media (max-width: 575.98px) {
  .people-filter-label {
    flex-basis: 100%;
  }

  .people-facet {
    flex-basis: 100%;
    min-width: 0;
  }

  /* Stacked on a phone, so the divider runs across instead. */
  .people-facet + .people-facet {
    padding-top: 0.5rem;
    padding-left: 0;
    border-top: 1px solid var(--people-hair);
    border-left: 0;
  }

  .people-facet__list {
    columns: 2;
  }
}

/* The full card in edit mode: the same layout, with inputs where the text was. */
.person-detail__saved {
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  background-color: var(--people-saved);
  color: var(--people-saved-ink);
  font-size: 0.85rem;
}

.person-panel--loading {
  opacity: 0.55;
  transition: opacity 0.12s;
}

.person-edit label.person-detail__label,
.person-edit legend.person-detail__label {
  display: block;
  width: auto;
  padding: 0;
  color: var(--people-ink);
}

.person-edit fieldset {
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

/* The card's name with the "name on your card" box right beside it. */
.person-edit__name {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.75rem;
  align-items: center;
}

/* Wide enough for its placeholder; drops under the name when the row runs out. */
.person-edit__name .form-control {
  flex: 1 1 20rem;
  width: auto;
  min-width: 0;
  max-width: 28rem;
}

.person-edit__hint {
  margin: 0.3rem 0 0;
  color: var(--people-ink-3);
  font-size: 0.75rem;
}

/* "On your card" and "Everything else": the two boxes under each side's label. */
.person-edit__sublabel {
  display: block;
  margin: 0.5rem 0 0.2rem;
  color: var(--people-ink-2);
  font-size: 0.78rem;
}

.person-edit__sublabel span {
  margin-left: 0.3rem;
  color: var(--people-ink-3);
}

/* "optional", or a short must-read note, beside a field's label. */
.person-edit__aside {
  margin-left: 0.3rem;
  color: var(--people-ink-3);
  font-size: 0.75rem;
  font-weight: 400;
}

/* "You have changes that aren't saved", over the top of the form. */
.person-edit__discard:not([hidden]) {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  align-items: center;
  margin-bottom: 0;
}

.person-edit__discard span {
  margin-right: auto;
}

/* A full "On your card" box: the chip a dragged tag would push out. */
.select2-selection__choice.is-replaced {
  opacity: 0.45;
  outline: 1px dashed #c0392b;
  text-decoration: line-through;
}

.person-edit .custom-control-label {
  font-size: 0.88rem;
}

.project-rows {
  display: grid;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

/* One representative project: handle, then the picker with role and blurb under it, then remove. */
.project-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: start;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--people-hair);
  border-radius: 5px;
  background-color: var(--people-surface);
}

.project-drag-handle {
  padding-top: 0.45rem;
  color: var(--people-mute);
  cursor: grab;
}

.project-row__fields {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.35rem;
}

/* "+ Add your role" and the rest, in a row under the fields. */
.project-row__adds {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  margin-top: 0.25rem;
}

.project-row__remove {
  padding-top: 0.35rem;
}

.person-edit__actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-top: 0.9rem;
  border-top: 1px solid var(--people-hair);
}

/* Edit page: the one-click project suggestions. */
.project-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.75rem;
}

.project-suggestions > div {
  flex-basis: 100%;
}

.project-suggestion {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 0.2rem 0.65rem;
  border: 1px dashed var(--people-dotted);
  border-radius: 999px;
  background: transparent;
  color: var(--people-ink-2);
  font-size: 0.82rem;
  cursor: pointer;
}

.project-suggestion:hover,
.project-suggestion:focus {
  border-style: solid;
  background-color: var(--people-tint-2);
  color: var(--people-ink);
}

.project-suggestion__plus {
  margin-left: 0.5rem;
  color: var(--people-teal);
  font-weight: 600;
}

/* "Browse all tags" under a tag box: a link-styled button on the hint line that opens the tag map
 * below, switched to that box. */
.person-edit__browse {
  padding: 0;
  border: 0;
  background: none;
  color: var(--people-teal);
  font-size: inherit;
  cursor: pointer;
}

.person-edit__browse:hover,
.person-edit__browse:focus {
  text-decoration: underline;
}

.person-edit__browse::before {
  content: "\00b7";
  margin: 0 0.35rem 0 0.1rem;
  color: var(--people-ink-3);
}

/* The tag map: every tag by category with one person's marked, as the edit form's picker. Folded
 * away by default in a <details>, since it's long. */
.tag-map-details {
  margin-top: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--people-hair);
}

.tag-map-details > summary {
  cursor: pointer;
}

.tag-map-details__hint {
  margin-left: 0.3rem;
  color: var(--people-ink-3);
  font-size: 0.75rem;
  font-weight: 400;
}

.tag-map {
  margin-top: 0.6rem;
}

.tag-map__bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.75rem;
  align-items: center;
  margin-bottom: 0.75rem;
}

.tag-map__prompt {
  color: var(--people-ink-3);
  font-size: 0.8rem;
}

.tag-map__legend {
  margin-left: auto;
}

.tag-map__legend .tag-chip {
  margin-bottom: 0;
  cursor: default;
}

.tag-map__group {
  margin-bottom: 0.75rem;
}

.tag-map__heading {
  margin-bottom: 0.25rem;
  color: var(--people-ink-3);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.tag-chip {
  display: inline-block;
  margin: 0 0.25rem 0.3rem 0;
  padding: 0.1rem 0.55rem;
  border: 1px solid var(--people-chip-line);
  border-radius: 999px;
  background: var(--people-surface);
  color: var(--people-ink-2);
  font-size: 0.78rem;
  line-height: 1.5;
  cursor: pointer;
}

.tag-chip:hover,
.tag-chip:focus {
  border-color: var(--people-teal);
  color: var(--people-ink);
}

/* Held tags: filled for Good at, outlined on a tint for Curious about, filled with a dashed halo
 * for both. */
.tag-chip--skill,
.tag-chip--skill:hover,
.tag-chip--skill:focus {
  border-color: var(--people-teal);
  background: var(--people-teal);
  color: #fff;
}

.tag-chip--interest,
.tag-chip--interest:hover,
.tag-chip--interest:focus {
  border: 1px dashed var(--people-teal);
  background: var(--people-teal-soft);
  color: var(--people-ink);
}

.tag-chip--both,
.tag-chip--both:hover,
.tag-chip--both:focus {
  border-color: var(--people-teal);
  background: var(--people-teal);
  color: #fff;
  outline: 1px dashed var(--people-teal);
  outline-offset: 1px;
}

a.tag-chip:hover {
  text-decoration: none;
}

.tag-chip__count {
  margin-left: 0.3rem;
  color: var(--people-ink-3);
  font-variant-numeric: tabular-nums;
}

/* "Restricted view" beside the heading of a page only some people can open: quiet grey text. */
.page-restricted {
  color: var(--people-ink-3);
  font-size: 0.8rem;
  white-space: nowrap;
  border-bottom: 1px dotted currentColor;
  cursor: help;
}

/* The tags page: category headings over their chips, and the admin's edit tables. */
.tags-group__heading {
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--people-hair);
}

.tags-group__heading a {
  color: inherit;
}

.tags-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.75rem;
  align-items: center;
  margin-bottom: 1rem;
}

.tags-toolbar__select {
  width: auto;
  max-width: 100%;
}

.tags-toolbar__label {
  margin: 0;
  color: var(--people-ink-3);
  font-size: 0.82rem;
}

/* The counts table: a shaded cell per column, darker for more people -- one hue, so it reads as
 * "how many", not as a category. Numbers stay in ink over the shading. */
.tag-counts {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.tag-counts thead th {
  border-top: 0;
  color: var(--people-ink-3);
  font-size: 0.75rem;
  font-weight: 600;
  white-space: nowrap;
}

.tag-counts a {
  color: inherit;
}

.tag-counts__group th {
  padding-top: 0.9rem;
  background: var(--people-group);
}

.tag-counts__total {
  font-weight: 600;
}

.tag-counts__cell {
  min-width: 4.5rem;
  background-color: rgba(44, 140, 141, calc(var(--heat, 0) * 0.5));
}

.tag-counts__category {
  margin-left: 0.4rem;
  color: var(--people-ink-3);
  font-size: 0.75rem;
}

.tags-edit__table td,
.tags-edit__table th {
  vertical-align: middle;
}

.tags-edit__table .tags-edit__order {
  width: 5.5rem;
}

.tags-edit__table .tags-edit__uses {
  width: 4.5rem;
}

.tags-edit__table .tags-edit__delete {
  width: 3.5rem;
  text-align: center;
}

.tags-edit__group th {
  padding-top: 1rem;
  border-top: 0;
  color: var(--people-ink-3);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Kept in view down a long list, so Save is always one click away. */
.tags-edit__actions {
  position: sticky;
  bottom: 0;
  padding: 0.6rem 0;
  border-top: 1px solid var(--people-hair);
  background: var(--people-surface);
}

/* A tag's category, trailing its name in the autocomplete list. */
.people-select2-category {
  float: right;
  margin-left: 0.75rem;
  color: var(--people-ink-3);
}

.select2-results__option--highlighted .people-select2-category {
  color: inherit;
  opacity: 0.8;
}

/* Weekly hours, stacked. Greys, not hues -- on the card, colour means a project's cluster and
   nothing else: billable darkest, proposal lighter, other work palest, leave only outlined. The
   dashed line is 40 hours, drawn over the bars so overtime reads against it. */
.capacity-spark__seg--billable {
  fill: var(--people-ink-2);
}

.capacity-spark__seg--proposal {
  fill: var(--people-ink-4);
}

.capacity-spark__seg--other {
  fill: var(--people-rest);
}

.capacity-spark__seg--leave {
  fill: none;
  stroke: var(--people-mute);
  stroke-width: 1;
  stroke-dasharray: 2 2;
}

.capacity-spark__line {
  stroke: var(--people-ink);
  stroke-width: 1;
  stroke-dasharray: 3 2;
  opacity: 0.7;
}

/* The capacity page's firm-wide chart. Title groups run light to dark blue, junior to senior --
   clear of the workload bands behind (teal, grey, rust) -- and overtime gets a dark ring. */
/* Up to its own 1000px (the svg's width attribute; never stretched wider), down to 640px, and
   below that its overflow-auto box scrolls sideways rather than shrinking dots and labels past
   reading. The layout around it is Bootstrap's grid. */
.firm-chart {
  display: block;
  width: 100%;
  max-width: 1000px;
  min-width: 640px;
  height: auto;
  cursor: pointer;
}

/* Its width comes from its grid column alone, never from what's in it, so a long name is cut off
   instead of widening the panel. */
.firm-panel {
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--people-rule);
  border-radius: 6px;
  background: var(--people-panel);
  font-size: 0.85rem;
}

.firm-panel__heading {
  margin-bottom: 0.4rem;
  font-weight: 600;
  color: var(--people-ink);
}

.firm-panel__heading span {
  margin-left: 0.35rem;
  font-weight: normal;
  font-size: 0.78rem;
  color: var(--people-ink-3);
}

/* Fixed layout, so filling the person row never re-flows the column widths. */
.firm-summary {
  width: 100%;
  table-layout: fixed;
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
}

.firm-summary col.firm-summary__col-title { width: 36%; }
.firm-summary col.firm-summary__col-people { width: 12%; }
.firm-summary col.firm-summary__col-load { width: 13%; }
.firm-summary col.firm-summary__col-billable { width: 19%; }
.firm-summary col.firm-summary__col-stretched { width: 20%; }

.firm-summary th {
  padding: 0 0 0.25rem 0.5rem;
  font-weight: 600;
  font-size: 0.72rem;
  color: var(--people-ink-3);
  border-bottom: 1px solid var(--people-rule);
  white-space: nowrap;
}

.firm-summary td {
  padding: 0.2rem 0 0.2rem 0.5rem;
  border-bottom: 1px solid var(--people-tint);
}

.firm-summary th:first-child,
.firm-summary td:first-child { padding-left: 0; }

.firm-summary__vs {
  font-weight: normal;
  color: var(--people-ink-3);
}

/* The "?" on a heading or label: its definition shows on hover or focus. */
.help-tip {
  display: inline-block;
  width: 0.95rem;
  height: 0.95rem;
  margin-left: 0.2rem;
  border: 1px solid var(--people-mute);
  border-radius: 50%;
  font-size: 0.62rem;
  line-height: 0.85rem;
  text-align: center;
  color: var(--people-ink-3);
  cursor: help;
}

/* Each title's row opens its people. */
.js-firm-title { cursor: pointer; }
.js-firm-title:hover td { background: var(--people-tint); }

/* Their title's row, while the person row below shows someone; and the open title. */
.firm-summary__row--active td { background: var(--people-teal-wash); }
.firm-summary__row--selected td { background: var(--people-teal-wash); font-weight: 600; }

/* The reserved last row: a hint at rest, the hovered person otherwise. A set height (room for a
   second line) so filling it never moves anything. */
.firm-summary__person td {
  height: 2.6rem;
  border-top: 2px solid var(--people-rule);
  border-bottom: 0;
  vertical-align: middle;
}

.firm-panel__hint { color: var(--people-ink-3); }

.firm-summary__who {
  overflow: hidden;
}

.firm-summary__name {
  display: block;
  overflow: hidden;
  font-weight: 600;
  color: var(--people-ink);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.firm-summary__who .firm-summary__vs {
  display: block;
  overflow: hidden;
  font-size: 0.72rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.firm-summary__word {
  padding: 0.05rem 0.4rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  white-space: nowrap;
}

.firm-summary__word--under { background: var(--people-under); color: var(--people-under-ink); }
.firm-summary__word--on { background: var(--people-on); color: var(--people-ink-2); }
.firm-summary__word--over { background: var(--people-over); color: var(--people-over-ink); }

.firm-summary__flag {
  display: block;
  font-size: 0.72rem;
}

/* Every flagged number on the capacity page -- stretched load, long hours, well below target,
   long weeks -- in one style: the stretched dots' rust, semi-bold. */
.capacity-flag {
  font-weight: 600;
  color: var(--people-rust);
}

.firm-chart__row-label {
  fill: var(--people-ink-2);
  font-size: 12px;
}

/* A title open: its label bold, its row banded, everything else faded back. */
.firm-chart__row-label.is-selected { fill: var(--people-ink); font-weight: 700; }
.firm-chart__row-label.is-faded { opacity: 0.35; }
.firm-chart__dot.is-faded { opacity: 0.15; }
.firm-chart__row-band { fill: var(--people-teal-wash); }
.firm-chart__label-band { fill: var(--people-hair); }

/* The row under the pointer, since a click anywhere in it opens that title. */
.firm-chart__hover-band { fill: var(--people-tint); }

.firm-chart__band--under { fill: var(--people-teal); opacity: 0.07; }
.firm-chart__band--on { fill: var(--people-ink-3); opacity: 0.07; }
.firm-chart__band--over { fill: var(--people-rust); opacity: 0.07; }

.firm-chart__cut {
  stroke: var(--people-ink-3);
  stroke-dasharray: 3 3;
}

.firm-chart__axis {
  stroke: var(--people-rule);
}

.firm-chart__label {
  fill: var(--people-ink-3);
  font-size: 12px;
}

/* Grey for everyone, rust for the stretched: the one thing the chart is for. A thin dark outline
   so the grey holds its edge on the white page. */
.firm-chart__dot {
  fill: var(--people-mute-2);
  stroke: rgba(var(--people-ink-rgb), 0.35);
  stroke-width: 1;
}

.firm-chart__dot--stretched { fill: var(--people-rust); }
.firm-chart__dot--below { fill: var(--people-teal); }

/* The hovered dot's name tag. Never a hit target, so it can't steal the pointer from the dots. */
.firm-chart__name {
  pointer-events: none;
}

.firm-chart__name rect { fill: var(--people-ink); opacity: 0.88; }

.firm-chart__name text {
  fill: var(--people-surface);
  font-size: 12px;
  font-weight: 600;
}

/* The dot the panel is showing: teal and heavier, so it can't be mistaken for the overtime ring. */
.firm-chart__dot--active,
.firm-chart__dot:focus {
  stroke: var(--people-teal);
  stroke-width: 3;
  outline: none;
}

.firm-chart__dot--overtime {
  stroke: var(--people-ink);
  stroke-width: 2.5;
}

.firm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.2rem;
  margin-top: 0.5rem;
  color: var(--people-ink-2);
  font-size: 0.82rem;
}

.firm-legend__dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 0.35rem;
  border-radius: 50%;
  vertical-align: -1px;
}

.firm-legend__dot--else { background: var(--people-mute-2); }
.firm-legend__dot--stretched { background: var(--people-rust); }
.firm-legend__dot--below { background: var(--people-teal); }

.firm-legend__dot--ring {
  border: 2px solid var(--people-ink);
  background: transparent;
}

.capacity-search { width: 16rem; max-width: 100%; }

/* Below the chart: needs attention, or a title's people, or search matches. */
.capacity-lists {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--people-rule);
}

.capacity-lists__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.25rem 1rem;
  margin-bottom: 0.75rem;
}

.capacity-lists__back { font-size: 0.82rem; }

.capacity-lists__col-head {
  display: flex;
  align-items: center;
  margin: 0 0 0.1rem;
  font-size: 0.9rem;
  font-weight: 600;
}

.capacity-lists__sub {
  margin-bottom: 0.4rem;
  font-size: 0.8rem;
  color: var(--people-ink-3);
}

.capacity-list {
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}

.capacity-list th {
  border-top: 0;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--people-ink-3);
  white-space: nowrap;
}

.capacity-list td { vertical-align: middle; }
.capacity-list tbody tr:hover td,
.capacity-list__row--active td { background: var(--people-teal-wash); }

.capacity-list__who {
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.capacity-list__name { font-weight: 600; }

.capacity-list__title {
  margin-left: 0.35rem;
  font-size: 0.78rem;
  color: var(--people-ink-3);
}

.capacity-list__long {
  font-size: 0.75rem;
  color: var(--people-ink-3);
  white-space: nowrap;
}


/* The lists' six-week vignette: billable dark, the rest of the week light. */
.capacity-vignette { display: block; }
.capacity-vignette__bill { fill: var(--people-ink-2); }
.capacity-vignette__rest { fill: var(--people-rest); }
.capacity-vignette__target { stroke: var(--people-teal); stroke-width: 1; opacity: 0.8; }

/* select2 on the people pages, restyled to sit with the rest: quiet pill chips, the panel's
   hairline border, and the teal focus of the switch. Scoped so the reports pages' pickers keep
   their look. */
:is(.people-filters, .person-edit) .select2-container--bootstrap4 .select2-selection {
  border-color: var(--people-line);
  border-radius: 6px;
  font-size: 0.85rem;
}

:is(.people-filters, .person-edit) .select2-container--bootstrap4.select2-container--focus .select2-selection,
:is(.people-filters, .person-edit) .select2-container--bootstrap4.select2-container--open .select2-selection {
  border-color: var(--people-teal);
  box-shadow: 0 0 0 0.15rem rgba(44, 140, 141, 0.15);
}

:is(.people-filters, .person-edit) .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
  padding: 0 0.35rem;
}

:is(.people-filters, .person-edit) .select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
  margin: 0.3rem 0.3rem 0 0;
  padding: 0.05rem 0.55rem 0.05rem 0.45rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--people-tint-2);
  color: var(--people-ink);
  font-size: 0.8rem;
  line-height: 1.5;
}

:is(.people-filters, .person-edit) .select2-container--bootstrap4 .select2-selection__choice__remove {
  margin-right: 0.3rem;
  border: 0;
  color: var(--people-ink-4);
  font-weight: 400;
}

:is(.people-filters, .person-edit) .select2-container--bootstrap4 .select2-selection__choice__remove:hover {
  background: none;
  color: var(--people-ink);
}

:is(.people-filters, .person-edit) .select2-container--bootstrap4 .select2-search__field {
  margin-top: 0.3rem;
  font-size: 0.85rem;
}

:is(.people-filters, .person-edit) .select2-container--bootstrap4 .select2-search__field::placeholder {
  color: var(--people-ink-5);
}

.people-select2-dropdown {
  overflow: hidden;
  border-color: var(--people-line) !important;
  border-radius: 6px !important;
  box-shadow: 0 6px 16px rgba(var(--people-shadow-rgb), 0.1);
  font-size: 0.85rem;
}

.people-select2-dropdown .select2-results__option--highlighted,
.people-select2-dropdown .select2-results__option--highlighted[aria-selected] {
  background-color: var(--people-teal-tint) !important;
  color: var(--people-ink) !important;
}

.people-select2-dropdown .select2-results__option[aria-selected="true"] {
  background-color: var(--people-tint-3);
  color: var(--people-ink-3);
}

/* Keep the select2 chip list from collapsing to a single line while dragging. */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
  min-height: 2rem;
}