/* Collaboration teams, drawn from the approved patient-portal deck (#s-collaboration-teams): the
   list in a centred column, and a team opened over it. Deck weights read through the 2026-09-09
   scale (its 500 is bold 400); tabs keep 500 by the 2026-09-10 ruling. Labels the deck paints in
   --faint take --ink-muted, which the token file keeps for small text. */

/* Outranks the shell's content cap, which would otherwise take this page to full width. */
#akashic-health-records-patient-portal-root[data-akashic-mount] .ak-shell > .collab-page:not(.ak-home),
#akashic-health-records-patient-portal-root .collab-page {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 532px;
  margin: 0 auto;
}

#akashic-health-records-patient-portal-root .collab-head {
  margin-bottom: 12px;
}
#akashic-health-records-patient-portal-root .collab-title {
  margin: 0 0 10px;
}

#akashic-health-records-patient-portal-root .collab-create {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

/* The two sides, right-aligned under the button; on a phone the deck lifts them above the title.
   The page body is a grid, so the inline axis is justify-self; align-self alone left them on the left. */
#akashic-health-records-patient-portal-root .collab-tabs-wrap {
  align-self: flex-end;
  justify-self: end;
  margin-top: 4px;
}
@media (max-width: 767px) {
  #akashic-health-records-patient-portal-root .collab-tabs-wrap {
    order: -1;
    margin: 0 0 8px;
  }
}

/* Active, Dormant, Closed: the shared caption over lifted cards. */
#akashic-health-records-patient-portal-root .collab-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
#akashic-health-records-patient-portal-root .collab-group-label {
  margin: 16px 0 3px;
  gap: 5px;
}
#akashic-health-records-patient-portal-root .collab-group:first-child .collab-group-label {
  margin-top: 4px;
}
#akashic-health-records-patient-portal-root .collab-group-note {
  letter-spacing: 0;
  text-transform: none;
}

#akashic-health-records-patient-portal-root .ahr-list-card.collab-team-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
#akashic-health-records-patient-portal-root .collab-team-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}
#akashic-health-records-patient-portal-root .collab-team-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}
#akashic-health-records-patient-portal-root .collab-row-owner {
  margin-bottom: 2px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
/* The name gives way to an ellipsis so its member count stays beside it; the separator never starts a line. */
#akashic-health-records-patient-portal-root .collab-team-head {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
#akashic-health-records-patient-portal-root .collab-team-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: var(--ak-heading-weight);
  color: var(--ink-strong);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#akashic-health-records-patient-portal-root .collab-team-head > :not(.collab-team-name) {
  flex: none;
}
#akashic-health-records-patient-portal-root .collab-team-count {
  font-size: 13px;
  color: var(--ink-muted);
  white-space: nowrap;
}
#akashic-health-records-patient-portal-root .collab-team-pending {
  font-size: 12px;
  font-style: italic;
  color: var(--warning);
  white-space: nowrap;
}
#akashic-health-records-patient-portal-root .collab-team-line {
  display: block;
  margin-top: 4px;
  overflow: hidden;
  font-size: 13px;
  color: var(--ink-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}
#akashic-health-records-patient-portal-root .collab-team-go {
  flex: none;
  width: 14px;
  height: 14px;
  color: var(--faint);
}

/* ── A team, opened over the list from a tablet up: a centred panel that scrolls inside itself.
   `.team-view` below styles its content, and the same content on a phone, where the team is its own page. ── */
#akashic-health-records-patient-portal-root [data-slot="dialog-content"].team-overlay {
  gap: 0;
  width: min(520px, calc(100vw - 2rem));
  max-width: 520px;
  max-height: 88vh;
  padding: 10px 14px 16px;
  overflow-y: auto;
  border: 0;
  border-radius: 12px;
  background: var(--surface);
  box-shadow: 0 16px 44px rgba(31, 26, 20, 0.32);
}
#akashic-health-records-patient-portal-root .team-overlay-title {
  padding-right: 28px;
}
#akashic-health-records-patient-portal-root .team-view .team-overlay-sub {
  margin: 12px 0 0;
  font-size: 12px;
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .team-detail {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding-top: 12px;
}

