/* The deck's appointments (#s-appointments). Deck 500/600 map to 400, 400 to 300; small sage text
   takes --success-active for contrast. */

#akashic-health-records-patient-portal-root .ahr-appts {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#akashic-health-records-patient-portal-root .ahr-appts-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px 16px;
}

#akashic-health-records-patient-portal-root .ahr-appts-head .ahr-view-title {
  margin: 0;
}

/* The subtitle's own 14px is the gap to the first section, as on every other page; the head's margin
   and the label's 12px stacked on it made 36px. */
#akashic-health-records-patient-portal-root .ahr-appts-head + .ahr-appts-sec {
  margin-top: 0;
}

#akashic-health-records-patient-portal-root .ahr-appts-sec {
  margin: 12px 0 2px;
  font-size: 13px;
  font-weight: var(--ak-label-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appts-list {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* A declined request's list sits straight above the upcoming list; without the list gap between them
   the two cards read as one that both "could not confirm" and is "waiting to confirm". */
#akashic-health-records-patient-portal-root .ahr-appts-list + .ahr-appts-list {
  margin-top: var(--ak-list-gap);
}

/* A ROW: when, then who and where, then what is owed; the distance sits at the top right. An upcoming
   row is the shared edge card (.ak-card--edge, --done agreed / --open held or refused). */
#akashic-health-records-patient-portal-root .ahr-appt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
  text-align: left;
  cursor: pointer;
}

/* Past rows stay plain rows under one hairline, in the non-card style, as the board's past list draws
   them. The clear edge keeps their text in line with the edged upcoming cards above, as the board's
   transparent edge does. */
#akashic-health-records-patient-portal-root .ahr-appts-list--past .ahr-appt {
  padding: 8px 12px;
  border-left: 3px solid transparent;
  background: var(--surface);
}

#akashic-health-records-patient-portal-root .ahr-appts-list--past .ahr-appt + .ahr-appt {
  border-top: 1px solid var(--line);
}

#akashic-health-records-patient-portal-root .ahr-appts-list--past .ahr-appt:hover {
  background: var(--line-soft);
}

#akashic-health-records-patient-portal-root .ahr-appt-who {
  display: block;
  flex: 1;
  min-width: 0;
}

#akashic-health-records-patient-portal-root .ahr-appt-when {
  display: block;
  font-size: 15px;
  font-weight: var(--ak-heading-weight);
  line-height: 1.3;
  color: var(--ink-strong);
  font-variant-numeric: tabular-nums;
}

#akashic-health-records-patient-portal-root .ahr-appt-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 8px;
  min-width: 0;
  margin-top: 4px;
}

#akashic-health-records-patient-portal-root .ahr-appt-facts > span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  font-size: 13px;
  white-space: nowrap;
}

#akashic-health-records-patient-portal-root .ahr-appt-org {
  color: var(--ink);
}

#akashic-health-records-patient-portal-root .ahr-appt-prac,
#akashic-health-records-patient-portal-root .ahr-appt-prac-plain {
  color: var(--ink-muted);
}

/* The separator ends the practice rather than starting the clinician, so a wrapped line never opens on it. */
#akashic-health-records-patient-portal-root .ahr-appt-org::after {
  content: "\00B7";
  margin-left: 4px;
  color: var(--faint);
}

#akashic-health-records-patient-portal-root .ahr-appt-prac--unres {
  font-style: italic;
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appt-where {
  max-width: 100%;
  overflow: hidden;
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appt-where-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#akashic-health-records-patient-portal-root .ahr-appt-glyph {
  width: 14px;
  height: 14px;
  flex: none;
}

#akashic-health-records-patient-portal-root .ahr-appt-note {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appt-note--open {
  color: var(--warning);
}

#akashic-health-records-patient-portal-root .ahr-appt-rel {
  flex: none;
  padding-top: 3px;
  font-size: 11px;
  font-style: italic;
  font-weight: var(--ak-heading-weight);
  white-space: nowrap;
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appt--up .ahr-appt-rel,
#akashic-health-records-patient-portal-root .ahr-appt-head .ahr-appt-rel {
  color: var(--success-active);
}

