@font-face {
  font-family: Medora Vazirmatn;
  src: url("/vazirmatn.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

.medora {
  font-family: Medora Vazirmatn, system-ui, sans-serif;
  color-scheme: light;
  --page: #f5f0f8;
  --panel: #fbf7fd;
  --field: #fffaff;
  --ink: #291f33;
  --muted: #655872;
  --outline: #ded1eb;
  --action: #583583;
  --on-action: #fff;
  --water: #dcefe9;
  --water-ink: #24584e;
  --medicine: #fcf4eb;
  --medicine-ink: #623d23;
  --visit: #f5e5ee;
  --visit-ink: #763858;
  --hero-deep: #28173c;
  --hero-light: #694283;
  --hero-edge: #8a679d;
  --glass: #fff9ff;
  --dock-active: #e9dff5;
  --lime: #e1f5a1;
  --lime-ink: #2e3a18;
  --cast: #38204324;
  --ok: #166534;
  --ok-bg: #dcf4e3;
  --warn: #92400e;
  --error: #b42318;
  --error-bg: #fde4e1;
  background: var(--page);
  color: var(--ink);
}
@media (prefers-color-scheme: dark) {
  .medora:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #151b20;
    --panel: #222b32;
    --field: #1a2228;
    --ink: #f1f5f1;
    --muted: #b8c3c4;
    --outline: #414f55;
    --action: #d0e99d;
    --on-action: #1c2a17;
    --water: #243e3c;
    --water-ink: #bcf0df;
    --medicine: #302b24;
    --medicine-ink: #f0dbc4;
    --visit: #34323a;
    --visit-ink: #f3d3d9;
    --hero-deep: #172228;
    --hero-light: #334b4d;
    --hero-edge: #536766;
    --glass: #253036;
    --dock-active: #35463e;
    --lime: #d8ec9f;
    --lime-ink: #243016;
    --cast: #0008;
    --ok: #8ae0ac;
    --ok-bg: #234635;
    --warn: #ffd18a;
    --error: #ffb4ab;
    --error-bg: #552e2b;
  }
}
.medora [hidden] { display: none !important; }
.icon-library { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }
.medora svg:not(.icon-library) { inline-size: 1.5rem; block-size: 1.5rem; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.medora svg:has(use[href="#i-mark"]) { stroke-width: 0; }
.medora .app-content { max-inline-size: 43rem; padding: .85rem max(1rem, env(safe-area-inset-right)) calc(7rem + env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left)); }
.medora section { border: 0; padding: 0; margin-block: .85rem; }
.medora p { margin-block: .35rem; overflow-wrap: anywhere; }
.medora .quiet, .medora .empty { color: var(--muted); font-size: .9rem; }
.day-controls, .feature-head, .section-heading, .feature-label { display: flex; align-items: center; gap: .6rem; }
.day-controls, .feature-head, .section-heading { justify-content: space-between; }
.day-arrow { flex: none; }
.date-field { position: relative; display: flex; align-items: center; justify-content: center; gap: .45rem; min-inline-size: 0; min-block-size: 3rem; padding-inline: .65rem; border: 1px solid var(--outline); border-radius: .9rem; background: var(--field); text-align: center; font-size: .875rem; font-weight: 650; }
.date-field:focus-within { outline: .15rem solid var(--action); outline-offset: .15rem; }
.medora .feature, .medora article, .medora form, .medora fieldset { padding: .9rem; border: 1px solid var(--outline); border-radius: 1.2rem; background: var(--panel); min-inline-size: 0; }
.medora .feature { border-start-start-radius: 1.75rem; border-end-end-radius: 1.75rem; }
.medora .water { background: var(--water); color: var(--water-ink); }
.medora .medicine { background: var(--medicine); color: var(--medicine-ink); }
.medora .visit { background: var(--visit); color: var(--visit-ink); }
.medora .water .quiet { color: inherit; }
.progress-ring { display: grid; flex: none; place-items: center; inline-size: clamp(3.5rem, 20vw, 5rem); aspect-ratio: 1; border-radius: 50%; background: conic-gradient(var(--water-ink) calc(var(--percent, 0) * 1%), var(--field) 0); }
.progress-ring span { display: grid; place-items: center; inline-size: 76%; aspect-ratio: 1; background: var(--water); border-radius: 50%; font-size: .9rem; font-weight: 700; }
.medora button, .medora input, .medora textarea, .medora select { min-block-size: 3rem; border-color: var(--outline); border-radius: .9rem; color: var(--ink); font: inherit; }
.medora input, .medora select, .medora textarea { background: var(--field); border: 1px solid var(--outline); padding: .5rem .7rem; box-sizing: border-box; }
.medora textarea { display: block; inline-size: 100%; resize: vertical; }
.medora button { background: var(--action); border-color: var(--action); color: var(--on-action); font-weight: 650; }
.medora button.secondary { background: var(--field); border-color: var(--outline); color: var(--ink); }
.medora :focus-visible { outline: .15rem solid var(--action); outline-offset: .15rem; }
.medora .empty { padding: .85rem; border: 1px dashed var(--outline); border-radius: 1rem; }
.medora .badge { display: inline-block; padding: .15rem .65rem; border-radius: 100vw; color: var(--warn); background: var(--field); font-size: .875rem; }
.medora .badge[data-status="taken"] { color: var(--ok); background: var(--ok-bg); }
.medora .badge[data-status="skipped"] { color: var(--error); background: var(--error-bg); }
.medora [data-warning="true"] { color: var(--warn); font-weight: 700; }
.medora .app-status { min-block-size: 1.2rem; color: var(--muted); }
.medora .dock { position: fixed; z-index: 2; left: max(.55rem, env(safe-area-inset-left)); right: max(.55rem, env(safe-area-inset-right)); inset-block-end: max(.45rem, env(safe-area-inset-bottom)); max-inline-size: 41rem; margin-inline: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); background: var(--panel); border: 1px solid var(--outline); border-radius: 1.55rem; padding: .25rem; box-shadow: 0 .38rem 1.4rem var(--cast); }
.medora .dock button { background: transparent; border: 0; color: var(--ink); padding: .27rem .1rem; font-size: .8rem; line-height: 1.3; display: grid; place-items: center; gap: .2rem; overflow-wrap: anywhere; }
.medora .fields, .medora .weekdays { display: flex; flex-wrap: wrap; align-items: end; gap: .55rem; margin-block: .6rem; }
.medora .fields label { flex: 1 1 9rem; min-inline-size: 0; }
.medora .fields input { inline-size: 100%; }
.medora .weekdays label { display: flex; align-items: center; gap: .28rem; min-block-size: 3rem; }
.medora .weekdays input { inline-size: 1.08rem; min-block-size: auto; }
.medora form label { display: block; margin-block: .35rem; }
@media (max-width: 340px) {
  .medora .dock button { font-size: .72rem; }
  .section-heading { flex-wrap: wrap; }
}