/* The one destination in a panel whose other controls end something, so it reads as pressable. */
#akashic-health-records-patient-portal-root .team-conversation-link {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 10px;
  padding: 11px 12px;
  border: 1px solid var(--blue-line);
  border-radius: 6px;
  background: var(--blue-soft);
  color: var(--primary);
  font-size: 13.5px;
  font-weight: var(--ak-heading-weight);
  text-decoration: none;
}
#akashic-health-records-patient-portal-root .team-conversation-count {
  margin-left: auto;
}

/* Each section: a hairline above, a small label, then its rows. No boxes inside the panel. */
#akashic-health-records-patient-portal-root .team-view .team-section-card,
#akashic-health-records-patient-portal-root .team-view .team-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 15px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line-soft);
  background: transparent;
}
/* On a phone the team is its own page: the title block above already spaces it, as the 390 board does. */
#akashic-health-records-patient-portal-root .collab-team-page .team-detail {
  padding-top: 0;
}
#akashic-health-records-patient-portal-root .team-view .team-section-card > *,
#akashic-health-records-patient-portal-root .team-view .team-section > * {
  margin-block: 0;
}
#akashic-health-records-patient-portal-root .team-view .team-section-label {
  margin: 0 0 8px;
}
#akashic-health-records-patient-portal-root .team-view .team-section-text {
  margin: 0;
  font-size: 13px;
  color: var(--ink);
}
#akashic-health-records-patient-portal-root .team-section-error {
  margin: 0;
  font-size: 13px;
  color: var(--destructive);
}
#akashic-health-records-patient-portal-root .team-view .team-section-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
#akashic-health-records-patient-portal-root .team-view .team-section-card > .flex.justify-end {
  margin-top: 8px;
}

/* A member: their initials, who they are and where from, then what is true of them. */
#akashic-health-records-patient-portal-root .team-view .team-member-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 9px;
  padding: 8px 0;
  border-radius: 0;
  background: transparent;
}
#akashic-health-records-patient-portal-root .team-view .team-member-row + .team-member-row {
  border-top: 1px solid var(--line-soft);
}
#akashic-health-records-patient-portal-root .team-view .team-member-who {
  display: grid;
  flex: 1;
  grid-template-columns: 28px minmax(0, 1fr);
  column-gap: 9px;
  min-width: 0;
}
#akashic-health-records-patient-portal-root .team-view .team-member-who > * {
  grid-column: 2;
  margin: 0;
}
/* An invitee may be only an email address, and one long enough to push Deny off a phone. */
#akashic-health-records-patient-portal-root .team-view .team-member-who > *,
#akashic-health-records-patient-portal-root .team-view .team-member-identity > * {
  overflow-wrap: anywhere;
}
#akashic-health-records-patient-portal-root .team-view .team-member-identity {
  display: contents;
  font-size: 13px;
  font-weight: var(--ak-heading-weight);
  color: var(--ink-strong);
}
#akashic-health-records-patient-portal-root .team-view .team-member-identity > :first-child {
  grid-column: 1;
  grid-row: 1 / span 2;
  justify-self: center;
}
#akashic-health-records-patient-portal-root .team-view .team-member-badge {
  width: 28px;
  height: 28px;
  font-size: 10.5px;
  font-weight: var(--ak-heading-weight);
}
#akashic-health-records-patient-portal-root .team-view .team-member-who p,
#akashic-health-records-patient-portal-root .team-view .team-member-sub {
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
#akashic-health-records-patient-portal-root .team-view .team-member-end {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
}
#akashic-health-records-patient-portal-root .team-view .team-member-end--decide {
  flex-direction: row;
  align-items: center;
  gap: 6px;
}
/* A row being decided carries two identities; on a phone its buttons take their own line under them. */
@media (max-width: 767px) {
  #akashic-health-records-patient-portal-root .team-view .team-member-row:has(> .team-member-end--decide) {
    flex-wrap: wrap;
  }
  #akashic-health-records-patient-portal-root .team-view .team-member-row:has(> .team-member-end--decide) > .team-member-who {
    flex-basis: 100%;
  }
  #akashic-health-records-patient-portal-root .team-view .team-member-end--decide {
    margin-left: 37px;
  }
}
#akashic-health-records-patient-portal-root .team-view .team-member-state {
  font-size: 11px;
  color: var(--ink-muted);
  white-space: nowrap;
}
#akashic-health-records-patient-portal-root .team-view .team-member-remove {
  padding: 0 4px;
  font-size: 12px;
  color: var(--ink-muted);
}