/* ═══════════════════════════════════════════════════════════════════════════
   person-file.css — the one line of chrome that says which file you are in
   ────────────────────────────────────────────────────────────────────────────
   Everything here styles a single element: #modal-file-kicker, in the profile
   modal's sticky top bar, above the name that was already there.

   It is deliberately the quietest thing in that bar. The bar's job is identity
   — name, office, close, share — and this line sits under the name at kicker
   scale because it answers a question the reader only asks when lost ("whose
   file is this, and what is its address"), not one they are reading for. Made
   any louder it would compete with the name it is labelling.

   The address is a link and looks like one on hover only. A permanently
   underlined URL in a header reads as a call to action, and this is not one —
   it is a citation, sitting where a citation belongs.
   ═══════════════════════════════════════════════════════════════════════════ */

#modal-file-kicker {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  min-width: 0;
  margin-bottom: 0.1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  line-height: 1.1;
}
#modal-file-kicker:empty { display: none; }

/* "Person file" — the label. Steel, not gold: it names the surface, it does not
   promote it. */
.pf-kick-what {
  color: #7f92b4;
  flex: none;
}
.pf-kick-what::after {
  content: "·";
  margin-left: 0.4rem;
  opacity: 0.55;
}

/* The citable address. Lower-case on purpose — it is a URL, and a URL rendered
   in the surrounding uppercase would be a URL you cannot retype. */
.pf-kick-addr {
  color: #9fb4d4;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  transition: color 0.15s ease;
}
.pf-kick-addr:hover,
.pf-kick-addr:focus-visible {
  color: #dbe6f7;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Below the publication floor, in the two registers person-file.js distinguishes:
   a file still being built, and a file whose formal record is empty for a reason
   already reviewed and on file. Same muted treatment for both, and the same one
   the address it replaces uses, so neither reads as an error state and neither
   reads as a judgement of the person. */
/* "Neighbors in this seat" — the one District Voice link on a person file, for
   the member who actually sits in a seat where Voice has opened. Deliberately
   the quietest thing in this row: dimmer than the citable address next to it, no
   background, no pill and no count. It is a door to a place, not a figure about
   the person, and a badge here would read as one. */
.pf-kick-voice {
  flex: 0 0 auto;
  margin-left: auto;
  color: #7f93b0;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.pf-kick-voice:hover,
.pf-kick-voice:focus-visible {
  color: #cbd5e1;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* "District 3 board" — the one link on a person file to a district's OWN page,
   for the member who sits in the one seat that has one. Same quiet treatment as
   the Voice link beside it and for the same reason: it is a door to a place, not
   a figure about the person, and a pill or a count here would read as one.

   THE margin-left DANCE IS DELIBERATE. Both links want to sit at the far end of
   the kicker row, so both claim `auto` — but when BOTH are rendered (the member
   who has a seat board and a district page, which is one member today) two auto
   margins would split the leftover space and strand the pair in the middle of
   the row. The sibling rule below gives the auto to the first and a plain gap to
   the second, so the pair travels together against the right edge whether one or
   both are present. */
.pf-kick-board {
  flex: 0 0 auto;
  margin-left: auto;
  color: #7f93b0;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s ease;
}
.pf-kick-voice + .pf-kick-board { margin-left: 0.75rem; }
.pf-kick-board:hover,
.pf-kick-board:focus-visible {
  color: #cbd5e1;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.pf-kick-thin,
.pf-kick-empty {
  color: #6b7c9c;
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* The reviewed reason lives in the title attribute, so the label has to look
   like something worth hovering. A dotted underline and nothing louder. */
.pf-kick-empty {
  border-bottom: 1px dotted rgba(107, 124, 156, 0.6);
  cursor: help;
}

@media (max-width: 420px) {
  #modal-file-kicker { font-size: 0.54rem; gap: 0.3rem; }
}