/* The illustrated cover overlaps the calendar; translucent surfaces sit above the color field. */
.medora {
  --cover: #4c47bb;
  --cover-light: #7560d5;
  --cover-shade: #383189;
  --cover-text: #faf7ff;
  --stage: #eeeefa;
  --glass-rim: #fffc;
  --glass-glint: #fff9;
  --glass-shadow: #423b7c24;
  --mint: #dcf0bf;
  --mint-ink: #233d2c;
  background: radial-gradient(ellipse at 12% 12%, #dbd8f94f, transparent 34rem), var(--page);
  --page: #f4f3fa;
  --panel: #fcfbff;
  --field: #fff;
  --action: #423997;
  --ink: #211d3a;
  --muted: #5f5974;
  --outline: #dedbef;
  --dock-active: #e8e4fc;
  --today-rail-width: min(calc(100% - 1.35rem), 40rem);
}
@media (prefers-color-scheme: dark) {
  .medora:not([data-theme="light"]) {
    --cover: #2b404a;
    --cover-light: #426061;
    --cover-shade: #202e36;
    --cover-text: #f6f9fa;
    --stage: #273339;
    --glass-rim: #9cbdb446;
    --glass-glint: #b7d4c622;
    --glass-shadow: #0006;
    --mint: #d0e8b2;
    --mint-ink: #243b29;
    background: radial-gradient(ellipse at 12% 12%, #5a7a6a36, transparent 34rem), var(--page);
  }
}
.medora[data-theme="dark"] {
  --cover: #2b404a;
  --cover-light: #426061;
  --cover-shade: #202e36;
  --cover-text: #f6f9fa;
  --stage: #273339;
  --glass-rim: #9cbdb446;
  --glass-glint: #b7d4c622;
  --glass-shadow: #0006;
  --mint: #d0e8b2;
  --mint-ink: #243b29;
  background: radial-gradient(ellipse at 12% 12%, #5a7a6a36, transparent 34rem), var(--page);
}
html[dir="ltr"] .medora { font-family: system-ui, -apple-system, sans-serif; }
html[dir="ltr"] .medora h1, html[dir="ltr"] .medora .story-copy h2 { letter-spacing: -.045em; }
html[dir="ltr"] .medora :is(#previous-day, #next-day, #screen-back, #settings-back, #previous-month, #next-month, #picker-previous-month, #picker-next-month) svg { scale: -1 1; }
.medora .app-content, .app-bar-inner { max-inline-size: 55rem; }
.medora .app-content { box-sizing: border-box; }
.medora .app-bar-inner { min-block-size: 3.7rem; }
.medora .brand-mark { background: var(--action); color: var(--on-action); border-radius: .68rem; }
.medora .header-tools button {
  border: 1px solid var(--glass-rim);
  background: color-mix(in srgb, var(--glass) 72%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-glint), 0 .18rem .65rem var(--glass-shadow);
  -webkit-backdrop-filter: blur(18px) saturate(145%);
  backdrop-filter: blur(18px) saturate(145%);
}
.medora .header-tools .language-switch { display: inline-flex; gap: .28rem; padding-inline: .58rem; font: 750 .69rem system-ui, sans-serif; border-radius: 100vw; }
.medora .header-tools .language-switch svg { inline-size: 1.02rem; block-size: 1.02rem; }
.medora .page-heading { margin-block: .4rem .65rem; }
.medora #app:not([data-active-screen]) .page-heading,
.medora #app:is([data-active-screen="today"], [data-active-screen="insights"]) .page-heading {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  padding: 0;
  clip-path: inset(50%);
  overflow: hidden;
}
.medora .today-story {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(0, 1fr);
  align-items: center;
  min-block-size: clamp(11.75rem, 48vw, 15.5rem);
  padding: clamp(.9rem, 3.5vw, 1.65rem);
  padding-block-end: 1.65rem;
  box-sizing: border-box;
  margin: .25rem 0 0;
  isolation: isolate;
  overflow: hidden;
  color: var(--cover-text);
  background:
    radial-gradient(ellipse at 83% 15%, #eab5f762, transparent 56%),
    linear-gradient(150deg, var(--cover-shade), var(--cover) 55%, var(--cover-light));
  border-radius: 2.1rem 2.1rem 1.3rem 1.3rem;
}
.medora .today-story::after {
  content: "";
  position: absolute;
  inset: .4rem;
  border: 1px solid #fff3;
  border-radius: 1.8rem 1.8rem 1.05rem 1.05rem;
  pointer-events: none;
}
.medora .today-story .story-art {
  justify-self: center;
  inline-size: min(141%, 22rem);
  max-block-size: clamp(7.7rem, 33vw, 12.2rem);
  block-size: auto;
  object-fit: contain;
  -webkit-mask-image: linear-gradient(#000 88%, transparent);
  mask-image: linear-gradient(#000 88%, transparent);
}
html[dir="rtl"] .medora .story-art { transform: scaleX(-1); }
.story-copy { min-inline-size: 0; }
.medora .story-label { display: inline-block; padding: .12rem .45rem; border: 1px solid #fff5; background: #fff2; border-radius: .7rem; font-size: .72rem; }
.medora .story-copy h2 { margin: .35rem 0 .15rem; font-weight: 850; font-size: clamp(1.55rem, 6.5vw, 2.85rem); line-height: 1.18; text-wrap: balance; }
.medora #story-summary { margin-block: .3rem 0; color: var(--cover-text); font-size: clamp(.75rem, 2.8vw, .95rem); }
#today-dates { position: relative; z-index: 1; inline-size: var(--today-rail-width); margin: -1.35rem auto 0; }
#today-dates:empty { display: none; }
.medora #today-dates .day-controls, .medora .dock, .medora .settings-dialog .sheet-header, .medora .glass-toolbar {
  border: 1px solid var(--glass-rim);
  background: linear-gradient(132deg, var(--glass-glint), transparent 43%), color-mix(in srgb, var(--glass) 78%, transparent);
  box-shadow: inset 0 1px 0 var(--glass-glint), inset 0 -1px 0 var(--glass-rim), 0 .42rem 1.25rem var(--glass-shadow);
  -webkit-backdrop-filter: blur(22px) saturate(150%);
  backdrop-filter: blur(22px) saturate(150%);
}
.medora :is(#today-dates .day-controls, .day-controls.compact-day) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
}
.medora #today-dates .day-controls {
  margin: 0;
  padding: .06rem .28rem .24rem;
  gap: 0 .06rem;
  border-radius: 1.15rem;
  background:
    linear-gradient(112deg, color-mix(in srgb, var(--glass-glint) 45%, transparent), transparent 58%),
    linear-gradient(180deg, color-mix(in srgb, var(--panel) 53%, transparent), color-mix(in srgb, var(--panel) 82%, transparent));
  box-shadow: inset 0 1px 1px var(--glass-glint), inset 0 -1px 0 var(--glass-rim), 0 .42rem 1.25rem var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(155%);
  backdrop-filter: blur(14px) saturate(155%);
}
.medora :is(#today-dates, .compact-day) .day-arrow { color: var(--action); }
.day-toolbar { display: contents; }
.single-date .day-week-window { display: none; }
.medora .compact-day .date-field { min-block-size: 2.6rem; }
.medora .compact-day #previous-day { grid-area: 1 / 1; }
.medora #today-dates .day-toolbar {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}
.medora #today-dates .date-field { grid-column: 2; min-block-size: 2rem; padding: .1rem .3rem; font-size: .82rem; }
.medora #today-dates .date-field:focus-within { outline: none; }
.medora #today-dates .date-field:focus-visible { box-shadow: inset 0 0 0 2px var(--action); }
.medora #today-reset {
  grid-column: 3;
  justify-self: end;
  min-block-size: 2rem;
  margin-inline-end: .16rem;
  padding: .1rem .55rem;
  border-radius: .65rem;
  background: var(--dock-active);
  color: var(--action);
  font-size: .72rem;
}
.medora #today-dates .day-arrow { min-inline-size: 2rem; min-block-size: 2.5rem; }
.medora #today-dates .day-arrow svg { inline-size: 1.25rem; block-size: 1.25rem; }
.day-week-window { min-inline-size: 0; overflow: hidden; }
.medora #today-dates .day-week { position: relative; gap: 0; }
.medora .day-controls.compact-day { padding: .25rem .4rem; margin-block: .5rem .65rem; }
.medora #today-dates .day-week button { min-inline-size: 0; min-block-size: 2.5rem; border-radius: .72rem; padding: .05rem 0; font-size: .8rem; font-weight: 760; }
.medora #today-dates .day-week button:focus-visible { outline-offset: -.15rem; }
.medora #today-dates .day-week .day-week-ghost { position: absolute; inline-size: calc(100% / 7); }
.day-week-ghost[data-edge="start"] { inset-inline-end: 100%; }
.day-week-ghost[data-edge="end"] { inset-inline-start: 100%; }
.medora #today-dates .day-week .calendar-today:not([aria-current="date"]) { box-shadow: inset 0 0 0 1px var(--action); }
.medora #today-dates .day-week button span { color: var(--muted); font-size: .68rem; }
.medora #today-dates .day-week button[aria-current="date"] { background: var(--mint); color: var(--mint-ink); box-shadow: inset 0 1px #fff8; }
.medora #today-dates .day-week button[aria-current="date"] span { color: var(--mint-ink); }
.medora .daily-sheet { margin-block-start: .75rem; }
.medora #today-water {
  --water: color-mix(in srgb, var(--cover) 11%, var(--panel));
  --water-ink: var(--ink);
  --water-accent: #8cb1e2;
  display: grid;
  grid-template-columns: clamp(3.6rem, 22%, 5.3rem) minmax(0, 1fr);
  gap: .65rem;
  box-sizing: border-box;
  inline-size: var(--today-rail-width);
  margin: 0 auto .9rem;
  padding: .45rem;
  border: 1px solid var(--outline);
  border-radius: 1.15rem;
  background: linear-gradient(125deg, var(--glass-glint), transparent 60%), var(--water);
}
.today-water-art {
  position: relative;
  border-radius: .9rem;
  background: linear-gradient(155deg, var(--glass-glint), transparent 64%),
    color-mix(in srgb, var(--water-accent) 27%, var(--water));
}
.medora #today-water .water-glass {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
}
.medora #today-water .glass-water { fill: url(#today-glass-water-fill); }
.today-water-body { min-inline-size: 0; padding: .16rem .13rem .08rem; }
.medora #today-water .water-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: .4rem; align-items: center; }
.medora #today-water-label { margin: 0; color: inherit; font-size: .98rem; }
.medora #today-water .amount-line { grid-area: 2 / 1; margin: 0; font-size: .78rem; }
.today-water-target { white-space: nowrap; }
.medora #today-water-progress {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  clip-path: inset(50%);
}
.medora #today-water-percent {
  grid-area: 1 / 2 / span 2;
  padding: .08rem .36rem;
  border-radius: .55rem;
  background: color-mix(in srgb, var(--water-accent) 24%, var(--water));
  font-size: .74rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.medora #today-water[data-goal-reached] #today-water-percent { background: var(--mint); color: var(--mint-ink); }
.today-water-actions { display: flex; gap: .28rem; margin-block-start: .35rem; }
.medora .today-water-actions button {
  flex: 1;
  min-inline-size: 0;
  min-block-size: 2.75rem;
  padding: .15rem .25rem;
  border-radius: .7rem;
  font-size: .75rem;
  line-height: 1.2;
}
.medora .today-water-actions [data-open-water] { flex: 1.32; padding-inline: .13rem; border-color: transparent; background: var(--action); color: var(--on-action); }
.medora .today-water-actions .secondary {
  border-color: color-mix(in srgb, var(--water-accent) 55%, var(--outline));
  background: color-mix(in srgb, var(--panel) 58%, var(--water));
  color: var(--water-ink);
}
.today-water-actions small { display: block; font-size: .61rem; font-weight: 500; }
.medora .today-water-feedback {
  position: fixed;
  z-index: 3;
  inset-inline: max(.75rem, env(safe-area-inset-left), env(safe-area-inset-right));
  inset-block-end: calc(4.6rem + max(.45rem, env(safe-area-inset-bottom)));
  max-inline-size: 25rem;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .6rem;
  border: 1px solid color-mix(in srgb, var(--water-ink) 22%, var(--water));
  border-radius: 1rem;
  background: var(--water);
  box-shadow: 0 .3rem 1rem var(--glass-shadow);
  font-size: .85rem;
}
.today-water-feedback > span { flex: 1; }
.medora .today-water-feedback button { min-block-size: 2.75rem; padding: .2rem .5rem; color: inherit; font-size: .8rem; }
.medora #today-water-dismiss { min-inline-size: 2.75rem; border: 0; background: transparent; }
.medora #water-dialog .sheet-header { background: var(--water); color: var(--water-ink); }
.medora #water-dialog .sheet-header > svg { color: inherit; }
.medora #water-dialog .water-amount-field {
  display: grid;
  justify-items: center;
  gap: .2rem;
  padding: .7rem .55rem;
  border: 1px solid color-mix(in srgb, var(--water-ink) 21%, var(--water));
  border-radius: 1.18rem;
  background: linear-gradient(130deg, var(--glass-glint), transparent 62%), var(--water);
  color: var(--water-ink);
}
.medora #water-dialog .water-amount-field:focus-within { outline: .14rem solid var(--action); outline-offset: .13rem; }
.water-amount-value { display: flex; align-items: baseline; justify-content: center; gap: .35rem; }
.medora #water-amount {
  inline-size: 5.8ch;
  min-block-size: 2.8rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: center;
  font-size: clamp(1.45rem, 6vw, 2.05rem);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.medora #water-amount:focus-visible { outline: none; }
.medora #water-presets { gap: .35rem; margin-block: .55rem; }
.medora #water-presets button { background: var(--field); border-color: var(--outline); color: var(--water-ink); }
.medora #water-presets button[aria-pressed="true"] { background: var(--water); border-color: var(--water-ink); }
.medora #water-options { padding: .2rem .65rem; border: 1px solid var(--outline); }
.medora #water-options summary { display: flex; align-items: center; gap: .4rem; list-style: none; font-size: .88rem; }
#water-options summary::-webkit-details-marker { display: none; }
.medora #water-when { flex: 1; min-inline-size: 0; color: var(--muted); text-align: end; }
.medora #water-options summary svg { inline-size: .9rem; block-size: .9rem; color: var(--action); }
.medora #water-options[open] summary svg { transform: rotate(180deg); }
.water-log-when { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; padding-block-end: .45rem; }
.medora .water-log-when .picker-field { background: var(--field); }
.daily-main { min-inline-size: 0; }
.daily-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin: 0 0 .55rem; }
.medora .daily-heading h2 { font-size: 1.25rem; margin: 0; }
.medora .daily-heading output { padding: .2rem .62rem; border-radius: 100vw; background: var(--dock-active); color: var(--action); font-size: .75rem; font-weight: 740; }
.medora .daily-sheet .dose-card {
  background: color-mix(in srgb, var(--pill-base, #f3c56a) 10%, var(--panel));
  border-color: color-mix(in srgb, var(--pill-base, #f3c56a) 23%, var(--outline));
  color: var(--ink);
}
.medora .daily-sheet .dose-header > .medication-badge {
  flex: none;
  box-sizing: border-box;
  inline-size: 3.15rem;
  block-size: 3.15rem;
  padding: .32rem;
  border-radius: .8rem;
  background: color-mix(in srgb, var(--pill-base) 30%, var(--panel));
}
.medora .daily-sheet .studio-hero {
  display: grid;
  grid-template-columns: clamp(4.8rem, 25%, 7rem) minmax(0, 1fr);
  gap: .38rem .55rem;
  padding: .6rem .7rem;
  margin-block: 0;
  border-radius: 1.5rem;
  box-shadow: 0 .3rem .8rem var(--glass-shadow);
}
.medora .daily-sheet .studio-hero .medication-banner {
  position: relative;
  grid-area: 1 / 1;
  inset: auto;
  inline-size: auto;
  block-size: auto;
  min-block-size: 4rem;
  border-radius: .8rem;
  background: color-mix(in srgb, var(--pill-base) 30%, var(--panel));
}
.medora .daily-sheet .studio-hero .medication-badge { inline-size: min(84%, 4.65rem); }
.medora .daily-sheet .studio-hero .banner-echo { display: none; }
.medora .daily-sheet .studio-hero .dose-header { grid-area: 1 / 2; inline-size: auto; min-block-size: 0; padding-inline-end: 2.35rem; }
.medora .daily-sheet .studio-hero h3 { font-size: clamp(1.08rem, 4.5vw, 1.48rem); }
.medora .daily-sheet .studio-hero .dose-result { inline-size: auto; }
.medora .daily-sheet .studio-hero > :is(.dose-options, .dose-quick, .dose-snoozed) { grid-column: 1 / -1; margin: 0; }
.medora .daily-sheet .studio-hero .dose-options summary { inset-inline-end: .42rem; inset-block-start: .35rem; }
.medora :is(.daily-sheet, #med-day-doses) .dose-card .dose-info { min-inline-size: 0; flex: 1; }
.medora :is(.daily-sheet, #med-day-doses) .dose-card .dose-info :is(h3, p) { margin: 0; }
.medora :is(.daily-sheet, #med-day-doses) .dose-card .dose-result { gap: .12rem .4rem; }
.medora :is(.daily-sheet, #med-day-doses) .dose-card .dose-quick button { min-block-size: 2.75rem; padding: .2rem .45rem; font-size: .86rem; }
.medora :is(.daily-sheet, #med-day-doses) .dose-card:not(.studio-hero) { padding: .5rem .65rem; }
.medora :is(.daily-sheet, #med-day-doses) .dose-card:not(.studio-hero) .dose-info { display: flex; align-items: baseline; flex-wrap: wrap; gap: .15rem .4rem; }
.medora :is(.daily-sheet, #med-day-doses) .dose-card:not(.studio-hero) .dose-info h3 { flex-basis: 100%; }
.medora .daily-sheet .studio-hero .dose-meta { display: flex; align-items: center; flex-wrap: wrap; gap: .12rem .45rem; margin-block-end: .3rem; }
.medora .daily-sheet .studio-hero .dose-meta p { margin: 0; color: var(--muted); }
.medora .daily-sheet .studio-hero .dose-header p:not(.hero-kicker),
.medora .daily-sheet .studio-hero .badge,
.medora .daily-sheet .studio-hero .dose-options summary {
  background: var(--panel);
  color: var(--action);
}
.medora .daily-sheet .studio-hero button.secondary { background: var(--panel); color: var(--ink); border-color: var(--outline); }
.medora .daily-sheet .studio-hero button:not(.secondary) { background: var(--mint); color: var(--mint-ink); border-color: var(--mint); }
.medora .daily-sheet .studio-hero :focus-visible { outline-color: var(--action); }
.today-state {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: .85rem;
  padding: .8rem .9rem;
  border: 1px solid var(--outline);
  border-radius: 1.35rem;
  background: linear-gradient(115deg, var(--panel), var(--stage));
}
.medora .today-state h3 { margin: 0; font-size: 1.13rem; }
.medora .today-state p { color: var(--muted); font-size: .87rem; }
.today-state-art {
  display: grid;
  place-items: center;
  inline-size: 3.45rem;
  aspect-ratio: 1;
  border-radius: 42%;
  background: var(--dock-active);
  color: var(--action);
  box-shadow: 0 0 0 .28rem var(--panel), inset 0 1px 0 var(--glass-glint);
}
.medora .today-state-art svg { inline-size: 1.7rem; block-size: 1.7rem; }
.today-state[data-complete="true"] .today-state-art { inline-size: 4.35rem; background: none; box-shadow: none; }
.medora .today-state[data-complete="true"] .today-state-art svg { inline-size: 100%; block-size: 100%; }
.medora .daily-sheet .timeline { padding-inline-start: .83rem; border-inline-start: 2px solid var(--outline); margin-block: 1rem; }
.medora #timeline-title { margin-block-end: .45rem; }
.medora .daily-sheet .timeline article::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.18rem;
  inset-block-start: 1.25rem;
  inline-size: .58rem;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--action);
  box-shadow: 0 0 0 .2rem var(--page);
}
.medora .daily-sheet .timeline article { position: relative; }
.medora .dock { max-inline-size: 46rem; padding: .25rem; border-radius: 2.3rem; }
.medora .dock button { grid-template-rows: 1.85rem auto; min-block-size: 3.65rem; font-size: .74rem; }
.medora .dock button[aria-current="page"] { background: color-mix(in srgb, var(--dock-active) 74%, transparent); box-shadow: inset 0 1px var(--glass-glint), 0 .14rem .42rem var(--glass-shadow); }
.medora .dock .dock-add span { background: var(--mint); color: var(--mint-ink); }
.medora .quick-items { display: grid; gap: .55rem; }
.medora .quick-item { display: flex; align-items: center; justify-content: flex-start; gap: .65rem; padding-inline: .85rem; min-block-size: 3.65rem; }
.medora .quick-item.medicine { background: var(--stage); }
.medora .quick-item.water { background: var(--water); color: var(--water-ink); }
.medora .quick-item.visit { background: var(--visit); color: var(--visit-ink); }

.medora #plans-heading { background: var(--stage); border: 0; padding: .8rem .95rem; }
.medora #plans-heading .quiet { margin: 0; font-size: .78rem; }
#plans {
  display: grid;
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: min(93%, 23rem);
  align-items: stretch;
  overflow-x: auto;
  scroll-snap-type: inline proximity;
  scrollbar-color: var(--outline) transparent;
  scrollbar-width: thin;
  padding-block: .2rem .6rem;
}
#plans > :first-child { grid-column: auto; }
#plans > .empty { min-inline-size: 0; }
.medora :is(#plans .treatment, #visits .visit-shelf-card) {
  position: relative;
  isolation: isolate;
  min-inline-size: 0;
  min-block-size: 16rem;
  padding: .72rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid var(--outline);
  border-radius: 1.48rem;
  background: var(--panel);
  color: var(--ink);
}
.medora #plans .treatment { min-block-size: 0; scroll-snap-align: start; }
.medora #plans .treatment-profile {
  display: grid;
  grid-template-columns: clamp(4.5rem, 29%, 6.8rem) minmax(0, 1fr);
  gap: .55rem;
  padding: 0;
}
.treatment-details { min-inline-size: 0; }
.medora .treatment-details p { margin-block: .15rem; }
.medora .treatment-details input[role="switch"] { margin-inline: 0; }
.medora #plans .treatment-profile .medication-banner {
  float: none;
  inline-size: 100%;
  --banner-tint: var(--pill-base);
}
.medora :is(#plans .treatment-profile .medication-banner, #visits .visit-banner, #visit-appearance-preview) {
  border-radius: 1rem;
  background: radial-gradient(ellipse at 30% 22%, #fff4, transparent 58%),
    linear-gradient(135deg, color-mix(in srgb, var(--banner-tint) 42%, var(--stage)), var(--stage));
}
.medora #visits .visit-banner { block-size: clamp(7.8rem, 33vw, 10rem); margin: 0 0 .36rem; }
.medora #plans .treatment-profile .medication-banner { block-size: auto; min-block-size: 5.2rem; margin: 0; }
.medora #plans .treatment-profile .medication-banner .medication-badge {
  inline-size: min(93%, 5.5rem);
  block-size: auto;
  aspect-ratio: 1;
}
.medora #plans .treatment-profile .medication-banner .banner-echo { display: none; }
.medora #plans .treatment-profile .quiet { margin-block-start: 0; }
.medora #plans .treatment > .buttons { margin-block-start: auto; }
.medora #plans .treatment .treatment-name { min-block-size: 2.5rem; padding-inline: .12rem; line-height: 1.3; }
.medora #plans .treatment .refill { background: var(--stage); }
.medora .segmented { padding: .24rem; border-radius: 1.18rem; }
.medora .segmented:not(.glass-toolbar) { background: var(--stage); }
.medora .glass-toolbar { padding: .3rem; border-radius: 1.18rem; }
.medora .visit-toolbar { margin-block: 1rem .75rem; padding: .6rem .7rem .3rem; }
.medora #visits-heading {
  flex-wrap: nowrap;
  margin-block-end: .38rem;
  padding-inline: .25rem;
}
.medora #visits-heading h2 { min-inline-size: 0; margin: 0; overflow-wrap: anywhere; }
.medora #visit-filters { background: transparent; padding: 0; }
.medora #visit-filters button { min-inline-size: 0; border-radius: .9rem; text-wrap: balance; }
.medora #visit-filters button[aria-pressed="true"],
.medora #report-range button[aria-pressed="true"] {
  background: var(--dock-active);
  color: var(--action);
  box-shadow: 0 .14rem .35rem var(--glass-shadow);
}
.medora #visit-add { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: .3rem; border-radius: 5rem; padding-inline: .75rem; }
.medora #visit-add svg { inline-size: 1.1rem; block-size: 1.1rem; }
#visits { display: grid; gap: .7rem; }
.medora #visits-more { grid-column: 1 / -1; justify-self: center; padding-inline: 1rem; }
.medora #visits > h2 { margin: .35rem .1rem 0; font-size: 1.04rem; }
.medora #visits article { margin: 0; }
.visit-card-header { display: flex; align-items: flex-start; gap: .75rem; }
.visit-card-body { flex: 1; min-inline-size: 0; }
.visit-date {
  display: grid;
  align-content: center;
  justify-items: center;
  flex: none;
  min-inline-size: 3.2rem;
  min-block-size: 3.3rem;
  padding: .15rem .32rem;
  box-sizing: border-box;
  background: var(--panel);
  border-radius: .95rem;
  color: var(--visit-ink);
  line-height: 1.2;
}
.visit-date strong { font-size: 1.16rem; }
.visit-date span { font-size: .69rem; }
.visit-hour {
  display: inline-block;
  border-radius: .6rem;
  padding: .08rem .4rem;
  background: var(--panel);
  color: var(--visit-ink);
  font-size: .79rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.medora #calendar-activity article.visit-card { background: var(--panel); color: var(--ink); }
.medora .visit-day-card {
  --visit-art-width: clamp(4.6rem, 27%, 7rem);
  --visit-art-origin: 12%;
  display: grid;
  grid-template-columns: var(--visit-art-width) minmax(0, 1fr);
  gap: .26rem .55rem;
  padding: .55rem .65rem;
  background: var(--panel);
  color: var(--ink);
}
html[dir="rtl"] .visit-day-card { --visit-art-origin: 88%; }
.medora .visit-day-card .visit-banner {
  grid-area: 1 / 1 / 2 / -1;
  grid-template-columns: var(--visit-art-width) 1fr;
  align-items: start;
  min-block-size: 5.15rem;
  margin: -.55rem -.65rem 0;
  padding-block-start: .28rem;
  border-start-start-radius: inherit;
  border-start-end-radius: inherit;
  background: radial-gradient(ellipse 47% 75% at var(--visit-art-origin) 25%,
    color-mix(in srgb, var(--pill-base) 44%, var(--panel)), transparent);
  pointer-events: none;
}
.medora .visit-day-card .visit-banner::before { content: none; }
.medora .visit-day-card .visit-banner svg {
  grid-column: 1;
  inline-size: min(95%, 5.75rem);
  max-inline-size: none;
  opacity: .9;
  transform: rotate(-9deg);
}
.medora .visit-day-card .visit-shelf-details { position: relative; grid-area: 1 / 2; align-self: center; }
.medora .visit-day-card :is(.visit-title, p) { margin: .12rem 0; }
.visit-kind {
  display: inline-block;
  margin-inline-end: .3rem;
  padding: .08rem .44rem;
  border-radius: .6rem;
  background: var(--dock-active);
  color: var(--ink);
  font-size: .74rem;
  font-weight: 750;
}
.medora .visit-day-card > .buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-column: 1 / -1;
  margin: 0;
  border-block-start: 1px solid var(--outline);
}
.medora .visit-day-card > .buttons button { min-inline-size: 0; padding: .12rem .2rem; font-size: .77rem; }
.medora .visit-card :is(.visit-date, .visit-hour, .visit-category) {
  background: color-mix(in srgb, var(--pill-base) 24%, var(--panel));
  color: var(--ink);
}
.visit-category {
  display: inline-block;
  max-inline-size: 100%;
  box-sizing: border-box;
  margin-inline-start: .28rem;
  padding: .08rem .4rem;
  border-radius: .6rem;
  font-size: .79rem;
  overflow-wrap: anywhere;
}
.visit-banner {
  --banner-tint: var(--pill-base, #b9a8ec);
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.visit-art-accent { fill: var(--pill-base, #b9a8ec); }
.visit-art-light { fill: color-mix(in srgb, var(--pill-base, #b9a8ec) 26%, #fff); }
.visit-banner:has(.visit-specialty)::before {
  content: "";
  position: absolute;
  inline-size: min(76%, 10.2rem);
  aspect-ratio: 1.3;
  border-radius: 50%;
  background: radial-gradient(ellipse at 35% 20%, #fff8, transparent 72%),
    color-mix(in srgb, var(--banner-tint) 46%, #f9f6ff);
  box-shadow: inset 0 0 0 1px #fff5, 0 .45rem 1.25rem #1d16321a;
  opacity: .75;
  transform: rotate(-12deg);
}
.medora #visit-appearance > summary {
  display: flex;
  align-items: center;
  gap: .5rem;
  list-style: none;
}
.medora #visit-appearance > summary::-webkit-details-marker { display: none; }
.medora #visit-appearance > summary::after { content: "⌄"; margin-inline-start: auto; }
.medora #visit-appearance[open] > summary::after { content: "⌃"; }
.visit-appearance-dot {
  inline-size: 1rem;
  block-size: 1rem;
  flex: none;
  border-radius: 50%;
  background: var(--pill-base);
}
.medora #visit-appearance-preview { block-size: 6.25rem; margin: 0 0 .36rem; }
.medora #visit-appearance-preview .visit-illustration { inline-size: 7.2rem; }
.visit-when, .medora .fields.plan-dates, .slot-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
  align-items: start;
}
.medora :is(.visit-when, .plan-dates) { align-items: stretch; }
.medora :is(.visit-when, .plan-dates) > .picker-control { display: flex; flex-direction: column; }
.medora :is(.visit-when, .plan-dates) .picker-field { flex: 1; }
.medora #visit-category-open {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  inline-size: 100%;
  margin-block-start: .2rem;
  background: var(--field);
  text-align: start;
}
.medora #visit-category-open svg { inline-size: 1.05rem; block-size: 1.05rem; color: var(--action); }
.medora #visit-category-dialog { max-block-size: min(82dvh, 37rem); }
.medora #visit-category-dialog[open] { display: flex; flex-direction: column; overflow: hidden; }
.medora #visit-category-dialog .sheet-body { overflow: auto; overscroll-behavior: contain; }
.medora #visit-category-dialog .cabinet-search { position: sticky; inset-block-start: 0; z-index: 1; }
.visit-category-group { display: grid; gap: .28rem; margin-block-end: .65rem; }
.medora .visit-category-group h3 { margin: .38rem .2rem .12rem; color: var(--muted); font-size: .82rem; }
.medora .visit-category-group button { text-align: start; }
.medora .visit-category-group button[aria-pressed="true"] { background: var(--dock-active); color: var(--action); }
.medora #visit-reminder-summary { padding-inline: .3rem; }
.medora #visit-colors { margin: .6rem 0 0; padding: 0; border: 0; background: transparent; }
.visit-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; }
.medora .visit-color-grid label {
  display: flex;
  align-items: center;
  gap: .38rem;
  min-block-size: 2.75rem;
  margin: 0;
  padding: .25rem .35rem;
  border: 1px solid var(--outline);
  border-radius: .85rem;
  background: var(--field);
  font-size: .76rem;
  cursor: pointer;
}
.medora .visit-color-grid input {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  inline-size: .95rem;
  min-block-size: 0;
  block-size: .95rem;
  margin: 0;
  padding: 0;
  border: 1px solid var(--outline);
  border-radius: 50%;
  background: var(--pill-base);
}
.medora .visit-color-grid input:checked { border: .2rem solid var(--action); }
.medora .visit-color-grid label:has(input:checked) { border-color: var(--action); }
.medora .visit-eyebrow {
  position: absolute;
  inset-inline-end: .55rem;
  inset-block-end: .45rem;
  padding: .15rem .48rem;
  border-radius: 5rem;
  background: var(--panel);
  color: var(--visit-ink);
  font-size: .72rem;
}
.medora .visit-shelf-card .visit-card-header { margin-block: .4rem .15rem; align-items: center; }
.medora .visit-shelf-card .visit-title { font-size: 1.12rem; line-height: 1.3; }
.visit-shelf-details { display: flex; flex: 1; flex-direction: column; min-inline-size: 0; overflow-wrap: anywhere; }
.visit-shelf-details .badge { align-self: start; }
.medora .visit-shelf-card .buttons { margin-block-start: auto; padding-block-start: .3rem; }
.medora svg.visit-illustration { inline-size: 8rem; max-inline-size: 48%; block-size: auto; aspect-ratio: 160 / 132; }
.medora svg.visit-illustration.visit-specialty {
  position: relative;
  inline-size: 7.3rem;
  max-inline-size: 64%;
  aspect-ratio: 1;
  stroke: color-mix(in srgb, var(--banner-tint) 24%, #29233f);
  stroke-width: 1.5;
  filter: drop-shadow(0 .25rem .24rem #2b1e4733);
}
.medora #visit-appearance-preview svg.visit-specialty { inline-size: 5.65rem; }
.medora #visit-appearance-preview:has(.visit-specialty)::before { inline-size: min(72%, 8.1rem); }
.medora .visit-empty {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  min-block-size: 7rem;
  padding: .8rem 1rem;
  border: 1px solid var(--outline);
  border-radius: 1.48rem;
  background: var(--stage);
}

.medora .insights-tabs {
  gap: .25rem;
  margin-block: .75rem .95rem;
}
.medora .insights-tabs button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: .35rem; border-radius: .9rem; border-color: transparent; }
.medora .insights-tabs button[aria-pressed="true"] { background: var(--dock-active); color: var(--action); border-color: transparent; }
.medora .insights-tabs svg { inline-size: 1.13rem; block-size: 1.13rem; }
.medora .calendar-card {
  padding: .7rem;
  background: var(--panel);
  border-color: var(--glass-rim);
  box-shadow: 0 .25rem .75rem var(--glass-shadow);
}
.medora .calendar-card .calendar-head { margin: 0 0 .6rem; padding: .13rem; border-radius: .95rem; background: var(--stage); }
.medora .calendar-card .calendar-head button { color: var(--action); }
.medora #calendar-days { gap: .13rem; }
.medora #calendar-days button { min-block-size: 2.8rem; border-radius: .8rem; }
.medora #calendar-days button.calendar-today:not([aria-current="date"]) { box-shadow: inset 0 0 0 1px var(--action); }
.medora #calendar-days button[aria-current="date"] { background: var(--mint); color: var(--mint-ink); }
.medora #calendar-days button[aria-current="date"] .calendar-dots .medicine { background: #623d23; }
.medora #calendar-days button[aria-current="date"] .calendar-dots .water { background: #24584e; }
.medora #calendar-days button[aria-current="date"] .calendar-dots .visit { background: #763858; }
.calendar-key { display: flex; flex-wrap: wrap; gap: .2rem .9rem; margin: .55rem .12rem 0; padding: .55rem .2rem .05rem; border-block-start: 1px solid var(--outline); list-style: none; }
.calendar-key li { display: flex; align-items: center; gap: .3rem; color: var(--muted); font-size: .74rem; }
.medora #calendar-activity > h2 { background: var(--stage); padding: .5rem .72rem; border-radius: .85rem; }
.medora #calendar-activity > article { margin-block: .45rem; }
.medora #report-dates { margin-block: .6rem; color: var(--muted); }
.report-cards { display: grid; gap: .8rem; }
.medora .report-card { margin: 0; padding: .85rem 1rem; }
.report-card-heading { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.report-card-heading h2 { margin: 0; }
.medora .report-card-heading svg {
  inline-size: 1.25rem;
  block-size: 1.25rem;
  padding: .48rem;
  border-radius: .8rem;
  background: color-mix(in srgb, var(--panel) 62%, transparent);
}
.medora #report-average { font-size: .8rem; margin: .32rem 0 0; }
.report-number { line-height: 1.28; font-size: .85rem; }
.report-number strong, #report-dose-number { font-size: clamp(1.8rem, 8vw, 2.5rem); font-weight: 850; font-variant-numeric: tabular-nums; }
#report-dose-number { margin-block-start: .45rem; }
.report-plot { position: relative; margin-block-start: .5rem; }
.medora #report-chart { block-size: 8.8rem; margin: 0; padding-inline: .2rem; }
.medora #report-chart > div {
  border-radius: .36rem .36rem 0 0;
  background: linear-gradient(var(--water-ink), color-mix(in srgb, var(--water-ink) 60%, var(--water)));
}
.medora .report-empty { position: absolute; inset: 35% 0 auto; text-align: center; font-size: .82rem; }
.medora #report-chart-dates { font-size: .75rem; }
.medora .report-goal { display: flex; align-items: center; gap: .35rem; font-size: .74rem; }
.report-goal > span:first-child { inline-size: 1rem; border-block-start: 1px dashed currentColor; }
.dose-progress { display: block; inline-size: 100%; block-size: .55rem; margin: .55rem 0; border: 0; border-radius: 100vw; overflow: hidden; appearance: none; -webkit-appearance: none; color: var(--medicine-ink); background: var(--panel); }
.dose-progress::-webkit-progress-bar { background: var(--panel); }
.dose-progress::-webkit-progress-value { background: var(--medicine-ink); border-radius: 100vw; }
.dose-progress::-moz-progress-bar { background: var(--medicine-ink); border-radius: 100vw; }
.medora #report-doses { font-size: .87rem; }

.medora .wizard-visual {
  position: relative;
  isolation: isolate;
  min-block-size: 9.1rem;
  padding: .7rem;
  display: flex;
  align-items: flex-start;
  border-radius: 1.35rem;
  overflow: hidden;
  background: radial-gradient(ellipse at 70% 0, #e2a1e76b, transparent 66%), linear-gradient(135deg, var(--cover-shade), var(--cover-light));
  color: var(--cover-text);
}
.medora .wizard-visual > p { max-inline-size: 47%; margin: .5rem .3rem; font-size: clamp(.96rem, 3.7vw, 1.35rem); line-height: 1.3; font-weight: 800; }
.wizard-visual img { position: absolute; z-index: -1; inset-inline-end: -8%; inset-block-end: -.32rem; inline-size: 74%; max-inline-size: 21rem; height: auto; opacity: .65; }
html[dir="rtl"] .wizard-visual img { transform: scaleX(-1); }
.medora .wizard-visual .wizard-banner { position: absolute; inset: auto auto -.35rem 0; inline-size: 43%; }
html[dir="ltr"] .medora .wizard-visual .wizard-banner { inset: auto 0 -.35rem auto; }
.medora .wizard-visual .medication-banner { background: transparent; color: var(--ink); }
.medora .wizard-visual .medication-banner span { inset-inline-start: .12rem; inset-block-end: .72rem; }
.medora .wizard-visual .medication-banner .medication-badge { inline-size: 5.8rem; block-size: 5.8rem; }
.medora #editor .wizard-steps { background: var(--stage); border-radius: .95rem; padding: .2rem; }
.medora #editor .wizard-steps li { border: 0; }
.medora #editor .wizard-steps li[aria-current="step"] { background: var(--panel); color: var(--action); box-shadow: 0 .12rem .35rem var(--glass-shadow); }
.medora #editor .wizard-steps li[data-complete="true"] { background: transparent; color: var(--ok); }
.medora #editor-next { background: var(--mint); color: var(--mint-ink); border-color: var(--mint); }
.medora .settings-dialog .sheet-header { border-radius: 0 0 1.25rem 1.25rem; padding: .48rem .75rem; }
.medora #settings-subtitle { margin-block: .14rem 0; color: var(--muted); }
.medora #settings-home h3 { margin: .9rem .25rem .35rem; color: var(--muted); font-size: .85rem; }
.medora .settings-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(3.8rem, 22%, 6.25rem);
  align-items: center;
  gap: .65rem;
  inline-size: 100%;
  padding: .85rem;
  border: 1px solid var(--glass-glint);
  border-radius: 1.35rem;
  background: radial-gradient(ellipse at 75% 0, var(--cover-light), transparent 82%), var(--cover-shade);
  color: var(--cover-text);
  text-align: start;
  box-shadow: 0 .35rem 1rem var(--glass-shadow);
}
.settings-hero-copy { display: grid; justify-items: start; gap: .26rem; }
.settings-hero-copy strong { font-size: 1.18rem; line-height: 1.3; }
.settings-hero-copy small { font-weight: 400; opacity: .9; }
.settings-state { border-radius: 100vw; background: #fff2; padding: .1rem .55rem; font-size: .78rem; }
.settings-state[data-enabled="true"] { background: var(--mint); color: var(--mint-ink); }
.settings-hero-art {
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  border-radius: 36%;
  background: linear-gradient(145deg, #fff6, #fff1);
  box-shadow: inset 0 0 0 1px #fff6, 0 .4rem .9rem #15102b42;
  transform: rotate(-12deg);
}
.medora .settings-hero-art svg { inline-size: 56%; block-size: auto; aspect-ratio: 1; stroke-width: 1.4; }
.settings-group { border: 1px solid var(--outline); border-radius: 1.2rem; background: var(--panel); }
.medora .settings-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .65rem;
  inline-size: 100%;
  min-block-size: 3.55rem;
  padding: .42rem .65rem;
  border: 0;
  background: transparent;
  color: var(--ink);
  text-align: start;
}
.medora .settings-row + .settings-row { border-block-start: 1px solid var(--outline); border-start-start-radius: 0; border-start-end-radius: 0; }
.medora .settings-row small { display: block; color: var(--muted); font-weight: 400; overflow-wrap: anywhere; }
.settings-icon { display: grid; place-items: center; inline-size: 2.35rem; aspect-ratio: 1; border-radius: .82rem; background: var(--dock-active); color: var(--action); }
.water-row .settings-icon { background: var(--water); color: var(--water-ink); }
.medicine-row .settings-icon { background: var(--medicine); color: var(--medicine-ink); }
.visit-row .settings-icon { background: var(--visit); color: var(--visit-ink); }
.medora .settings-icon svg { inline-size: 1.15rem; block-size: 1.15rem; }
.medora svg.settings-chevron { inline-size: .95rem; block-size: .95rem; color: var(--muted); transform: scaleX(-1); }
html[dir="ltr"] .medora svg.settings-chevron { transform: none; }
.medora .settings-panel { margin: 0; }
.medora .settings-panel form { display: grid; gap: .55rem; padding: .8rem; border-radius: 1.2rem; }
.medora .settings-panel form > label { margin-block: 0; }
.medora .settings-panel :is(input:not([type]), input[type="password"], select) { display: block; inline-size: 100%; margin-block-start: .24rem; }
.medora .settings-panel .settings-switch { display: flex; padding: .35rem .55rem; border-radius: .9rem; background: var(--water); }
.settings-time-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.medora .settings-panel .picker-field { background: var(--field); padding-inline: .45rem; }
.medora .settings-callout { padding: .7rem .8rem; border-radius: 1.15rem; border: 1px solid var(--outline); background: var(--stage); }
.medora .settings-callout h3 { margin: 0; }
.medora #water-pause-card { margin-block-start: .65rem; background: var(--water); color: var(--water-ink); }
.medora #water-pause-card .quiet { color: inherit; }
.settings-push-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-block: .65rem; }
.settings-push-actions button { flex: 1 1 auto; }
.medora .settings-message { padding: .55rem .7rem; background: var(--stage); border-radius: .8rem; overflow-wrap: anywhere; font-size: .88rem; }
.medora #settings-status { flex: none; margin: 0 .75rem .65rem; }
.medora .settings-message:empty, .medora #push-delivery:empty, .medora #android-restore-status:empty { display: none; }
.medora .settings-message[data-state="error"], .medora .settings-restore-note { color: var(--error); background: var(--error-bg); }
.medora .settings-message[data-state="success"] { color: var(--ok); background: var(--ok-bg); }
.medora .settings-restore-note { border-radius: .85rem; padding: .55rem .7rem; font-size: .88rem; }
.medora :is(.settings-themes, .settings-choices) { display: grid; gap: .35rem; padding: 0; border: 0; background: transparent; }
.settings-themes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.settings-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.medora :is(.settings-themes, .settings-choices) legend { margin-block-end: .25rem; font-weight: 700; }
.medora :is(.settings-themes, .settings-choices) label {
  position: relative;
  display: grid;
  gap: .3rem;
  place-items: center;
  min-block-size: 2.75rem;
  margin: 0;
  padding: .36rem;
  border: 1px solid var(--outline);
  border-radius: .85rem;
  background: var(--field);
  text-align: center;
  font-size: .84rem;
  cursor: pointer;
}
.medora :is(.settings-themes, .settings-choices) input { position: absolute; inline-size: 1px; block-size: 1px; min-block-size: 0; padding: 0; clip-path: inset(50%); }
.medora :is(.settings-themes, .settings-choices) label:has(:checked) { border-color: var(--action); background: var(--dock-active); color: var(--action); }
.medora :is(.settings-themes, .settings-choices) label:has(:focus-visible) { outline: .15rem solid var(--action); outline-offset: .12rem; }
.theme-sample { display: grid; place-items: center; inline-size: 100%; block-size: 2.4rem; border-radius: .55rem; background: #e9e4f7; }
.theme-sample::before { content: ""; inline-size: 59%; block-size: .75rem; border-radius: .25rem; background: #fefcff; box-shadow: 0 .45rem 0 -.22rem #9482cc; }
.theme-sample[data-theme-sample="system"] { background: linear-gradient(135deg, #e9e4f7 50%, #304342 50%); }
.theme-sample[data-theme-sample="dark"] { background: #263735; }
.theme-sample[data-theme-sample="dark"]::before { background: #455b54; box-shadow: 0 .45rem 0 -.22rem #c0d89f; }

.medora .welcome {
  background: radial-gradient(ellipse at 68% 24%, #eab5f748, transparent 60%), linear-gradient(147deg, var(--cover-shade), var(--cover-light));
  padding-left: max(1.25rem, env(safe-area-inset-left));
  padding-right: max(1.25rem, env(safe-area-inset-right));
}
.medora .welcome .intro-landscape { display: none; }
.welcome-top { display: flex; align-items: center; justify-content: space-between; }
.medora .welcome-top .brand-mark { background: #fff2; border: 1px solid #fff5; inline-size: 2.65rem; block-size: 2.65rem; }
.medora .welcome-top button { margin: 0; padding-inline: .75rem; background: #fff2; color: white; border-color: #fff5; }
.medora .welcome-art { display: block; inline-size: min(100%, 30rem); block-size: min(37dvh, 18rem); margin: .45rem auto 0; object-fit: contain; }
.medora .welcome h1 { font-size: 2.6rem; line-height: 1.14; }
.medora .welcome h2 { margin-block: .5rem; }
.medora .welcome .intro-content > .block-action { margin-block-start: 1.25rem; background: var(--mint); color: var(--mint-ink); }

@media (min-width: 42rem) {
  .story-copy { align-self: center; padding-inline-start: 1rem; }
  .medora .today-story .story-art { max-block-size: 13.2rem; margin-block: -.5rem; }
  .medora .daily-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    grid-template-areas: "water water" "daily reminders";
    gap: .7rem 1rem;
    align-items: start;
  }
  .medora .daily-sheet:has(#today-water[hidden]) { grid-template-areas: "daily daily" "reminders reminders"; }
  .daily-main { grid-area: daily; }
  .medora #today-water { grid-area: water; margin-block-end: 0; }
  .medora #today-reminders { grid-area: reminders; margin: 0; }
  #plans { grid-auto-columns: min(48%, 23rem); }
  #visits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #visits > :is(h2, .visit-empty, .visit-featured) { grid-column: 1 / -1; }
  .medora #visits .visit-featured {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    gap: .95rem;
    min-block-size: 0;
  }
  .medora #visits .visit-featured .visit-banner { block-size: auto; min-block-size: 10rem; margin: 0; }
  .report-cards { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
  #calendar-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
  .medora #calendar-panel > section { margin-block: 0; }
}
@media (max-width: 360px) {
  .medora .app-content {
    padding-left: max(.7rem, env(safe-area-inset-left));
    padding-right: max(.7rem, env(safe-area-inset-right));
  }
  .medora .today-story { padding-inline: .85rem; }
  .medora .story-copy h2 { font-size: 1.64rem; }
  .medora .dock button { font-size: .68rem; }
  .medora .header-tools { gap: .28rem; }
  .medora #visit-add { font-size: .875rem; }
}
.medora #today-dates .day-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.medora #today-dates .day-week .calendar-dots { gap: .13rem; }
.medora #today-dates .day-week .calendar-dots i { inline-size: .2rem; block-size: .2rem; }
.medora .cabinet-search {
  display: flex;
  gap: .52rem;
  align-items: center;
  padding-inline: .72rem .28rem;
  margin: 0 0 .5rem;
  border: 1px solid var(--outline);
  border-radius: 1rem;
  color: var(--action);
  background: var(--panel);
}
.medora .cabinet-search input { flex: 1; min-inline-size: 0; max-inline-size: none; min-block-size: 2.65rem; border: 0; background: transparent; }
.medora .cabinet-search svg { inline-size: 1.15rem; block-size: 1.15rem; }
.medora #editor:not([data-step="0"]) .wizard-visual { display: none; }
.medora #medication-dialog { scroll-padding-block-end: 5.5rem; }
.editor-footer {
  position: sticky;
  inset-block-end: 0;
  z-index: 1;
  padding-block: .4rem .55rem;
  border-radius: .85rem .85rem 0 0;
  background: color-mix(in srgb, var(--page) 90%, transparent);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.medora .plan-mode { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .24rem; }
.medora .plan-mode :is(legend, input), .medora .phase .weekdays input {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  min-block-size: 0;
  padding: 0;
  clip-path: inset(50%);
}
.medora .plan-mode label, .medora .phase .weekdays label {
  display: grid;
  place-items: center;
  margin: 0;
  padding: .22rem .52rem;
  border-radius: .8rem;
  min-block-size: 2.5rem;
  color: var(--muted);
  cursor: pointer;
}
.medora :is(.plan-mode, .phase .weekdays) label:has(:checked) {
  background: var(--dock-active);
  color: var(--action);
  font-weight: 750;
}
.medora :is(.plan-mode, .phase .weekdays) label:has(:focus-visible) { outline: .15rem solid var(--action); outline-offset: .12rem; }
.medora .phase { margin: .65rem 0; padding: .65rem; border-radius: 1.2rem; background: var(--panel); }
.medora .phase legend { padding-inline: .4rem; color: var(--action); font-weight: 800; }
.medora .phase select { display: block; inline-size: 100%; }
.medora .phase :is(.plan-dates, .slot-fields) label { margin-block: 0 .2rem; font-size: .86rem; color: var(--muted); }
.medora .phase :is(.plan-dates, .slot-fields) .picker-field { padding-inline: .25rem; border-radius: .9rem; background: var(--field); }
.medora .phase .weekdays { gap: .25rem; align-items: stretch; }
.medora .phase .weekdays label { min-block-size: 2.25rem; border: 1px solid var(--outline); font-size: .81rem; }
.medora .weekly-plan > label { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.medora .weekly-plan .interval { inline-size: 5rem; }
.exact-days { display: flex; flex-wrap: wrap; gap: .28rem; margin-block: .4rem; }
.medora .exact-days button { min-block-size: 2.5rem; font-size: .8rem; }
.doses-heading { display: flex; justify-content: space-between; align-items: center; gap: .4rem; margin-block: .3rem .05rem; }
.medora .doses-heading h4 { margin: 0; }
.medora .dose-unit-link { font-size: .82rem; text-align: end; overflow-wrap: anywhere; }
.medora .slot {
  padding: .5rem .6rem;
  margin-block: .4rem;
  border: 1px solid var(--outline);
  border-radius: 1rem;
  background: var(--stage);
}
.slot-heading { display: flex; justify-content: space-between; align-items: center; min-block-size: 2.15rem; gap: .4rem; }
.medora .slot-heading button { min-block-size: 2.3rem; font-size: .76rem; }
.medora .slot .amount { inline-size: 100%; }
.dose-quick-values { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .25rem; margin-block: .25rem; }
.medora .dose-quick-values button { min-block-size: 2.35rem; min-inline-size: 0; padding: .1rem; border-radius: .7rem; }
.medora .phase .buttons { margin-block-start: .45rem; }
.medora #editor-review .review-upcoming { padding: .55rem .65rem; border-radius: .85rem; background: var(--mint); color: var(--mint-ink); }
.medora #editor-review ol { display: grid; gap: .4rem; padding: 0; list-style: none; }
.medora #editor-review li { padding: .5rem .65rem; border-radius: .85rem; background: var(--stage); }
.medora #editor-review h5 { margin: 0 0 .25rem; font-size: .9rem; color: var(--action); }
.medora #editor [aria-invalid="true"] { border-color: var(--error); }
@media (max-width: 350px) {
  .medora .slot-fields { gap: .35rem; }
  .medora .slot-fields .picker-field { min-block-size: 2.75rem; }
}