.daily-overview {
  margin: 8px 0 4px;
  padding: 4px 2px;
}
.daily-copy p { margin: 0 0 3px; color: GrayText; font-size: .86rem; }
.daily-copy h2 { font-size: 1.65rem; }
.daily-copy small { display: block; margin-top: 7px; color: GrayText; }
.daily-progress-wrap {
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 4px 0 22px;
}
.daily-progress-wrap > p { color: GrayText; font-size: .84rem; }
.daily-progress {
  position: relative;
  display: grid;
  place-items: center;
  width: 210px;
  height: 210px;
  flex: 0 0 210px;
  border-radius: 50%;
}
.daily-progress svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.daily-progress circle { fill: none; stroke-width: 4; }
.daily-progress .progress-track { stroke: color-mix(in srgb, var(--accent) 14%, Canvas); }
.daily-progress .progress-value { stroke: var(--accent); stroke-linecap: round; }
.daily-progress span { position: relative; z-index: 1; text-align: center; line-height: 1; }
.daily-progress strong { display: block; font-size: 1.55rem; }
.daily-progress small { display: block; margin-top: 5px; color: GrayText; font-size: .7rem; }
.daily-overview + .hero { padding-top: 16px; padding-bottom: 16px; }
.no-intake-hero .symbol { color: #218653; font-size: 5rem; font-weight: 900; line-height: 1; }
.overdue-warning {
  box-sizing: border-box;
  width: min(610px, 100%);
  margin: 8px auto 16px;
  padding: 16px 18px;
  border: 2px solid #b42318;
  border-radius: 18px;
  background: color-mix(in srgb, #b42318 8%, Canvas);
  color: CanvasText;
}
.overdue-warning strong { display: block; color: #b42318; font-size: 1.05rem; }
.overdue-warning p { margin: 5px 0 3px; font-weight: 700; }
.overdue-warning small { color: GrayText; }
.medication-due-dialog .dialog-content { justify-items: center; padding: 28px 24px 24px; }
.medication-due-symbol { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 24px; background: color-mix(in srgb, var(--accent) 13%, Canvas); font-size: 2.45rem; box-shadow: inset 0 1px 0 color-mix(in srgb, white 65%, transparent); }
.medication-due-dialog h2 { font-size: clamp(1.45rem, 5vw, 1.9rem); text-align: center; }
.medication-due-dialog #medication-due-name { font-size: 1.2rem; text-align: center; }
.medication-due-dialog #medication-due-dose { color: GrayText; text-align: center; line-height: 1.5; }
.medication-due-dialog.is-overdue h2 { color: #b42318; }
.medication-due-dialog.is-overdue .medication-due-symbol { background: color-mix(in srgb, #b42318 12%, Canvas); }
.medication-due-actions { width: 100%; margin-top: 7px; }
.medication-due-actions button { flex: 1; min-height: 52px; }
@media (max-width: 420px) { .medication-due-actions { display: grid; grid-template-columns: 1fr; } }
.focus-view.medication-overdue { background: color-mix(in srgb, #b42318 6%, Canvas); }
.focus-view.medication-overdue .focus-now { color: #b42318; }
.today-medication-list {
  display: grid;
  gap: 10px;
  margin-top: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
  width: min(610px, 100%);
  margin-inline: auto;
}
.today-medication-list .medication-card {
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, CanvasText 11%, transparent);
  border-radius: 0;
  background: transparent;
}
.today-medication-list .medication-card.next-dose {
  border: 0;
  border-left: 3px solid var(--accent);
  border-bottom: 1px solid color-mix(in srgb, CanvasText 11%, transparent);
  padding: 11px 10px;
  box-shadow: none;
}
.dose-status { display: grid; justify-items: end; gap: 3px; text-align: right; }
.dose-status strong { color: var(--accent); font-size: .72rem; text-transform: uppercase; letter-spacing: .04em; }
.dose-status small { color: GrayText; }
.row-timer { color: var(--accent); font-size: .82rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.due-medications { width: min(100%, 430px); margin: 16px auto 4px; padding: 0; list-style: none; text-align: left; }
.due-medications li { display: flex; justify-content: space-between; gap: 16px; padding: 10px 12px; border-bottom: 1px solid color-mix(in srgb, CanvasText 14%, transparent); }
.due-medications li span { color: GrayText; white-space: nowrap; }
.due-medications li button { flex: 0 0 auto; padding: 8px 11px; white-space: nowrap; }
.due-medication-copy { display: grid; flex: 1; min-width: 0; color: CanvasText !important; white-space: normal !important; }
.due-medication-copy small { color: GrayText; margin-top: 2px; }
body.protected-view #date { display: none; }
body.protected-view main { max-width: 760px; }
body.protected-view nav { display: none !important; }
.focus-view {
  box-sizing: border-box;
  width: 100%;
  min-height: calc(100dvh - 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px 18px 110px;
  text-align: center;
}
.focus-eyebrow, .focus-now, .focus-view h1, .focus-view p { margin: 0; }
.focus-eyebrow { color: GrayText; font-size: 1.05rem; }
.focus-now { color: var(--accent); font-size: 1.15rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.focus-view h1 { width: 100%; max-width: 640px; overflow-wrap: break-word; word-break: normal; hyphens: auto; font-size: clamp(2rem, 7vw, 3.35rem); line-height: 1.08; }
.focus-medication { box-sizing: border-box; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 24px; width: 100%; max-width: 570px; min-width: 0; padding: 18px; border: 2px solid color-mix(in srgb, var(--accent) 25%, Canvas); border-radius: 28px; background: Canvas; text-align: left; box-shadow: 0 12px 34px color-mix(in srgb, CanvasText 10%, transparent); }
.focus-medication-visual, .focus-medication-photo, .focus-medication-placeholder { width: 150px; height: 150px; border-radius: 22px; object-fit: contain; background: color-mix(in srgb, var(--accent) 7%, Canvas); }
.focus-medication-visual { position: relative; overflow: hidden; }
.focus-medication-visual .focus-medication-photo { width: 100%; height: 100%; }
.focus-quantity-badge { position: absolute; right: 7px; bottom: 7px; left: 7px; padding: 7px 8px; border-radius: 12px; background: color-mix(in srgb, Canvas 82%, transparent); color: CanvasText; font-size: .78rem; text-align: center; box-shadow: 0 4px 14px #0003; backdrop-filter: blur(12px); }
.focus-medication-placeholder { display: grid; place-items: center; align-content: center; gap: 5px; padding: 8px; font-size: 3.35rem; }
.focus-dose-icons { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0; max-width: 100%; line-height: 1; }
.focus-dose-icons>span { display: block; margin: -3px; }
.focus-dose-icons>img { width: 62px; height: 62px; margin: -4px; border-radius: 14px; object-fit: contain; }
.focus-medication-placeholder>b { font-size: 1.35rem; line-height: 1; }
.focus-medication h2 { min-width: 0; margin: 0; overflow-wrap: break-word; word-break: normal; hyphens: auto; font-size: clamp(1.55rem, 5vw, 2.4rem); line-height: 1.1; }
.focus-view h1.long-name { font-size: clamp(1.65rem, 5.8vw, 2.65rem); }
.focus-medication h2.long-name { font-size: clamp(1.25rem, 4.2vw, 1.85rem); }
.focus-medication p { margin-top: 10px; color: CanvasText; font-size: clamp(1.2rem, 4vw, 1.65rem); font-weight: 700; }
.focus-instruction { max-width: 590px; color: GrayText; font-size: clamp(1.2rem, 4vw, 1.55rem); line-height: 1.4; }
.focus-primary { width: min(100%, 570px); min-height: 78px; padding: 18px 24px; border-radius: 22px; font-size: clamp(1.3rem, 4.5vw, 1.75rem); font-weight: 800; }
.focus-help { width: min(100%, 570px); min-height: 62px; font-size: 1.15rem; }
.focus-state-art { display: block; width: min(190px,52vw); max-height: 190px; border-radius: 30px; object-fit: contain; filter: drop-shadow(0 10px 18px #00000016); }
.focus-state-art[hidden] { display: none; }
.feedback-state-art { width: min(230px,70vw); max-height: 190px; margin: 0 auto 14px; }
.focus-status-symbol { display: grid; place-items: center; width: 130px; height: 130px; border-radius: 50%; background: color-mix(in srgb, #278760 14%, Canvas); color: #278760; font-size: 5rem; font-weight: 800; }
.focus-command-symbol { display: grid; place-items: center; width: 112px; height: 112px; border-radius: 50%; background: color-mix(in srgb, #e4a52f 17%, Canvas); color: #9b6512; font-size: 4.4rem; }
.friendly-mark { font-size: 2.8rem; line-height: 1; }
body.neutral-minimal-view { --accent: #16856f; background: linear-gradient(160deg,#effaf6,#fff 48%,#e7f6f3); }
body.neutral-minimal-view .focus-medication { border-color: #91cfc1; background: #f7fcfa; box-shadow: 0 14px 34px #16856f24; }
body.neutral-minimal-view .focus-medication-placeholder { background: #e5f5ef; }
body.neutral-minimal-view .focus-primary { background: #16856f; }
body.neutral-minimal-view .focus-command-symbol { background: #dff3ec; color: #116b5a; }
body.friendly-minimal-view { --accent: #d56b28; background: linear-gradient(160deg,#fff8dd,#fff 48%,#e9f7ff); }
body.friendly-minimal-view .focus-medication { border-color: #efad70; background: #fffaf0; box-shadow: 0 14px 34px #c86e2426; }
body.friendly-minimal-view .focus-medication-placeholder { background: #fff0d4; }
body.friendly-minimal-view .focus-primary { background: #d56b28; }
.focus-view.due-attention { border-radius: 32px; animation: minimal-attention 1.6s ease-in-out infinite alternate; }
body.neutral-minimal-view .focus-view.due-attention { animation-name: minimal-attention-neutral; }
@keyframes minimal-attention { from { background: color-mix(in srgb,#f3b33d 8%,transparent); box-shadow: inset 0 0 0 3px color-mix(in srgb,#e58a24 18%,transparent); } to { background: color-mix(in srgb,#f3b33d 24%,transparent); box-shadow: inset 0 0 0 8px color-mix(in srgb,#e58a24 48%,transparent); } }
@keyframes minimal-attention-neutral { from { background: color-mix(in srgb,#45ad92 7%,transparent); box-shadow: inset 0 0 0 3px color-mix(in srgb,#16856f 17%,transparent); } to { background: color-mix(in srgb,#45ad92 20%,transparent); box-shadow: inset 0 0 0 8px color-mix(in srgb,#16856f 42%,transparent); } }
@media (prefers-reduced-motion: reduce) {
  .focus-view.due-attention { animation: none; background: color-mix(in srgb,#f3b33d 22%,transparent); box-shadow: inset 0 0 0 5px #d56b28; }
  body.neutral-minimal-view .focus-view.due-attention { background: color-mix(in srgb,#45ad92 18%,transparent); box-shadow: inset 0 0 0 5px #16856f; }
}
@media (max-width: 420px) {
  .daily-overview { padding-inline: 2px; }
  .daily-progress { width: 190px; height: 190px; flex-basis: 190px; }
  .dose-status strong { font-size: .66rem; }
  .due-medications li { gap: 6px; padding-inline: 4px 0; }
  .due-medications li button {
    max-width: 112px;
    padding: 7px 8px;
    font-size: .72rem;
    line-height: 1.15;
    white-space: normal;
  }
  .focus-view { max-width: 100%; justify-content: flex-start; padding-inline: 10px; overflow: hidden; }
  .focus-medication { grid-template-columns: 105px minmax(0, 1fr); gap: 14px; padding: 13px; border-radius: 22px; }
  .focus-medication-visual, .focus-medication-photo, .focus-medication-placeholder { width: 105px; height: 105px; border-radius: 17px; }
  .focus-medication-placeholder { font-size: 2.35rem; }
  .focus-quantity-badge { right: 4px; bottom: 4px; left: 4px; padding: 5px; border-radius: 9px; font-size: .65rem; }
}