/* Staff locator panel (drawer).
   A flat list, not cards: at 314px, card padding inside body padding inside a border spends most
   of the width on chrome. Rows run edge to edge (the view sets .drawer-body.is-flush) and a
   hairline separates people, so the text inset is the only inset.
   Kept in its own file because the logic it styles is headed for static/components alongside the
   Teams tab and the MyGov page. */

.locator-scope {
  margin: var(--space-2) var(--row-inset, 16px) var(--space-1);
  font-size: .78rem;
  color: var(--ink-muted);
}

.locator-list {
  display: block;
}

.locator-person {
  display: block;
  border-block-start: 1px solid var(--line);

  /* Your own row leads the list and opens by default — it's the one you came for. */
  &.is-me .locator-name { color: var(--brand); }

  & .locator-detail { display: none; }
  &.is-open .locator-detail { display: block; }
}

/* ---- The person header (always visible) --------------------------------- */
.locator-head {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--row-inset, 16px);
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;

  & .locator-head__id { min-width: 0; flex: 1; }

  & .locator-name {
    display: block;
    font-weight: 700;
    font-size: .92rem;
    color: var(--ink);
  }

  & .locator-title {
    display: block;
    font-size: .78rem;
    color: var(--ink-muted);
  }

  /* Where they are now. Allowed to wrap rather than truncate — "Reference Desk · Primary" losing
     its second half is worse than two lines. */
  & .locator-head__where {
    flex: 0 1 auto;
    max-width: 45%;
    font-size: .78rem;
    font-weight: 600;
    color: var(--brand);
    text-align: right;
  }
}

/* ---- The expanded day --------------------------------------------------- */
.locator-detail {
  padding-block-end: var(--space-2);
}

.locator-hours {
  margin: 0 var(--row-inset, 16px) var(--space-2);
  font-size: .78rem;
  color: var(--ink-muted);
}

/*
 * One line per way this person is tied to a space. Work profile ("Based at") and each shift are
 * separate lines on purpose: they answer different questions — where someone is based versus where
 * they're covering right now — and a person can have both at once.
 *
 * A line with [data-locator-space] is tappable and shows the space on the map.
 */
.locator-line {
  padding: var(--space-2) var(--row-inset, 16px);
  padding-inline-start: calc(var(--row-inset, 16px) + var(--space-3));
  border-inline-start: 2px solid transparent;
  font-size: .84rem;

  & .locator-line__label {
    display: block;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .02em;
    text-transform: uppercase;
    color: var(--ink-muted);
  }

  & .locator-line__where {
    font-weight: 600;
    color: var(--ink);
  }

  /* The affordance only renders when the line is actually selectable. */
  & .locator-line__go {
    float: inline-end;
    font-size: .76rem;
    font-weight: 700;
    color: var(--brand);
  }

  &[data-locator-space] {
    cursor: pointer;

    &:hover, &:focus-visible {
      background: var(--surface-alt, rgba(0, 0, 0, .03));
    }

    /* The tint alone is ~1.03:1 — not a perceivable focus indicator. Same 2px ring as the
       app's other tappable rows (lists.css .is-tappable). Inset so it stays inside the drawer. */
    &:focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: -2px;
      border-radius: var(--radius-sm);
    }
  }

  /* The shift happening right now — the one line someone glances for. */
  &.is-now {
    border-inline-start-color: var(--brand);

    & .locator-line__label { color: var(--brand); }
  }

  /* Where they're based, as opposed to today's coverage. */
  &.is-home {
    border-inline-start-color: var(--line);
  }
}

.locator-note,
.locator-peers {
  margin: var(--space-1) 0 0;
  font-size: .76rem;
  font-weight: 400;
  color: var(--ink-muted);
}

.locator-peers .locator-peers__label { font-weight: 700; }