/* OpenFlow v2: the people pages' own rules. Report 204.
   Uses the shared templates in of-base.css (`templates/_of.html`); only
   this page group's rules go here. See
   planning/design/openflow-v2-handoff/BUILD-NOTES.md. */

/* People toolbar on a phone: the search takes the row, the three selects
   share the next ones two by two. */
@media (max-width: 759.98px) {
  .people-page .of-toolbar .of-select { flex: 1 1 140px; }
}

/* ── One person, the full record (page 36) ─────────────────────────────
   The record's own section cards, drawn as the template's sections. */
.person-page .of-detail__main > .ui-card,
.team-page .of-detail__main > .ui-card,
.team-page .of-detail__aside > .ui-card {
  background: var(--card-bg); border: 1px solid var(--line); border-radius: 14px;
  padding: 20px; margin: 0 0 16px; box-shadow: none;
}
.person-page .of-detail__main > .ui-card .card-title,
.team-page .ui-card .ui-card__title { margin: 0 0 12px; font-size: 18px; font-weight: 600; color: var(--ink-1); }
/* The person panel's view level: who, the details with Edit, a line per
   section, Open the full record. */
.person-panel__who { display: flex; align-items: center; gap: 14px; margin: 0 0 18px; }
.person-panel__avatar { width: 52px; height: 52px; font-size: 16px; }
.person-panel__line { margin: 0 0 4px; font-size: 15px; color: var(--of-head-ink); }
.person-panel__section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.person-panel__facts { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 8px 12px; margin: 6px 0 0; font-size: 15px; }
.person-panel__facts dt { color: var(--of-muted); font-weight: 400; }
.person-panel__facts dd { margin: 0; overflow-wrap: anywhere; }
.person-panel__more { margin: 16px 0 0; }
.person-panel__more a { display: inline-flex; align-items: center; gap: 4px; font-weight: 500; text-decoration: none; }
.person-panel__more .ms { font-size: 18px; }
.person-panel .ui-panel__foot { align-items: center; }
.person-panel .ui-panel__foot .of-danger { margin-left: auto; display: inline-flex; align-items: center; }
.person-aside__danger { margin: 12px 4px 0; }
.person-aside__danger .of-danger { margin-left: 0; height: auto; padding: 0; }

/* ── Add a person (page 37) ────────────────────────────────────────────
   The form card, then the invitations as rows: who, the link to copy, and
   Cancel. In the panel (and on a phone) a row stacks. */
.person-new { padding: 20px 20px 0; margin: 0 0 24px; }
.person-new .of-section__title { margin: 0 0 12px; }
.person-new .of-formbar { margin: 16px -20px 0; }
.person-new-page .person-invite, .person-new-panel .person-invite { padding: 16px 20px; margin: 0 0 16px; }
.person-pending__note { margin: 0 4px 10px; font-size: 14px; color: var(--of-muted); max-width: 72ch; }
.of-list .invite-row {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr) auto;
  align-items: center; gap: 8px 16px;
}
.invite-row__link .copy-field { width: 100%; height: 36px; font-size: 14px; }
.invite-row__cancel { margin: 0; }
.person-new-panel .of-list .invite-row, .person-new-panel .of-list { grid-template-columns: minmax(0, 1fr); }
.person-new-panel .of-list .invite-row { display: flex; flex-direction: column; align-items: stretch; }
.person-new-panel__form { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 759.98px) {
  .of-list .invite-row { display: flex; flex-direction: column; align-items: stretch; }
}