#akashic-health-records-patient-portal-root .ahr-appt .ahr-appt-rel--now,
#akashic-health-records-patient-portal-root .ahr-appt-head .ahr-appt-rel--now {
  color: var(--warning);
}

/* THE DETAIL: a 448px panel over the list, as the laptop frame draws it, and the same panel on a phone. */
#akashic-health-records-patient-portal-root .ahr-appt-dialog {
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  padding: 16px;
  gap: 0;
  border: 0;
  border-radius: 8px;
}

#akashic-health-records-patient-portal-root .ahr-appt-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: var(--ak-heading-weight);
  background: var(--green-soft);
  color: var(--sage-ink);
}

#akashic-health-records-patient-portal-root .ahr-appt-close {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  cursor: pointer;
}

#akashic-health-records-patient-portal-root .ahr-appt-close svg {
  width: 16px;
  height: 16px;
}

#akashic-health-records-patient-portal-root .ahr-appt-status--held {
  background: var(--amber-soft);
  color: var(--warning);
}

#akashic-health-records-patient-portal-root .ahr-appt-status--past {
  background: var(--sunken);
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appt-head {
  padding: 12px;
  border-bottom: 1px solid var(--line);
}

#akashic-health-records-patient-portal-root .ahr-appt-head-d {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

#akashic-health-records-patient-portal-root .ahr-appt-head-d b {
  font-size: 18px;
  font-weight: var(--ak-heading-weight);
  color: var(--sage);
}

#akashic-health-records-patient-portal-root .ahr-appt-head-d b.ahr-appt-head-past {
  color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appt-head-t {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 13px;
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appt-body {
  display: grid;
  gap: 12px;
  padding: 12px;
  text-align: left;
}

#akashic-health-records-patient-portal-root .ahr-appt-party-list {
  display: grid;
  gap: 4px;
}

#akashic-health-records-patient-portal-root .ahr-appt-party {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

#akashic-health-records-patient-portal-root .ahr-appt-party b {
  min-width: 0;
  overflow: hidden;
  font-size: 13px;
  font-weight: var(--ak-heading-weight);
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appt-party b.ahr-appt-prac--unres {
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appt-docpic .ahr-inbox-avatar {
  width: 30px;
  height: 30px;
  font-size: 11px;
  background: var(--blue-soft);
  color: var(--ink);
}

#akashic-health-records-patient-portal-root .ahr-appt-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 12px;
}

#akashic-health-records-patient-portal-root .ahr-appt-fld {
  display: grid;
  align-content: start;
  min-width: 0;
}

#akashic-health-records-patient-portal-root .ahr-appt-flab {
  margin-bottom: 2px;
  font-size: 11.5px;
  font-weight: var(--ak-label-weight);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink);
}

#akashic-health-records-patient-portal-root .ahr-appt-val {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 15px;
  color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ahr-appt-val .ahr-appt-glyph {
  margin-top: 4px;
}

#akashic-health-records-patient-portal-root .ahr-appt-val > span,
#akashic-health-records-patient-portal-root .ahr-appt-addr {
  min-width: 0;
  overflow-wrap: anywhere;
}

#akashic-health-records-patient-portal-root .ahr-appt-addr {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ahr-appt-instr {
  display: grid;
  gap: 2px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--amber-soft);
}

#akashic-health-records-patient-portal-root .ahr-appt-icap {
  font-size: 13px;
  color: var(--warning);
}

#akashic-health-records-patient-portal-root .ahr-appt-ival {
  font-size: 13px;
  color: var(--ink-strong);
}

/* The task list stands clear of the reason above it, as the board spaces its task heading. */
#akashic-health-records-patient-portal-root .ahr-appt-tasks {
  margin-top: 13px;
}

#akashic-health-records-patient-portal-root .ahr-appt-acts {
  display: grid;
  gap: 8px;
}

#akashic-health-records-patient-portal-root .ahr-appt-extra {
  margin: 4px 12px 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

#akashic-health-records-patient-portal-root .ahr-appt-extra-title {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: var(--ak-heading-weight);
  color: var(--ink-strong);
}