/* The patient's goals, drawn as the approved deck (patient-portal.html#s-goals). Scoped to the
   patient's own page: the staff chart mounts the same component and keeps its own look. Weights follow
   the later scale and small secondary text is muted rather than faint. */

#akashic-health-records-patient-portal-root .ak-gl--patient {
  padding: 4px 10px 16px;
}

#akashic-health-records-patient-portal-root .ak-gl__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

#akashic-health-records-patient-portal-root .ak-gl__back {
  min-height: 44px;
}

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

#akashic-health-records-patient-portal-root .ak-gl--patient .mt-3.space-y-5 > * + * {
  margin-top: 0;
}

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

#akashic-health-records-patient-portal-root .ak-gl__item {
  position: relative;
  display: flex;
}

/* Edit sits in the card's corner as a quiet control of its own - beside the card it made the patient's
   own goals narrower than the rest of the list. */
#akashic-health-records-patient-portal-root .ak-gl__item .ak-gl__edit {
  position: absolute;
  right: 6px;
  bottom: 4px;
}

/* One goal: a lifted card; the one open beside the list carries a primary ring inside it. */
#akashic-health-records-patient-portal-root .ak-gl__row {
  min-width: 0;
  flex: 1;
  cursor: pointer;
}

#akashic-health-records-patient-portal-root .ak-gl__row--open {
  box-shadow: inset 0 0 0 1px var(--primary), var(--ak-card-lift);
  outline: 1px solid var(--primary);
}

#akashic-health-records-patient-portal-root .ak-gl--patient .ak-gl-row > * + * {
  margin-top: 0;
}

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

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

#akashic-health-records-patient-portal-root .ak-gl--patient .ak-gl-row__bar--done [data-slot="progress-indicator"] {
  background: var(--success);
}

#akashic-health-records-patient-portal-root .ak-gl--patient .ak-gl-row__src {
  margin-top: 7px;
}

/* The deck names where a goal came from in words alone. */
#akashic-health-records-patient-portal-root .ak-gl--patient .ak-gl-row__src svg {
  display: none;
}

/* LAPTOP AND TABLET: the pills, and the open goal beside the list (under it below 1024px). */
#akashic-health-records-patient-portal-root .ak-gl__wide {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
}

@media (min-width: 1024px) {
  #akashic-health-records-patient-portal-root .ak-gl__wide {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
    gap: 18px;
    align-items: start;
  }
}

#akashic-health-records-patient-portal-root .ak-gl__col {
  min-width: 0;
}

#akashic-health-records-patient-portal-root .ak-gl__pills {
  display: flex;
  gap: 8px;
  margin-bottom: 11px;
}

#akashic-health-records-patient-portal-root .ak-gl__none {
  font-size: var(--ak-font-13);
  color: var(--ink-muted);
}

/* THE OPEN GOAL: its name as a label, a card with the line over time, and what moves it. */
#akashic-health-records-patient-portal-root .ak-gl-pane .ak-gl-pane__label {
  margin-top: 0;
}

#akashic-health-records-patient-portal-root .ak-gl-pane__card > * + * {
  margin-top: 8px;
}

#akashic-health-records-patient-portal-root .ak-gl-pane__readings ul {
  margin: 0;
}

#akashic-health-records-patient-portal-root .ak-gl-pane__readings li {
  padding: 7px 0;
  border-top: 1px solid var(--line-soft);
  font-size: var(--ak-font-13);
}

#akashic-health-records-patient-portal-root .ak-gl-pane__readings li:first-child {
  border-top: 0;
}

#akashic-health-records-patient-portal-root .ak-gl-pane__readings li > span:first-child {
  width: 86px;
}

/* On a phone the goal is the page and its card carries its own title, so the label steps aside;
   beside the list the label names it and the card is the chart alone. */
@media (max-width: 639.98px) {
  #akashic-health-records-patient-portal-root .ak-gl-pane .ak-gl-pane__label {
    display: none;
  }
}

@media (min-width: 640px) {
  #akashic-health-records-patient-portal-root .ak-gl-pane__card .ak-gl-row__top {
    display: none;
  }
}

#akashic-health-records-patient-portal-root .ak-gl--patient .ak-gl-row__top + .ak-gl-row__sub {
  margin-top: 4px;
}

/* The staff chart's goals (practitioner.html#s-goals): one card per list, a row per goal, Edit beside it. */
#akashic-health-records-patient-portal-root .ak-gl-staff__head {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin: 0 0 14px;
}

/* The card, heading, rows, type, bar and provenance pill are the shared hooks (ak-card--panel,
   ak-section-title, ak-row, ak-card__title/__meta, ak-progress, ak-pill); only the layout stays here. */
#akashic-health-records-patient-portal-root .ak-gl-staff__h3 { margin: 0 0 4px; }

#akashic-health-records-patient-portal-root .ak-gl-staff__item { align-items: flex-start; }

#akashic-health-records-patient-portal-root .ak-gl-staff__row {
  flex: 1;
  min-width: 0;
  cursor: pointer;
}

#akashic-health-records-patient-portal-root .ak-gl-staff__row:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
#akashic-health-records-patient-portal-root .ak-gl-staff__edit { flex: none; }

#akashic-health-records-patient-portal-root .ak-gl-row--staff .ak-gl-row__title { display: block; }

#akashic-health-records-patient-portal-root .ak-gl-row--staff .ak-gl-row__bar {
  width: 230px;
  max-width: 100%;
  margin-top: 7px;
  border-radius: 99px;
}

/* A goal's progress is drawn in the goals green, not the action blue. */
#akashic-health-records-patient-portal-root .ak-gl-row--staff .ak-gl-row__bar .ak-progress__fill { background: var(--success); }

#akashic-health-records-patient-portal-root .ak-gl-row--staff .ak-gl-row__who { margin-top: 5px; }

/* A phone keeps the reading and moves the one thing pressed below it. */
@media (max-width: 639px) {
  #akashic-health-records-patient-portal-root .ak-gl-staff__item { flex-direction: column; gap: 10px; }
  #akashic-health-records-patient-portal-root .ak-gl-staff__row { align-self: stretch; }
  #akashic-health-records-patient-portal-root .ak-gl-row--staff .ak-gl-row__bar { width: 100%; }
  #akashic-health-records-patient-portal-root .ak-gl-staff__edit { min-height: 44px; min-width: 44px; }
}