/* ── Teams (pages 38, 39) ──────────────────────────────────────────── */
.teams-page .teams-role-note {
  margin: 0 4px; padding: 0; border: 0; max-width: 72ch;
  font-size: 14px; color: var(--of-muted);
}
.teams-row__lead.is-missing { color: var(--warn-fg, #7A3D10); }
/* A one-section form (New team, a group): a card on a Form page, the
   panel's body in the side panel. */
.team-form, .group-form { padding: 20px; display: flex; flex-direction: column; gap: 16px; }
.ui-panel__form.team-form, .ui-panel__form.group-form { padding: 0; }
.ui-panel__form.team-form .ui-panel__body,
.ui-panel__form.group-form .ui-panel__body { display: flex; flex-direction: column; gap: 16px; }

/* ── Groups (report 211): a group's picture in the avatar circle, its own
   page (Remove on a member row, Retire under the facts), and Add people. */
.group-avatar__img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.of-row__avatar:has(.group-avatar__img) { overflow: hidden; background: none; }
.group-page__remove { display: flex; justify-content: flex-end; }
.group-page__remove form { margin: 0; }
.group-page__hidden { margin: 12px 4px 0; }
.group-page__retire { margin-top: 16px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.group-add__search { display: flex; gap: 8px; align-items: center; }
.group-add__search input[type="search"] { flex: 1 1 auto; min-width: 0; font-size: 16px; min-height: 40px; }
.group-add__list { grid-template-columns: 1fr; }
@media (min-width: 560px) { .group-add__list { grid-template-columns: 1fr; } }
.group-add__list li[hidden] { display: none; }
.group-add__meta { display: block; font-size: 14px; color: var(--of-muted); }
@media (max-width: 720px) {
  .group-page__remove { display: inline-flex; margin-left: 8px; }
}
.team-page .of-detail__main > .ui-card + .ui-card { margin-top: 16px; }
.team-page .of-detail__aside > .ui-card { margin-top: 16px; }

/* ── Audiences (page 43) ───────────────────────────────────────────────
   The question card: labelled fields in a grid, then Show people, Clear
   and Write to these people. The people it reaches are the list. */
.aud-question { margin: 0 0 24px; }
.aud-fields {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr));
  gap: 12px 16px;
}
.aud-fields label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--of-head-ink); }
.aud-fields .of-select, .aud-fields .of-search { width: 100%; flex: none; font-weight: 400; }
.aud-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.aud-actions .ui-btn { min-height: 42px; height: 42px; padding-block: 0; }
.aud-question .prof-note { margin: 12px 0 0; font-size: 14px; color: var(--of-muted); }
.aud-result__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin: 0 0 8px; }
.aud-result__title { margin: 0 0 0 4px; }
.aud-result .prof-note { margin: 0 4px 8px; font-size: 14px; color: var(--of-muted); }

/* ── Write a message (page 46) ─────────────────────────────────────────
   One column of section cards (the fields reuse the Audiences grid), the
   names folded under "8 people — show", the form bar last. */
.write-stack { display: flex; flex-direction: column; gap: 16px; margin-bottom: 16px; }
.write-page .of-section__head { display: block; }
.write-who { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.write-who__line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.write-who__of { font-size: 14px; color: var(--of-muted); }
.write-who__fold { margin-top: 10px; }
.write-who__fold > summary { cursor: pointer; font-size: 15px; color: var(--ink-1); }
.write-who__show { color: var(--accent); text-decoration: underline; }
.write-who__fold[open] .write-who__show { text-decoration: none; }
.write-who__none, .write-who .field-note { margin: 10px 0 0; font-size: 14px; color: var(--of-muted); }
.write-page .field { display: flex; flex-direction: column; gap: 6px; }
.write-page .msg-write { display: flex; flex-direction: column; gap: 16px; }
.write-page .of-formbar .ui-btn--primary span[hidden] { display: none; }

/* ── One message (page 47) ──────────────────────────────────────────── */
.message-page .outbox-msg__body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; font-size: 15px; }
.message-who { margin-top: 24px; }
.message-who__head { display: flex; align-items: center; gap: 10px; margin: 0 0 8px; }
.message-who__head .of-group-label { margin: 0 0 0 4px; }
.message-who__note { margin: 0 4px 12px; font-size: 14px; color: var(--of-muted); }

