/* My practices, drawn from the approved patient-portal deck (#s-my-providers): each practice is the
   shared list card (.ahr-list-card, the card rule's alias) holding its row and, when opened, its
   detail; titles, captions, pills and notices are the shared hooks, and this file keeps layout. */

#akashic-health-records-patient-portal-root .ahr-practices-head {
  display: grid;
}

#akashic-health-records-patient-portal-root .ahr-practice-row {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
}
#akashic-health-records-patient-portal-root button.ahr-practice-row {
  cursor: pointer;
}
#akashic-health-records-patient-portal-root button.ahr-practice-row:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: -2px;
}

#akashic-health-records-patient-portal-root .ahr-practice-id {
  flex: 1;
  min-width: 0;
}
#akashic-health-records-patient-portal-root .ahr-practice-name {
  overflow-wrap: anywhere;
}
#akashic-health-records-patient-portal-root .ahr-practice-more {
  margin-top: 1px;
}
#akashic-health-records-patient-portal-root .ahr-practice-phone {
  font-weight: var(--ak-heading-weight);
  color: var(--primary);
  white-space: nowrap;
}

/* The opened practice: no rule under the row, the detail inset to the row's text edge. */
#akashic-health-records-patient-portal-root .ahr-practice-detail {
  padding-top: 8px;
}
#akashic-health-records-patient-portal-root .ahr-practice-addr {
  margin: 0 0 4px;
}
/* Where they are and the two ways to reach them, then each section under a soft rule. */
#akashic-health-records-patient-portal-root .ahr-practice-reach {
  display: grid;
  gap: 8px;
}
#akashic-health-records-patient-portal-root .ahr-practice-reach .ahr-practice-addr {
  margin: 0;
}
#akashic-health-records-patient-portal-root .ahr-practice-acts {
  margin-top: 4px;
}
#akashic-health-records-patient-portal-root .ahr-practice-secs {
  display: contents;
}
#akashic-health-records-patient-portal-root .ahr-practice-sec {
  min-width: 0;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
#akashic-health-records-patient-portal-root .ahr-practice-sec:empty {
  display: none;
}
/* The deck's section label (.pd-h): 11px capitals, tracked; --ink-muted rather than the deck's --faint,
   which is under the AA floor at 11px. The count ahead of it is amber and not tracked. */
#akashic-health-records-patient-portal-root .ahr-practice-sec-h {
  margin: 0 0 8px;
}
#akashic-health-records-patient-portal-root .ahr-practice-sec-n {
  font-size: 12px;
  font-weight: var(--ak-heading-weight);
  letter-spacing: 0;
  color: var(--warning);
}

/* On a laptop the opened practice is two columns, as the deck's 1366 frame draws it: reach across the
   top, locations on the left, visits and the care team on the right, teams and access across. */
@media (min-width: 1024px) {
  #akashic-health-records-patient-portal-root .ahr-practice-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 24px;
    align-items: start;
  }
  #akashic-health-records-patient-portal-root .ahr-practice-reach {
    grid-column: 1 / -1;
  }
  #akashic-health-records-patient-portal-root .ahr-practice-acts {
    max-width: 420px;
  }
  #akashic-health-records-patient-portal-root .ahr-practice-sec[data-sec="locations"] {
    grid-column: 1;
    grid-row: 2 / span 2;
  }
  #akashic-health-records-patient-portal-root .ahr-practice-sec[data-sec="visits"] {
    grid-column: 2;
    grid-row: 2;
    padding-top: 0;
    border-top: 0;
  }
  #akashic-health-records-patient-portal-root .ahr-practice-sec[data-sec="team"] {
    grid-column: 2;
    grid-row: 3;
  }
  #akashic-health-records-patient-portal-root .ahr-practice-sec[data-sec="teams"],
  #akashic-health-records-patient-portal-root .ahr-practice-sec[data-sec="access"] {
    grid-column: 1 / -1;
  }
  /* A practice with no locations gives the right column's sections the whole width. */
  #akashic-health-records-patient-portal-root .ahr-practice-detail:has(.ahr-practice-sec[data-sec="locations"]:empty) .ahr-practice-sec[data-sec="visits"],
  #akashic-health-records-patient-portal-root .ahr-practice-detail:has(.ahr-practice-sec[data-sec="locations"]:empty) .ahr-practice-sec[data-sec="team"] {
    grid-column: 1 / -1;
  }
}

/* A row inside a section (deck .pd-row): a visit, or a person with their 26px mark. */
#akashic-health-records-patient-portal-root .ahr-practice-item {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 7px 0;
  font-size: 13px;
}
#akashic-health-records-patient-portal-root .ahr-practice-item + .ahr-practice-item {
  border-top: 1px solid var(--line-soft);
}
#akashic-health-records-patient-portal-root .ahr-practice-item-av {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  object-fit: cover;
}
#akashic-health-records-patient-portal-root .ahr-practice-item-tx {
  flex: 1;
  min-width: 0;
}
#akashic-health-records-patient-portal-root .ahr-practice-item-tx > b {
  display: block;
  font-weight: var(--ak-heading-weight);
  color: var(--ink-strong);
}
#akashic-health-records-patient-portal-root .ahr-practice-item-tx > span {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--ink-muted);
}
#akashic-health-records-patient-portal-root .ahr-practice-item-tx > .ahr-practice-item-flag {
  margin-top: 4px;
  font-size: 12px;
  color: var(--warning);
}
#akashic-health-records-patient-portal-root .ahr-practice-item-when {
  flex: none;
  margin: 0;
  font-size: 11.5px;
  color: var(--ink-muted);
  text-align: right;
}

/* An opened practice stays on the white surface, as the deck draws it; only its row takes the hover tint. */
#akashic-health-records-patient-portal-root .ahr-list-card.ahr-practice-card:has(> .ahr-practice-row[aria-expanded="true"]):hover {
  background: var(--surface);
}

#akashic-health-records-patient-portal-root .ahr-practice-card > .ahr-practice-row[aria-expanded="true"]:hover {
  background: var(--line-soft);
}