/* The dose log: Overview's Today card and the Doses page. */
.dose-list {
  list-style: none;
  margin: 4px -8px 0;
  padding: 0;
}
.dose-row {
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 7px 8px;
  border-radius: 10px;
}
.dose-row:hover {
  background: var(--surface-2);
}
.dose-row.is-off {
  opacity: 0.6;
}
.dose-icon {
  display: grid;
  place-items: center;
  color: var(--text-2);
}
.dose-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow-wrap: anywhere;
}
.dose-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
  gap: 4px;
}
.dose-ask .dose-actions .input {
  width: auto;
  min-width: 0;
}
/* On a phone, the buttons go under the name so it isn't squeezed. */
@media (max-width: 560px) {
  .dose-row {
    grid-template-columns: 22px minmax(0, 1fr);
    row-gap: 4px;
  }
  .dose-actions {
    grid-column: 2;
    justify-content: flex-start;
  }
  .dose-row.is-logged .dose-actions {
    grid-column: 3;
    grid-row: 1;
  }
  .dose-row.is-logged {
    grid-template-columns: 22px minmax(0, 1fr) auto;
  }
}
/* A logged dose: its status as a button that opens the details. */
.dose-status {
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
}
.badge-ok {
  background: var(--ok-soft);
  color: var(--ok);
}
.dose-row.is-missed .dose-text strong {
  color: var(--text-2);
}
.dose-next,
.dose-asneeded {
  margin-top: 8px;
}
.dose-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0;
  padding: 8px 10px;
  border-radius: var(--radius-sm);
  background: var(--info-soft);
}
.dose-note p {
  margin: 0;
}
/* Picking a site: one button a site, the suggested one first. */
.site-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.site-rows {
  display: grid;
  gap: 6px;
  margin: 6px 0;
}
.site-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.stack-tight > * + * {
  margin-top: 6px;
}

/* The last six months: the Bleeding log's strip of small squares (calendar.css), each a
   button colored by how the day went. */
.dose-strip .dose-cell {
  padding: 0;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
}
.dose-strip .dose-cell.is-future {
  background: none;
  cursor: default;
}
.dose-cell.is-done,
.dose-key.is-done {
  background: var(--ok);
}
.dose-cell.is-missed,
.dose-key.is-missed {
  background: var(--warn);
}
.dose-cell.is-open,
.dose-key.is-open {
  background: var(--surface);
  box-shadow: inset 0 0 0 1.5px var(--border-strong);
}
.dose-cell.is-picked {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.dose-key {
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 1.5px solid transparent;
  border-radius: 3px;
}
.dose-pickbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 10px;
}

/* Day by day: one line a day that opens into its doses. */
.dose-days {
  margin: 4px -8px 0;
}
.dose-day-row + .dose-day-row {
  border-top: 1px solid var(--border);
}
.dose-day-row > summary {
  display: grid;
  grid-template-columns: minmax(6.5em, auto) 1fr auto 16px;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-radius: 10px;
  list-style: none;
  cursor: pointer;
}
.dose-day-row > summary::-webkit-details-marker {
  display: none;
}
.dose-day-row > summary:hover {
  background: var(--surface-2);
}
.dose-day-label {
  font-weight: 600;
}
.dose-dots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}
.dose-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid transparent;
}
.dose-dot.is-taken {
  background: var(--ok);
}
.dose-dot.is-missed {
  background: var(--warn);
}
.dose-dot.is-open {
  border-color: var(--border-strong);
}
.dose-day-status {
  font-size: 0.85rem;
  text-align: right;
}
.dose-day-chev {
  color: var(--muted);
  transition: transform 0.15s;
}
.dose-day-row[open] .dose-day-chev {
  transform: rotate(90deg);
}
.dose-day-row > .dose-list,
.dose-day-row > p {
  margin: 0 8px 10px;
}
.dose-day-row > p {
  padding-left: 0;
}
.page.doses > .tiles {
  margin-top: 16px;
}

/* Other medications, each with its history. */
.other-meds {
  display: grid;
  gap: 12px;
  margin-top: 8px;
}
.other-med {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.other-med .card-row p {
  margin: 0;
}
.other-changes {
  margin: 6px 0;
  padding-left: 18px;
}
.page.doses > .card + .card {
  margin-top: 16px;
}

/* A medication's card on the Doses page, after Supply's. */
/* Side by side as space allows, as Supply's cards are. */
.dose-meds .tile-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(340px, 100%), 1fr));
  gap: 12px;
  align-items: start;
  margin-top: 0;
}
.dose-med.is-off {
  opacity: 0.75;
}
.dose-med-head {
  min-width: 0;
}
.dose-med-head .card-title {
  margin: 0;
}
.dose-med-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0;
  color: var(--text-2);
}
.dose-med .supply-stats {
  margin: 12px 0;
}
.dose-med .other-changes {
  margin: 2px 0 6px;
  padding: 0;
  list-style: none;
}
.dose-meds > .q-new-btn {
  margin-top: 12px;
}
.dose-day-extra:empty {
  display: none;
}
.dose-day-extra {
  margin: 0 8px 10px;
}
.doses-today > .dose-list:first-child {
  margin-top: 0;
}

/* Doses taken together: the group's name and one button, its doses under it. */
.dose-group {
  margin: 2px 0;
  border: 1px solid var(--border);
  border-radius: 12px;
}
.dose-group-head,
.dose-row.dose-group-row {
  display: grid;
  grid-template-columns: minmax(22px, auto) minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
  padding: 7px 8px;
}
.dose-group-list {
  margin: 0 0 4px;
  padding-left: 20px;
}
.group-picks {
  display: grid;
  gap: 8px;
}
.group-picks .check {
  align-items: center;
  gap: 8px;
}
/* One icon for each kind of dose in a group: its pills, then a shot, a patch. */
.dose-group-icons {
  display: flex;
  gap: 3px;
}