/* ── Journey types (page 32) ───────────────────────────────────────── */
.jt-readonly {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-size: 14px; color: var(--of-muted);
}
.jt-warn { display: block; color: var(--warn-fg, #7A3D10); }
.jt-count--none { color: var(--of-muted); }

/* ── Journey editor, read only (page 34) ──────────────────────────────
   The activities as rows that open in place; the other parts as sections
   of short items. No inputs. */
.jr-block { margin: 0 0 24px; }
.jr-block .of-group-label { margin-top: 0; }
.jr-intro { margin: 0 4px 10px; font-size: 14px; color: var(--of-muted); }
.jr-step + .jr-step { border-top: 1px solid var(--line-2); }
.jr-step__line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 150px 20px;
  align-items: center; gap: 6px 16px; padding: 14px 20px;
  cursor: pointer; list-style: none;
}
.jr-step__line::-webkit-details-marker { display: none; }
.jr-step__line:hover, .jr-step[open] > .jr-step__line { background: var(--of-head-bg); }
.jr-step__line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.jr-step__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-step__title { font-weight: 500; color: var(--ink-1); }
.jr-step__n { color: var(--of-muted); }
.jr-step__meta, .jr-step__cond { font-size: 14px; color: var(--of-muted); }
.jr-step__req { font-size: 14px; color: var(--of-head-ink); }
.jr-step__chev { font-size: 20px; color: var(--of-muted); transition: transform 160ms; }
.jr-step[open] .jr-step__chev { transform: rotate(180deg); }
.jr-step__open { padding: 4px 20px 16px; }
.jr-step__words { margin: 0 0 8px; white-space: pre-wrap; font-size: 15px; }
.jr-facts { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 8px 16px; margin: 0; font-size: 15px; }
.jr-facts dt { font-size: 13px; font-weight: 600; color: var(--of-head-ink); padding-top: 2px; }
.jr-facts dd { margin: 0; overflow-wrap: anywhere; }
.jr-facts .jr-step__words { margin: 0; }
.jr-lines { display: flex; flex-direction: column; gap: 2px; }
.jr-qs { margin: 0; padding-left: 20px; }
@media (max-width: 759.98px) {
  .jr-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .jr-facts dd { margin-bottom: 8px; }
}
.jr-step__note { margin: 4px 0 0; font-size: 14px; color: var(--of-head-ink); }
.jr-step__ask { color: var(--of-muted); }
.jr-none { margin: 0; font-size: 14px; color: var(--of-muted); }
.jr-items { list-style: none; margin: 0; padding: 0; }
.jr-items li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 20px; border-top: 1px solid var(--line-2);
}
.jr-items li:first-child { border-top: 0; }
.jr-items li > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jr-items li > span:first-child > span { font-size: 14px; color: var(--of-muted); }
.jr-items__side { font-size: 14px; color: var(--of-head-ink); flex: none; }
.journey-read-page .of-section { margin-bottom: 16px; }
.jr-welcome__subject { margin: 0 0 8px; }
@media (max-width: 759.98px) {
  .jr-step__line { grid-template-columns: minmax(0, 1fr) 20px; padding: 14px 16px; }
  .jr-step__line > .of-pill, .jr-step__req { grid-column: 1; justify-self: start; }
  .jr-step__chev { grid-column: 2; grid-row: 1; }
  .jr-step__open { padding: 4px 16px 16px; }
  .jr-items li { flex-direction: column; align-items: flex-start; padding: 14px 16px; }
}

/* ── Signatures (page 11) ──────────────────────────────────────────────
   The record's facts card on the right, its pill beside the title. */
.sig-record__head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 16px 20px 0;
}
.sig-record .of-facts { padding-bottom: 12px; }
.sig-record__tech { padding: 0 20px 16px; }
.sig-record__tech summary { cursor: pointer; font-size: 14px; color: var(--of-head-ink); list-style: none; }
.sig-record__tech summary::-webkit-details-marker { display: none; }
.signature-page .sig-consent, .sig-panel .sig-consent {
  white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; font: inherit; font-size: 15px;
}
.sig-panel__facts { padding: 0 0 16px; }

/* ── Outbox (page 48) ──────────────────────────────────────────────────
   A message is one row: subject and who · when, the state pill, a fold
   arrow. It opens in place to the words. Chips and the count sit above. */
