/* Care plans, drawn as the approved deck (patient-portal.html#s-care-plans): plans on the left, the
   clinical care team on the right, and a plan opening as a dialog over the list. Weights follow the
   later scale - titles at the heading weight, captions at the label weight - and small secondary
   text is muted rather than faint. */

#akashic-health-records-patient-portal-root .ak-cp {
  display: flex;
  flex-direction: column;
  padding: 4px 4px 16px;
}

@media (min-width: 900px) {
  #akashic-health-records-patient-portal-root .ak-cp {
    display: grid;
    max-width: 1180px;
    grid-template-columns: minmax(0, 1.62fr) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
  }
}

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

#akashic-health-records-patient-portal-root .ak-cp .ahr-view-title {
  margin: 0 0 10px;
}

#akashic-health-records-patient-portal-root .ak-cp__h3 {
  margin: 2px 0 6px;
  padding: 0 2px;
}

/* One plan: a square card with a hairline and the lift, and the whole of it opens the plan. */
#akashic-health-records-patient-portal-root .ak-cp__card {
  position: relative;
  display: block;
  width: 100%;
  margin: 0 0 4px;
  padding-right: 34px;
  text-align: left;
  cursor: pointer;
}

#akashic-health-records-patient-portal-root .ak-cp__card--done {
  background: var(--paper);
}

#akashic-health-records-patient-portal-root .ak-cp__go {
  position: absolute;
  top: 12px;
  right: 10px;
  width: 16px;
  height: 16px;
  color: var(--faint);
}

#akashic-health-records-patient-portal-root .ak-cp__title {
  display: block;
}

#akashic-health-records-patient-portal-root .ak-cp__card--done .ak-cp__title {
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ak-cp__ended {
  margin-left: 6px;
  vertical-align: middle;
}

/* The practice line is the shared org line; only its place under the title is here. */
#akashic-health-records-patient-portal-root .ak-cp__org {
  margin-top: 7px;
}

#akashic-health-records-patient-portal-root .ak-cp__org > span[aria-hidden="true"] {
  width: 22px;
  height: 22px;
  font-size: var(--ak-font-10);
  font-weight: var(--ak-heading-weight);
}

#akashic-health-records-patient-portal-root .ak-cp__by {
  display: block;
  margin-top: 4px;
}

#akashic-health-records-patient-portal-root .ak-cp__due {
  display: block;
  margin-top: 12px;
  font-size: var(--ak-font-13);
  font-weight: var(--ak-heading-weight);
  color: var(--warning);
}

/* The clinical care team: one card, a row per person with their initials, practice and name. */
#akashic-health-records-patient-portal-root .ak-cp__team {
  margin: 0 0 4px;
}

#akashic-health-records-patient-portal-root .ak-cp__who {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
}

#akashic-health-records-patient-portal-root .ak-cp__who:first-child {
  padding-top: 0;
  border-top: 0;
}

#akashic-health-records-patient-portal-root .ak-cp__who-name {
  min-width: 0;
  flex: 1;
  font-size: var(--ak-font-13);
  color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ak-cp__who-name .ak-cp__org {
  margin-top: 0;
}

#akashic-health-records-patient-portal-root .ak-cp__who-name b {
  display: block;
  margin-top: 5px;
  font-weight: var(--ak-heading-weight);
  color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ak-cp__who-role {
  display: block;
  margin-top: 2px;
  color: var(--ink-muted);
}

/* THE PLAN, OPENED: a dialog over the list, its body on the paper so each thing to do is a card. */
#akashic-health-records-patient-portal-root .ak-cp-dlg {
  width: calc(100% - 24px);
  max-width: 560px;
  gap: 0;
  padding: 0;
  border-radius: 0;
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__head {
  padding: 14px 44px 10px 14px;
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__meta {
  padding: 0 14px 12px;
  border-bottom: 1px solid var(--line-soft);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__meta .ak-cp__org {
  margin-top: 0;
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__period {
  display: block;
  margin-top: 6px;
  font-size: var(--ak-font-13);
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__body {
  max-height: min(60svh, 560px);
  overflow-y: auto;
  padding: 0 0 12px;
  background: var(--paper);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__gh {
  padding: 12px 14px 6px;
  margin: 0;
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__act {
  display: flex;
  width: calc(100% - 20px);
  min-height: 52px;
  align-items: flex-start;
  gap: 8px;
  margin: 0 10px 4px;
  text-align: left;
  cursor: pointer;
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__tx {
  min-width: 0;
  flex: 1;
  padding: 4px 0;
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__tx > b {
  display: block;
  font-size: var(--ak-font-13);
  font-weight: var(--ak-heading-weight);
  color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__act--done .ak-cp-dlg__tx > b {
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__ctx {
  display: block;
  margin-top: 2px;
  font-size: var(--ak-font-13);
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__due {
  display: block;
  margin-top: 6px;
  font-size: var(--ak-font-11);
  color: var(--ink);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__due b {
  font-weight: var(--ak-heading-weight);
  color: var(--warning);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__go {
  width: 16px;
  height: 16px;
  flex: none;
  align-self: center;
  color: var(--faint);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__goal {
  margin: 0 10px 4px;
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__goal-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: var(--ak-font-13);
  color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__goal-top > span:first-child {
  flex: 1;
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__goal--met .ak-cp-dlg__goal-top > span:first-child {
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__bar {
  height: 6px;
  margin: 8px 0 6px;
  border-radius: 4px;
  background: var(--sunken);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__bar [data-slot="progress-indicator"] {
  background: var(--primary);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__goal--met .ak-cp-dlg__bar [data-slot="progress-indicator"] {
  background: var(--success);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__goal-sub {
  margin: 6px 0 0;
  font-size: var(--ak-font-13);
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__goal-sub b {
  font-weight: var(--ak-heading-weight);
  color: var(--sage-deep);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__empty {
  margin: 12px 14px 0;
  font-size: var(--ak-font-13);
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__head [data-slot="dialog-title"] {
  margin: 0;
  padding: 0;
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__note {
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--surface);
  font-size: var(--ak-font-13);
  color: var(--ink-muted);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__note b {
  font-weight: var(--ak-heading-weight);
  color: var(--ink-strong);
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__spark {
  display: block;
  width: 100%;
  height: 38px;
  margin: 8px 0 2px;
}

#akashic-health-records-patient-portal-root .ak-cp-dlg__spark polyline {
  fill: none;
  stroke: var(--primary);
  stroke-width: 1.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

/* The board reserves a 17px column before each step's words (the .sp spacer). */
#akashic-health-records-patient-portal-root .ak-cp-dlg__sp {
  width: 17px;
  flex: none;
}

#akashic-health-records-patient-portal-root .ak-cp__who:last-child {
  padding-bottom: 0;
}