.medora[data-theme="dark"] {
  color-scheme: dark;
  --page: #151b20;
  --panel: #222b32;
  --field: #1a2228;
  --ink: #f1f5f1;
  --muted: #b8c3c4;
  --outline: #414f55;
  --action: #d0e99d;
  --on-action: #1c2a17;
  --water: #243e3c;
  --water-ink: #bcf0df;
  --medicine: #302b24;
  --medicine-ink: #f0dbc4;
  --visit: #34323a;
  --visit-ink: #f3d3d9;
  --hero-deep: #172228;
  --hero-light: #334b4d;
  --hero-edge: #536766;
  --glass: #253036;
  --dock-active: #35463e;
  --lime: #d8ec9f;
  --lime-ink: #243016;
  --cast: #0008;
  --ok: #8ae0ac;
  --ok-bg: #234635;
  --warn: #ffd18a;
  --error: #ffb4ab;
  --error-bg: #552e2b;
}

.medora h2 { font-size: 1.1rem; }
.medora h3 { margin-block: 0 .18rem; font-size: 1rem; }
.medora .app-content { padding-block-start: .55rem; }
.app-bar { background: var(--page); color: var(--ink); border-radius: 0 0 1.25rem 1.25rem; overflow: hidden; padding-block-start: env(safe-area-inset-top); }
.app-bar-inner { display: flex; align-items: center; position: relative; box-sizing: border-box; max-inline-size: 43rem; margin-inline: auto; min-block-size: 3.5rem; padding: .55rem .85rem; gap: .45rem; }
.brand-mark { display: grid; place-items: center; flex: none; inline-size: 1.9rem; block-size: 1.9rem; color: var(--action); }
.medora .brand-mark svg { inline-size: 1.8rem; block-size: 1.8rem; }
.medora h1 { font-size: 1.3rem; margin: 0; }
.medora .app-bar p { margin: 0; color: var(--muted); font-size: .76rem; }
.medora .app-bar p:empty { display: none; }
.medora .icon-button, .medora .text-button { background: transparent; border: 0; color: inherit; }
.medora .icon-button { display: inline-grid; place-items: center; padding: .3rem; min-inline-size: 2.75rem; min-block-size: 2.75rem; }
.medora .text-button { color: var(--action); min-block-size: 2.75rem; padding-inline: .3rem; }
.medora .day-controls { flex-wrap: wrap; gap: .3rem; border: 1px solid var(--outline); background: var(--panel); border-radius: 1rem; padding: .35rem .65rem; margin-block: .05rem .45rem; }
.medora .date-field { background: transparent; border: 0; flex: 1; color: var(--action); }
.medora .date-field svg { inline-size: 1.05rem; block-size: 1.05rem; }
.medora button.day-arrow { background: transparent; border: 0; min-block-size: 2.75rem; min-inline-size: 2.75rem; font-size: 1.55rem; padding: 0; }
.day-week, .calendar-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .16rem; text-align: center; }
.day-week { inline-size: 100%; }
.medora .day-week button, .medora .calendar-grid button { display: grid; align-content: center; gap: .1rem; border: 0; background: transparent; color: var(--ink); min-block-size: 2.85rem; padding: .1rem; font-size: .84rem; line-height: 1.35; }
.day-week button span { font-size: .74rem; font-weight: 400; }
.medora .day-week button[aria-current="date"] { background: var(--action); color: var(--on-action); }
.single-date:not(.compact-day) .day-arrow, .single-date .day-week { display: none; }
.medora .feature, .medora article { margin-block: .45rem; border-radius: 1.2rem; padding: .65rem .75rem; }
.medora .empty { background: var(--panel); border-style: solid; }
.medora .water-info { flex: 1; min-inline-size: 0; }
.medora .amount-line { font-size: .94rem; font-weight: 550; }
.medora .amount-line strong { font-size: 1.14rem; }
.medora svg.water-glass { inline-size: 3.6rem; block-size: 4.4rem; }
.medora .water-summary .water-glass { inline-size: 4.65rem; block-size: 5.5rem; }
.glass-water { fill: url(#glass-water-fill); stroke: none; }
.medora .water-progress { display: block; inline-size: 100%; block-size: .25rem; border: 0; border-radius: 1rem; margin-block: .38rem; background: #075e8a26; color: var(--water-ink); appearance: none; -webkit-appearance: none; }
.water-progress::-webkit-progress-bar { background: #075e8a26; border-radius: 1rem; }
.water-progress::-webkit-progress-value { background: var(--water-ink); border-radius: 1rem; }
.water-progress::-moz-progress-bar { background: var(--water-ink); border-radius: 1rem; }
.medora .block-action { display: block; inline-size: 100%; margin-block-start: .35rem; }
.action-pair, .water-quick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }
.water-quick { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-block: .45rem; }
.medora .water-quick button { background: transparent; color: inherit; border-color: transparent; padding-inline: .2rem; }
.water-quick button b, .water-quick button small { display: block; }
.medora .water-quick button[data-water-preset] { border-color: var(--outline); }
.medora .water-quick button[aria-pressed="true"] { background: var(--visit); border-color: var(--visit); }
.medora .timeline { margin-block-start: .45rem; }
.medora .dock { inset-inline: max(.5rem, env(safe-area-inset-right)) max(.5rem, env(safe-area-inset-left)); padding: .15rem .3rem; border-radius: 1.6rem; }
.medora .dock button { min-block-size: 3.8rem; grid-template-rows: 2.25rem auto; gap: .08rem; color: var(--muted); }
.medora .dock button svg { inline-size: 1.15rem; block-size: 1.15rem; }
.medora .dock button[aria-current="page"] { background: transparent; color: var(--action); font-weight: 750; }
.dock-mark { display: grid; place-items: center; border-radius: 50%; inline-size: 2.3rem; block-size: 2.3rem; color: var(--ink); }
.medora .dock .dock-mark svg { inline-size: 1.55rem; block-size: 1.55rem; }
.dock [aria-current="page"] .dock-mark { background: var(--action); color: var(--on-action); }
.medora .progress-ring { inline-size: 4.5rem; background: conic-gradient(var(--action) calc(var(--percent, 0) * 1%), var(--outline) 0); }
.medora .progress-ring span { background: var(--panel); color: var(--action); }
.medora #plans-heading button { border-radius: 5rem; }
.medora #med-day-count { font-size: 1.2rem; color: var(--action); }
.dose-card { position: relative; }
.dose-header { display: flex; align-items: center; gap: .6rem; padding-inline-end: 2.3rem; }
.dose-header p { color: var(--muted); font-size: .82rem; }
.dose-result { display: flex; align-items: center; flex-wrap: wrap; gap: .38rem; }
.medora .dose-card > button { display: block; margin-inline-start: auto; min-block-size: 2.75rem; font-size: .83rem; }
.dose-options summary { position: absolute; inset-inline-end: .4rem; inset-block-start: .3rem; min-inline-size: 2.6rem; min-block-size: 2.6rem; text-align: center; align-content: center; font-size: 1.35rem; list-style: none; }
.dose-options summary::-webkit-details-marker { display: none; }
.dose-options[open] { margin-block: .5rem; }
.medora .treatment-name { flex: 1; font-weight: 750; text-align: start; }
.treatment p { font-size: .85rem; }
.medora input[role="switch"] { appearance: none; inline-size: 2.45rem; min-block-size: 1.4rem; padding: .13rem; margin: .35rem; border-radius: 2rem; background: var(--outline); cursor: pointer; }
.medora input[role="switch"]::before { content: ""; display: block; block-size: 1rem; inline-size: 1rem; border-radius: 50%; background: var(--field); }
.medora input[role="switch"]:checked { background: var(--action); }
.medora input[role="switch"]:checked::before { margin-inline-start: auto; }
.medora [data-color="green"] { background: var(--panel); color: var(--ink); }
.medora [data-color="blue"] { background: color-mix(in srgb, #8ecfe8 25%, var(--panel)); color: var(--ink); }
.medora [data-color="purple"] { background: color-mix(in srgb, #b8a4e8 24%, var(--panel)); color: var(--ink); }
.medora [data-color="rose"] { background: var(--error-bg); color: var(--error); }
.segmented { display: flex; gap: .15rem; background: var(--panel); border-radius: 1rem; }
.medora .segmented button { background: transparent; border: 0; color: var(--muted); flex: 1 1 0; padding-inline: .15rem; font-size: .86rem; }
.medora .segmented button[aria-pressed="true"], .medora .calendar-grid button[aria-current="date"] { color: var(--ink); background: var(--water); }
.medora .visit .buttons { margin-block-start: .3rem; gap: .2rem; }
.medora .visit button.secondary { background: transparent; border: 0; color: var(--action); }
.medora .insights-tabs { display: flex; gap: .45rem; }
.medora .insights-tabs button { border-radius: 2rem; min-block-size: 2.75rem; background: transparent; border-color: var(--outline); color: var(--ink); font-size: .85rem; }
.medora .insights-tabs button[aria-pressed="true"] { background: var(--visit); color: var(--visit-ink); border-color: var(--visit); }
.calendar-head { margin-block-end: .5rem; }
.reverse svg { transform: scaleX(-1); }
.calendar-grid { row-gap: .3rem; }
.medora .calendar-grid button { min-block-size: 3rem; }
.calendar-dots { display: flex; justify-content: center; gap: .2rem; min-block-size: .25rem; }
.medora .calendar-dots i { inline-size: .25rem; block-size: .25rem; border-radius: 50%; background: var(--action); }
.medora .calendar-dots .water { background: var(--water-ink); }
.medora .calendar-dots .medicine { background: var(--medicine-ink); }
.medora .calendar-dots .visit { background: var(--visit-ink); }
.medora .report-chart { position: relative; display: flex; gap: .14rem; align-items: end; block-size: 10rem; margin-block: .65rem .25rem; border-block-end: 1px solid var(--water-ink); direction: ltr; }
.report-chart::after { content: ""; position: absolute; inset-inline: 0; inset-block-end: var(--goal); border-block-start: 1px dashed currentColor; opacity: .4; }
.report-chart > div { flex: 1; block-size: var(--bar); border-radius: .22rem .22rem 0 0; background: var(--water-ink); }
.medora #report-chart-dates { direction: ltr; }
.medora dialog { box-sizing: border-box; color: var(--ink); background: var(--page); padding: 0; max-inline-size: min(calc(100% - 1rem), 36rem); border: 0; border-radius: 1.5rem; }
.medora dialog::backdrop { background: #131720ae; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.medora:has(dialog[open]) { overflow: hidden; }
.medora dialog.sheet { inset-block: auto 0; margin: 0 auto; inline-size: min(100%, 36rem); max-inline-size: 100%; max-block-size: 93vh; max-block-size: 93dvh; border-radius: 1.65rem 1.65rem 0 0; padding-block: 1.55rem env(safe-area-inset-bottom); padding-left: max(1rem, env(safe-area-inset-left)); padding-right: max(1rem, env(safe-area-inset-right)); overscroll-behavior: contain; }
.sheet::before { content: ""; display: block; inline-size: 2rem; block-size: .2rem; border-radius: 1rem; margin: -.5rem auto .95rem; background: var(--muted); }
.medora .settings-dialog, .medora #account-dialog {
  position: fixed;
  --dialog-height: var(--visible-height, 100dvh);
  --dialog-limit: 42rem;
  inset-block: calc(var(--visible-top, 0px) + max(.5rem, (var(--dialog-height) - var(--dialog-limit)) / 2)) auto;
  margin: 0 auto;
  inline-size: min(calc(100% - 1rem), 31rem);
  max-block-size: min(var(--dialog-limit), calc(var(--dialog-height) - 1rem));
  border-radius: 1.5rem;
}
.medora #account-dialog {
  --dialog-limit: 29rem;
}
.medora .settings-dialog {
  overflow: hidden;
}
.medora .settings-dialog[open] { display: flex; flex-direction: column; }
.settings-dialog .sheet-header { flex: none; }
.medora .settings-dialog .sheet-body { padding: .75rem; min-block-size: 0; overflow: auto; overscroll-behavior: contain; }
.medora .settings-dialog :is(input, select) { max-inline-size: 100%; }
.medora .confirm-dialog { inline-size: min(calc(100% - 1.5rem), 25rem); }
.medora .confirm-dialog form { padding: 1rem; border: 0; background: transparent; }
.confirm-dialog .action-pair { margin-block-start: .75rem; }
.medora button.danger-link { color: var(--error); }
.medora button.danger-button { background: var(--error); color: var(--page); border-color: var(--error); }
.medora .sheet-form { border: 0; border-radius: 0; background: transparent; padding: 0; }
.sheet-header { display: flex; align-items: center; gap: .45rem; padding: .28rem .65rem; background: var(--page); color: var(--ink); border-radius: 0 0 1.2rem 1.2rem; }
.sheet-header > svg { color: var(--action); }
.sheet-header h2 { margin: 0; font-size: 1.25rem; }
.sheet-header p { font-size: .8rem; }
.medora .sheet-header .icon-button { margin-inline-start: auto; }
.sheet-body { padding-block: .65rem 1rem; }
.medora .sheet-body .fields label { flex-basis: 7rem; }
.medora .editor-field { padding: .4rem .65rem; margin-block: .6rem; border-radius: .9rem; border: 1px solid var(--outline); background: var(--field); color: var(--muted); }
.medora .editor-field input, .medora .editor-field textarea { padding: 0; min-block-size: 1.8rem; border: 0; border-radius: 0; inline-size: 100%; background: transparent; }
.medora :is(.editor-field, .cabinet-search):has(:is(input, textarea):focus) { outline: .15rem solid var(--action); outline-offset: .15rem; }
.medora :is(.editor-field, .cabinet-search) :is(input, textarea):focus-visible { outline: none; }
.editor-options { border-radius: 1rem; padding: .55rem .75rem; background: var(--panel); margin-block: .5rem; }
.medora summary { cursor: pointer; }
.editor-options > summary { min-block-size: 2.75rem; align-content: center; }
.medora .field-error { color: var(--error); }
.field-error:empty { display: none; }
.medora .dose-options[open] > summary { color: var(--action); background: var(--field); border-radius: .8rem; }
.medora .entry-row { display: grid; grid-template-columns: 1fr auto auto; gap: .4rem; align-items: center; }
.medora .entry-row button, .medora .visit .buttons button { min-block-size: 2.75rem; min-inline-size: 2.75rem; }
.medora .entry-row button { color: var(--ink); padding-inline: .3rem; }
.medora button.date-field { background: transparent; border: 0; color: var(--action); }
.medora .value-picker { max-inline-size: 100%; }
.value-picker h2 { text-align: center; margin-block-start: 0; }
.medora .value-picker .calendar-grid { row-gap: .12rem; }
.medora .value-picker .calendar-grid button[aria-pressed="true"] { background: var(--action); color: var(--on-action); border-radius: 50%; }
.medora .value-picker .calendar-grid button { min-block-size: clamp(2rem, 7dvh, 3rem); }
.picker-actions { margin-block-start: .85rem; }
.medora .picker-control { min-inline-size: 0; }
.medora .fields .picker-control { flex: 1 1 7rem; }
.medora .picker-control .editor-field { border: 0; padding: 0; background: none; }
.medora .picker-field { inline-size: 100%; border-radius: 3rem; background: transparent; color: var(--action); }
.intro { position: relative; box-sizing: border-box; min-block-size: 100vh; min-block-size: 100dvh; padding: max(2rem, env(safe-area-inset-top)) 1.5rem max(2rem, env(safe-area-inset-bottom)); overflow: hidden; }
.welcome { background: linear-gradient(140deg, var(--hero-light), var(--hero-deep)); color: white; }
.intro-content { position: relative; z-index: 1; max-inline-size: 32rem; margin: auto; text-align: center; }
.medora .intro-landscape { position: absolute; inset: auto 0 0; inline-size: 100%; block-size: min(21rem, 46vh); stroke: none; }
.medora .intro-mark { inline-size: min(9rem, 26vh); block-size: min(9rem, 26vh); color: var(--lime); margin-block: 1rem .65rem; }
.medora .welcome h1 { font-size: 2.35rem; }
.medora .welcome h2 { margin-block: 1.1rem .75rem; font-size: 1.25rem; }
.medora .welcome p { color: #ddf1e8; }
.medora .welcome button { margin-block: clamp(2rem, 12vh, 5rem) .8rem; border-radius: 3rem; background: var(--lime); color: var(--lime-ink); }
.permission-art { position: relative; block-size: min(15rem, 33vh); }
.medora .permission-art .intro-landscape { block-size: 100%; }
.medora .permission-art .intro-mark { position: relative; z-index: 1; inline-size: 5rem; block-size: 5rem; color: #9e6515; stroke-width: .8; }
.medora #permission-screen h1, .medora #permission-screen p { margin-block: 1rem; }
.medora .editor-switch { display: flex; gap: .6rem; align-items: center; padding-block: .2rem; }
.medora .editor-switch input { flex: none; }
.medora [data-phased="false"] .phase-only,
.medora [data-phased="false"] .phase:not(:first-child),
.medora [data-phased="false"] .phase legend { display: none; }

.medora .sheet button.block-action, .medora .picker-actions button { border-radius: 3rem; }
.medora #water-dialog .sheet-body { padding-block: 1rem 1.35rem; }
.medora #water-dialog .block-action { margin-block-start: .75rem; }
.medora #time-picker { background: var(--panel); }
.medora #time-picker .sheet-body { padding-block: 1.1rem 1.25rem; }
.medora #time-picker h2 { font-size: 1.25rem; margin: 0; }
.medora #time-picker .time-hint { text-align: center; }
.time-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: end;
  gap: .45rem;
  max-inline-size: 17rem;
  margin: .9rem auto .4rem;
  text-align: center;
}
.medora #time-picker .time-inputs label { margin: 0; font-size: .85rem; color: var(--muted); }
.medora #time-picker .time-inputs input {
  inline-size: 100%;
  min-block-size: 3.6rem;
  margin-block-start: .25rem;
  text-align: center;
  font-size: 1.55rem;
  font-weight: 750;
  font-variant-numeric: tabular-nums;
}
.time-inputs > span { display: grid; align-items: center; block-size: 3.6rem; color: var(--muted); font-weight: 700; }
.medora #time-picker input[aria-invalid="true"] { border-color: var(--error); }
.medora #time-error { text-align: center; font-size: .85rem; }
.medora #settings-back { margin-inline: -.45rem 0; }
.medora #date-picker { background: var(--panel); }
.medora #date-picker .sheet-body { box-sizing: border-box; min-block-size: min(76dvh, 38rem); display: flex; flex-direction: column; padding: 1.15rem .55rem 1.35rem; }
.medora #date-picker h2 { text-align: start; }
.medora #picker-days { flex: 1; align-items: center; }
.medora #picker-days button { inline-size: min(100%, 2.85rem); margin-inline: auto; }
.medora #date-picker .picker-actions { flex-wrap: wrap; }
.medora #date-picker .picker-actions div { display: flex; gap: .25rem; }
.medora .reminder-options { display: flex; flex-wrap: wrap; gap: .25rem .6rem; }
.medora .reminder-options label { display: inline-flex; align-items: center; gap: .3rem; min-block-size: 2.75rem; }
.medora .reminder-options input { inline-size: 1.1rem; min-block-size: auto; accent-color: var(--action); }
.medora .dose-quick { margin-block-start: .45rem; }
.medora .badge[data-status="snoozed"] { color: var(--warn); }
.medora #android-restore .backup-file-picker {
  position: relative;
  display: grid;
  gap: .15rem;
  margin-block: .65rem;
  padding: .55rem .7rem;
  border: 1px solid var(--outline);
  border-radius: .9rem;
  background: var(--field);
  cursor: pointer;
}
.backup-file-picker > span { font-weight: 650; color: var(--action); }
.backup-file-picker bdi { overflow-wrap: anywhere; }
.medora #android-backup-file { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; margin: 0; opacity: 0; cursor: pointer; }
.backup-file-picker:focus-within { outline: 2px solid var(--action); outline-offset: 2px; }
.medora #android-backup-password { inline-size: 100%; }
.medora #android-restore .editor-switch { min-block-size: 2.75rem; cursor: pointer; }
.medora #android-backup-confirm {
  inline-size: 1.15rem;
  block-size: 1.15rem;
  min-block-size: 0;
  margin: 0;
  padding: 0;
  accent-color: var(--action);
}
#android-restore-status:empty { margin: 0; }
.medora #android-restore-status[data-state="error"] { color: var(--error); }
.medora #android-restore-status[data-state="success"] { color: var(--ok); }
.medora [data-ink="gold"] { --pill-base: #f3c56a; }
.medora [data-ink="green"] { --pill-base: #35b6a2; }
.medora [data-ink="blue"] { --pill-base: #a8ddf2; }
.medora [data-ink="purple"] { --pill-base: #b8a4e8; }
.medora [data-ink="rose"] { --pill-base: #f472b6; }
.medora [data-ink="slate"] { --pill-base: #94a3b8; }
.medora svg.medication-badge { inline-size: 2.75rem; block-size: 2.75rem; stroke-width: 3; --pill-edge: color-mix(in srgb, var(--pill-base), black); }
.pill-body { fill: var(--pill-base); stroke: var(--pill-edge); }
.pill-light { fill: color-mix(in srgb, var(--pill-base) 45%, white); stroke: var(--pill-edge); }
.pill-edge { fill: var(--pill-edge); stroke: var(--pill-edge); }
.pill-line { stroke: var(--pill-edge); }
.medora [data-color="slate"] { background: #e7ecf1; color: #283e4d; }
@media (prefers-color-scheme: dark) {
  .medora:not([data-theme="light"]) [data-color="slate"] { background: #293a46; color: #e7ecf1; }
}
.medora[data-theme="dark"] [data-color="slate"] { background: #293a46; color: #e7ecf1; }
.medora .appearance-tile { display: flex; gap: .5rem; align-items: center; inline-size: 100%; margin-block: .45rem; border-color: var(--outline); }
.medora .appearance-tile > svg { margin-inline-start: auto; inline-size: 1.15rem; }
.medora .appearance-tile > span:first-child, #appearance-preview-icon { display: inline-flex; }
.appearance-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; margin-block: .4rem .85rem; }
.medora .appearance-grid button { display: grid; justify-items: center; align-content: start; gap: .2rem; padding: .35rem .12rem; font-size: .85rem; }
.medora .appearance-grid button[aria-pressed="true"] { outline: 2px solid var(--action); outline-offset: -2px; }
.appearance-swatch { inline-size: 2rem; block-size: 2rem; border-radius: 50%; background: var(--pill-base); }
.medora #appearance-preview { display: flex; gap: .65rem; align-items: center; }

/* Studio */
.medora { background: radial-gradient(ellipse at 15% 0, color-mix(in srgb, var(--dock-active) 52%, transparent), transparent 32rem), var(--page); min-block-size: 100dvh; }
.medora .app-bar { background: transparent; }
.medora .app-content { max-inline-size: 46rem; }
.app-bar-inner { max-inline-size: 46rem; padding: .65rem max(1rem, env(safe-area-inset-right)) .25rem max(1rem, env(safe-area-inset-left)); }
.wordmark { font-size: 1.2rem; font-weight: 850; }
.medora .brand-mark { border-radius: .62rem; background: var(--dock-active); }
.medora .brand-mark svg { inline-size: 1.12rem; block-size: 1.12rem; }
.medora .header-tools { margin-inline-start: auto; display: flex; gap: .55rem; }
.medora .header-tools button { background: var(--panel); color: var(--action); border: 1px solid var(--field); border-radius: 50%; box-shadow: 0 .15rem .45rem var(--cast), inset 0 1px 0 var(--glass); }
.medora .header-tools svg { inline-size: 1.18rem; block-size: 1.18rem; }
.page-heading { display: flex; align-items: baseline; flex-wrap: wrap; justify-content: space-between; gap: .15rem 1rem; margin-block: .15rem .65rem; }
.medora .page-heading h1 { font-size: clamp(1.8rem, 6.6vw, 2.55rem); font-weight: 880; line-height: 1.38; }
.medora .page-heading p { color: var(--muted); font-size: .85rem; }
.medora .feature, .medora article { border-radius: 1.3rem; padding: .8rem .95rem; }
.medora .empty { background: var(--panel); }
.medora .day-controls { gap: .2rem; background: var(--panel); border-radius: 1.2rem; margin-block: .7rem 1.25rem; padding: .35rem .45rem; }
.medora .day-week { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.medora .day-week button { min-block-size: 2.7rem; }
.medora .day-week button[aria-current="date"] { background: var(--dock-active); color: var(--action); }
.medora #day-title, .medora #med-day-title { margin-block: .5rem .7rem; font-weight: 800; }
.medora .dock { max-inline-size: 44rem; border-radius: 2.4rem; padding: .2rem; border-color: var(--glass); background: color-mix(in srgb, var(--glass) 82%, transparent); -webkit-backdrop-filter: blur(20px) saturate(145%); backdrop-filter: blur(20px) saturate(145%); box-shadow: 0 .35rem 1.2rem var(--cast), inset 0 0 .5rem var(--glass); }
.medora .dock button { border-radius: 2.05rem; padding-inline: .08rem; }
.medora .dock button[aria-current="page"] { background: var(--dock-active); box-shadow: inset 0 1px 0 var(--glass), 0 .1rem .38rem var(--cast); }
.medora .dock [aria-current="page"] .dock-mark { background: transparent; color: var(--action); }
.medora .dock .dock-add { color: var(--ink); }
.dock-add span { display: grid; place-items: center; inline-size: 1.75rem; aspect-ratio: 1; border-radius: 50%; color: var(--lime-ink); background: var(--lime); box-shadow: 0 0 .65rem color-mix(in srgb, var(--lime) 48%, transparent); }

.medication-banner {
  --art-tilt: -12deg;
  --art-shift: 0%;
  --art-fill: color-mix(in srgb, var(--pill-base) 31%, var(--panel));
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  overflow: hidden;
  block-size: 7.8rem;
  color: var(--ink);
  border-radius: 1rem;
  background: radial-gradient(ellipse at 72% 18%, color-mix(in srgb, var(--pill-base) 54%, transparent), transparent 65%), linear-gradient(145deg, var(--art-fill), var(--panel));
}
.medora .medication-banner .medication-badge {
  position: absolute;
  z-index: 1;
  inline-size: 6.8rem;
  block-size: 6.8rem;
  stroke-width: 1.35;
  transform: translateX(var(--art-shift)) rotate(var(--art-tilt));
  filter: drop-shadow(0 .45rem .48rem #19112238);
}
.medora .medication-banner .banner-echo {
  z-index: 0;
  opacity: .48;
  transform: translate(-78%, -12%) rotate(28deg) scale(.65);
}
.medication-banner span {
  position: absolute;
  z-index: 2;
  inset-inline-start: .65rem;
  inset-block-end: .55rem;
  padding: .12rem .53rem;
  font-size: .73rem;
  font-weight: 750;
  border-radius: 100vw;
  background: color-mix(in srgb, var(--glass) 82%, transparent);
}
.medication-banner[data-shape="tablet"] { --art-tilt: -25deg; --art-shift: -5%; }
.medication-banner[data-shape="syrup"] { --art-tilt: 14deg; --art-shift: 9%; }
.medication-banner[data-shape="injection"] { --art-tilt: 30deg; --art-shift: 14%; }
.medication-banner[data-shape="ointment"] { --art-tilt: -17deg; --art-shift: -8%; }
.medication-banner[data-shape="drops"] { --art-tilt: 21deg; }
.medication-banner[data-shape="spray"] { --art-tilt: -8deg; --art-shift: 9%; }

.medora .studio-hero {
  isolation: isolate;
  position: relative;
  overflow: hidden;
  padding: clamp(.95rem, 3.5vw, 1.35rem);
  border: 1px solid var(--hero-edge);
  border-radius: 1.55rem;
  background: radial-gradient(ellipse at 10% 96%, var(--hero-light), transparent 60%), linear-gradient(120deg, var(--hero-deep), var(--hero-light));
  color: #fff9ff;
  box-shadow: 0 .45rem 1rem var(--cast);
}
.studio-hero > :not(.medication-banner) { position: relative; z-index: 1; }
.medora .studio-hero .medication-banner {
  position: absolute;
  inset-inline-end: -.2rem;
  inset-block-start: 0;
  inline-size: min(48%, 14rem);
  block-size: min(100%, 10.4rem);
  background: radial-gradient(ellipse at 58% 48%, color-mix(in srgb, var(--pill-base) 23%, transparent), transparent 70%);
  border-radius: 0;
}
.medora .studio-hero .medication-banner span { display: none; }
.medora .studio-hero .medication-badge { inline-size: min(87%, 9rem); block-size: auto; aspect-ratio: 1; }
.medora .studio-hero .dose-header { inline-size: 60%; min-block-size: 5rem; padding: 0; }
.medora .studio-hero h3 { font-size: clamp(1.2rem, 5.6vw, 1.95rem); line-height: 1.35; overflow-wrap: anywhere; }
.medora .studio-hero .dose-header p { color: #f4eaf7; margin-block: 0 .35rem; }
.medora .studio-hero .dose-header p:not(.hero-kicker) { display: inline-block; background: #ffffff20; color: #fff; border-radius: .6rem; padding-inline: .45rem; font-weight: 750; }
.medora .studio-hero .dose-result { inline-size: 69%; }
.medora .studio-hero .badge { background: #ffffff1f; color: #fff; }
.medora .studio-hero button:not(.secondary) { background: var(--lime); color: var(--lime-ink); border-color: var(--lime); }
.medora .studio-hero button.secondary { background: var(--hero-deep); color: #fff; border-color: var(--hero-edge); }
.medora .studio-hero .dose-quick { grid-template-columns: 1fr auto; margin-block-start: .7rem; }
.medora .studio-hero .dose-options { position: static; }
.medora .studio-hero .dose-options summary { inset-inline-end: .5rem; inset-block-start: .4rem; background: var(--hero-deep); border-radius: .65rem; }
.medora .studio-hero .dose-options[open] > summary { color: #fff; }
.medora .studio-hero :focus-visible { outline-color: var(--lime); }

#plans { display: grid; gap: .65rem; }
#plans > * { margin-block: 0; }
.medora #plans-heading {
  margin-block-end: .65rem;
  padding: .6rem .8rem;
  background: linear-gradient(125deg, var(--dock-active), var(--visit));
  border: 1px solid var(--outline);
  border-radius: 1.25rem;
}
.medora #plans-heading h2 { margin: 0; }
.medora .treatment { padding: .55rem .7rem; background: var(--panel); color: var(--ink); }
.treatment-profile {
  display: flow-root;
  padding: .2rem 0;
}
.treatment-profile .medication-banner {
  float: inline-end;
  inline-size: 44%;
  block-size: 8.35rem;
  margin-inline-start: .6rem;
  margin-block-end: .25rem;
}
.medora .treatment:first-child .treatment-profile .medication-banner { block-size: 9.1rem; }
.medora .treatment form { background: var(--field); }
.medora .refill { padding-block: 0; border: 1px solid var(--outline); }
.medora .refill form { margin-block: 0 .55rem; }
.medora #medicine-details-body > .medication-banner { margin-block-end: .55rem; }
.medora .treatment-name { font-size: 1.12rem; color: inherit; }
.medora :is(.treatment-name, .dose-header h3, .sheet-header h2, .visit-title) { min-inline-size: 0; overflow-wrap: anywhere; }
.medora .treatment input[role="switch"] { flex: none; }
.medora #appearance-preview { display: block; padding: 0; background: transparent; border: 0; }
.medora #appearance-preview-icon { display: block; }
.medora .sheet-header { padding: .4rem .65rem; background: var(--dock-active); color: var(--ink); border-radius: 1.15rem; }
.medora dialog { box-shadow: 0 .75rem 2.5rem var(--cast); }
.medora #medication-dialog .sheet-body { padding-block-start: .6rem; }
.medora #editor-banner .medication-banner { block-size: 8.1rem; }
.wizard-steps { padding: 0; margin-block: .7rem 1rem; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .28rem; }
.wizard-steps li { display: flex; align-items: center; justify-content: center; gap: .27rem; min-block-size: 2.5rem; color: var(--muted); text-align: center; line-height: 1.3; font-size: .75rem; border: 1px solid var(--outline); border-radius: .8rem; }
.wizard-steps li span { font-weight: 750; }
.wizard-steps li[aria-current="step"] { background: var(--dock-active); color: var(--action); font-weight: 800; border-color: var(--dock-active); }
.wizard-steps li[data-complete="true"] { background: var(--ok-bg); color: var(--ok); }
.medora [data-editor-step] h3 { font-size: 1.15rem; font-weight: 800; margin-block-end: .55rem; }
.wizard-actions { display: flex; gap: .5rem; }
.medora .wizard-actions button { border-radius: 3rem; }
.medora #editor-next { flex: 1; background: var(--lime); border-color: var(--lime); color: var(--lime-ink); }
#editor-review { padding: .7rem .9rem; background: var(--panel); border: 1px solid var(--outline); border-radius: 1rem; overflow-wrap: anywhere; }
#editor-review h4 { margin-block: 0; font-size: 1.1rem; }
#editor-review ol { padding-inline-start: 1.25rem; }
#editor-review li { padding-block: .3rem; }
.medora #account-dialog form { margin-block: .65rem; }
.medora #account-dialog input { display: block; inline-size: 100%; margin-block-start: .25rem; }
.medora #account-status[data-error] { color: var(--error); }
.medora #open-admin, .medora .promotion-action {
  display: inline-flex;
  align-items: center;
  min-block-size: 3rem;
  border-radius: .9rem;
  padding-inline: .8rem;
  background: var(--action);
  color: var(--on-action);
  font-weight: 650;
}
.medora #promotion-title { overflow-wrap: anywhere; }
.medora #promotion-description { white-space: pre-wrap; }
.medora .intro-mark { color: var(--lime); }
.medora .intro-landscape { opacity: .56; mix-blend-mode: luminosity; }

@media (min-width: 38rem) {
  #plans { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #plans > :first-child { grid-column: 1 / -1; }
  .medora .treatment:first-child .treatment-profile .medication-banner { block-size: 10rem; }
  .medora dialog.sheet { inset-block: 0; margin: auto; max-block-size: min(92dvh, 49rem); border-radius: 1.65rem; padding-block-end: .5rem; }
}