.outbox-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin: 0 0 16px;
}
.outbox-msg + .outbox-msg { border-top: 1px solid var(--line-2); }
.outbox-msg__line {
  display: grid; grid-template-columns: minmax(0, 1fr) auto 20px;
  align-items: center; gap: 6px 16px;
  padding: 14px 20px; cursor: pointer; list-style: none;
}
.outbox-msg__line::-webkit-details-marker { display: none; }
/* components.css draws an older "›" here; the row has its own arrow. */
.outbox-page .outbox-msg__line::after { content: none; display: none; }
.outbox-msg__line:hover { background: var(--of-head-bg); }
.outbox-msg__line:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.outbox-msg__text { display: flex; align-items: baseline; gap: 4px 12px; min-width: 0; }
.outbox-msg__subject {
  flex: 0 1 auto; min-width: 0; font-weight: 500; color: var(--ink-1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.outbox-page .outbox-msg__to {
  flex: 0 1 auto; min-width: 0; margin: 0; font-size: 14px; color: var(--of-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.outbox-msg__chev { font-size: 20px; color: var(--of-muted); transition: transform 160ms; }
.outbox-msg__fold[open] .outbox-msg__chev { transform: rotate(180deg); }
.outbox-msg__fold[open] > .outbox-msg__line { background: var(--of-head-bg); }
.outbox-msg__open { padding: 0 20px 16px; }

.outbox-pager {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 12px; margin: 0 0 16px;
}
.outbox-pager > :first-child { justify-self: start; }
.outbox-pager > :last-child { justify-self: end; }
.outbox-pager .ui-btn { min-height: 40px; height: 40px; padding-block: 0; }
.outbox-pager__where { font-size: 14px; color: var(--of-muted); white-space: nowrap; }

/* Phone: the subject, then who · when, then the pill. */
@media (max-width: 759.98px) {
  .outbox-msg__line { grid-template-columns: minmax(0, 1fr) 20px; padding: 14px 16px; }
  .outbox-msg__line > .of-pill { grid-row: 2; justify-self: start; }
  .outbox-msg__chev { grid-column: 2; grid-row: 1; }
  .outbox-msg__text { flex-direction: column; align-items: stretch; gap: 2px; }
  .outbox-page .outbox-msg__to { white-space: normal; overflow-wrap: anywhere; }
  .outbox-msg__open { padding: 0 16px 16px; }
  .outbox-bar .of-toolbar__count { margin-left: 0; }
}

/* Report 251 (the 22 Oct redesign). THE PERSON RECORD IN TABS. A tab is
   `?tab=`; the chosen panel has `.is-on`. A link to a section (`#personCe`)
   shows that section's panel instead, so older links still land. */
.pr-tab { display: flex; flex-direction: column; gap: 16px; }
.pr-tab:not(.is-on) { display: none; }
.pr-tabs { display: flex; flex-direction: column; gap: 16px; }
.pr-tabs:has(:target) .pr-tab { display: none; }
.pr-tabs:has(:target) .pr-tab:has(:target) { display: flex; }
.pr-tabs__nav { margin: 0 0 4px; }
.person-page .ui-card { position: relative; }
.person-page .ui-card > .card-title { margin-top: 0; }
/* One Edit per card: the button sits in the card's top right corner and
   the controls open under the card's content. */
.card-edit-box { margin-top: 12px; }
.card-edit-box > summary { list-style: none; position: absolute; top: 20px; right: 20px; }
.card-edit-box > summary::-webkit-details-marker { display: none; }
.card-edit-box[open] > summary { background: var(--rd-sunken); }
.person-page .of-head__actions .person-offboard { white-space: nowrap; }

/* THE PEOPLE LIST: search first, then the chips, then one line about
   property management, then the table. */
.people-views { margin: 0 0 12px; }
.people-views__view { border-style: dashed; }
.people-views__view[aria-current] { border-style: solid; }
.people-pm { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 16px; padding: 12px 16px; border-radius: var(--radius-m); background: var(--rd-info-bg); color: var(--rd-info-fg); font-size: 14px; }
.people-pm > .ms { font-size: 20px; }
.people-pm__text { flex: 1 1 300px; min-width: 0; }
.people-pm__more { color: var(--rd-info-fg); opacity: .85; }
.people-pm__go { font-weight: 600; color: var(--rd-info-fg); white-space: nowrap; }
.people-page .of-list__head .ts-link { color: var(--of-head-ink); }
.people-page .of-list__head .ts-link.is-on { color: var(--ink-1); }
@media (max-width: 1023.98px) {
  /* The record: the tabs come straight under the header; the facts follow. */
  .person-page .of-detail__aside { order: 1; }
}
@media (max-width: 759.98px) {
  .people-page .of-head__actions .ui-btn, .person-page .of-head__actions .ui-btn { flex: 1 1 auto; }
  .card-edit-box > summary { top: 12px; right: 12px; }
}