/* Daily schedule: water reminders, wind-down reminders, and their lines on
 * Today.
 *
 * Everything here is prefixed `ds-` so it can never collide with a class in
 * another stylesheet. Only the design tokens from styles.css are used, so
 * dark mode and the accent follow automatically; every offset is logical,
 * so Persian mirrors the layout without a direction-specific rule.
 */

.ds-intro { margin: -8px 0 14px; line-height: 1.6; }

.ds-card > h2 { margin-block-end: 12px; }
.ds-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-block-end: 6px; }
.ds-head h2 { margin: 0; }
.ds-count { white-space: nowrap; }
.ds-status:empty { display: none; }
.ds-status .banner { margin-block: 8px; }
.ds-form .field-pair { margin-block-end: 0; }
.ds-form .ds-row { min-height: 52px; padding-block: 4px; margin-block: -6px 8px; border-block-end: 0; }
.ds-form input:disabled { opacity: 0.5; }

/* Today's figure and what comes next, above the list. */
.ds-today {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 12px;
  margin-block: 8px 12px;
  border-radius: var(--radius-s);
  background: var(--surface-2);
}
.ds-today-figure { font-weight: 700; }
.ds-today-next { font-size: 0.9rem; color: var(--text-dim); }
.ds-today-next.ds-ok { color: var(--ok); }

/* The reminders. ------------------------------------------------------------ */

.ds-slots { list-style: none; margin: 0; padding: 0; }
.ds-slot {
  display: flex;
  align-items: center;
  gap: 8px;
  border-block-end: 1px solid var(--border);
  transition: opacity 0.2s var(--ease);
}
.ds-slot:last-child { border-block-end: 0; }

/* The row itself is the edit button: one large target, not a pencil icon. */
button.ds-slot-main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 60px;
  padding: 8px 2px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  box-shadow: none;
  color: var(--text);
  font-weight: 500;
  text-align: start;
}
@media (hover: hover) {
  button.ds-slot-main:hover { background: var(--surface-2); border-color: transparent; }
}
.ds-time {
  flex: none;
  min-width: 4.4rem;
  padding: 5px 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: center;
  direction: ltr;
}
.ds-slot-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ds-amount { font-weight: 600; }
.ds-badges { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ds-slot.is-off .ds-time { background: var(--surface-2); color: var(--text-faint); }
.ds-slot.is-off .ds-amount { color: var(--text-dim); }

/* A real checkbox, drawn as a switch: keyboard, screen readers and forms all
 * keep working. The thumb moves along the inline axis, so it slides the
 * right way in both directions. */
input.ds-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex: none;
  width: 52px;
  height: 32px;
  min-height: 32px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-3);
  cursor: pointer;
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}
input.ds-switch::before {
  content: '';
  position: absolute;
  inset-block-start: 3px;
  inset-inline-start: 3px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgb(16 24 40 / 0.25);
  transition: inset-inline-start 0.2s var(--ease);
}
input.ds-switch:checked { background: var(--accent); border-color: transparent; }
input.ds-switch:checked::before { inset-inline-start: 23px; }
input.ds-switch:focus { box-shadow: none; }
input.ds-switch:focus-visible { outline: 3px solid color-mix(in srgb, var(--accent) 40%, transparent); outline-offset: 2px; }
input.ds-switch:disabled { opacity: 0.55; cursor: progress; }

.ds-switch-cell { display: flex; align-items: center; justify-content: center; min-width: 56px; min-height: 56px; }

/* A setting with a switch: the words take the line, the switch the end. */
.ds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  min-height: 60px;
  margin: 0;
  padding-block: 10px;
  border-block-end: 1px solid var(--border);
  color: var(--text);
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
}
.ds-row:last-child { border-block-end: 0; }
.ds-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ds-rows { margin-block-end: 8px; }

.ds-total { margin-block: 10px 2px; font-weight: 600; }
.ds-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 12px; }
.ds-actions > button { flex: 1 1 auto; min-height: 44px; }
.ds-add { margin-block-end: 14px; border-style: dashed; }

/* Minus, the value, plus: thumb-sized on both sides. */
.ds-stepper {
  display: grid;
  grid-template-columns: 50px minmax(0, 1fr) 50px;
  align-items: center;
  gap: 8px;
}
button.ds-step { width: 50px; min-height: 50px; padding: 0; font-size: 1.45rem; line-height: 1; border-radius: 14px; }
.ds-litres { display: flex; align-items: center; gap: 6px; }
input.ds-litres-input { text-align: center; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-unit { color: var(--text-dim); font-size: 0.9rem; flex: none; }
.ds-stepper-value { display: block; text-align: center; font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ds-target-field .ds-stepper { margin-block-end: 6px; }
.ds-delete { align-self: flex-start; }
.ds-edit .field { margin-block-end: 0; }

.ds-bedtime { font-weight: 700; margin-block: 0 4px; }
.ds-off { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin-block: 8px; }

/* The day at a glance: a thin line with a dot per moment. */
.ds-glance { position: relative; list-style: none; margin: 0 0 8px; padding: 0; }
.ds-glance::before {
  content: '';
  position: absolute;
  inset-block: 14px;
  inset-inline-start: calc(4.2rem + 15px);
  width: 2px;
  border-radius: 2px;
  background: var(--border);
}
.ds-glance-item {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem 12px minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  min-height: 36px;
  padding-block: 3px;
}
.ds-glance-time { color: var(--text-dim); font-size: 0.88rem; font-weight: 600; font-variant-numeric: tabular-nums; text-align: end; direction: ltr; }
.ds-glance-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--text-faint); box-shadow: 0 0 0 3px var(--surface); }
.ds-glance-label { font-size: 0.92rem; }
.ds-k-water .ds-glance-dot { background: var(--accent); }
.ds-k-meal .ds-glance-dot { background: var(--ok); }
.ds-k-workout .ds-glance-dot { background: var(--warn); }
.ds-k-sleep .ds-glance-dot { background: color-mix(in srgb, var(--accent) 55%, var(--text-faint)); }
.ds-k-wake .ds-glance-label, .ds-k-bed .ds-glance-label { font-weight: 700; }
.ds-glance-item.is-done .ds-glance-label { color: var(--text-dim); text-decoration: line-through; text-decoration-color: var(--text-faint); }

/* On Today: the reminder line under the water figure and on the sleep card. */
.ds-card-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2px 12px;
  margin-block: 4px 0;
}
.ds-card-line .ds-card-text { font-size: 0.88rem; color: var(--text-dim); }
.ds-card-text.ds-ok { color: var(--ok); }
.ds-card-line a { display: inline-flex; align-items: center; min-height: 44px; font-size: 0.88rem; font-weight: 600; }

@media (prefers-reduced-motion: reduce) {
  .ds-slot, input.ds-switch, input.ds-switch::before { transition: none; }
}