/* woff2 first: 50 KB against 123 KB per weight, which is the difference between one
   and three seconds of blank text on a slow mobile connection. The TrueType files
   stay as the fallback for webviews that predate woff2. */
@font-face {
  font-family: "Vazirmatn";
  src:
    url("/fonts/Vazirmatn-Regular.woff2") format("woff2"),
    url("/fonts/Vazirmatn-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Vazirmatn";
  src:
    url("/fonts/Vazirmatn-Bold.woff2") format("woff2"),
    url("/fonts/Vazirmatn-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  color-scheme: light;
  --bg: #f3f7f8;
  --surface: #ffffff;
  --surface-soft: #edf3f4;
  --text: #17272d;
  --muted: #61747a;
  --line: #d8e2e5;
  --accent: #087f8c;
  --accent-contrast: #ffffff;
  --link: #07636d;
  --success: #157a55;
  --danger: #a83c3c;
  --warning: #8a5a08;
  --warning-bg: #fff7df;
  --warning-line: #e7c66e;
  --shadow: 0 10px 28px rgba(23, 39, 45, 0.08);
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #111719;
  --surface: #1b2427;
  --surface-soft: #243135;
  --text: #f2f6f7;
  --muted: #a9babf;
  --line: #35454a;
  --accent: #36aeba;
  --accent-contrast: #071719;
  --link: #70d0d8;
  --success: #5ac89a;
  --danger: #ef8787;
  --warning: #f1c86a;
  --warning-bg: #322a18;
  --warning-line: #80672e;
  --shadow: 0 10px 28px rgba(0, 0, 0, 0.24);
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  min-width: 280px;
  background: var(--bg);
}

body {
  /* dvh tracks the collapsing browser chrome; without it the sticky confirm bar can
     sit under the toolbar on mobile. vh stays as the fallback for older webviews. */
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Vazirmatn", Tahoma, sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  letter-spacing: 0;
}

button,
input,
textarea {
  font: inherit;
  letter-spacing: 0;
}

/* iOS/WebKit zooms the whole page when a focused field is under 16px, so the very
   first tap on the search box would throw the layout off centre. Keep every typed
   field at exactly 16px regardless of the 15px body scale. */
input,
textarea {
  font-size: 16px;
}

button {
  color: inherit;
}

.app-shell {
  width: min(100%, 680px);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(10px, env(safe-area-inset-top)) 14px max(24px, env(safe-area-inset-bottom));
}

.view {
  width: 100%;
}

.client-warning {
  margin-bottom: 12px;
  padding: 10px 12px;
  border: 1px solid var(--warning-line);
  border-radius: 8px;
  background: var(--warning-bg);
  color: var(--warning);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.page-heading {
  margin-bottom: 14px;
}

.eyebrow,
h1,
h2,
h3,
.field-hint {
  margin: 0;
}

.eyebrow {
  min-height: 19px;
  color: var(--link);
  font-size: 0.75rem;
  font-weight: 700;
}

h1 {
  margin-top: 3px;
  font-size: 1.25rem;
  line-height: 1.55;
}

h2 {
  margin-bottom: 3px;
  font-size: 1.0625rem;
  line-height: 1.65;
}

h3 {
  margin-bottom: 8px;
  font-size: 0.875rem;
  line-height: 1.6;
}

.search-box {
  display: grid;
  min-height: 54px;
  grid-template-columns: 26px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  box-shadow: var(--shadow);
  padding: 0 12px;
}

.search-box:focus-within {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

.search-box > span {
  color: var(--accent);
  font-size: 1.75rem;
  line-height: 1;
  transform: rotate(-18deg);
}

.search-box input {
  width: 100%;
  min-width: 0;
  height: 50px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--text);
}

.search-box input::placeholder {
  color: var(--muted);
  opacity: 1;
}

.search-box input::-webkit-search-cancel-button,
.search-box input::-webkit-search-decoration {
  display: none;
  -webkit-appearance: none;
  appearance: none;
}

.search-box input::-ms-clear {
  display: none;
}

.icon-button {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--muted);
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
}

.field-hint {
  padding: 7px 3px 0;
  color: var(--muted);
  font-size: 0.75rem;
}

.empty-guide {
  display: grid;
  grid-template-rows: 1fr;
  margin-top: 22px;
  opacity: 1;
  transform: translateY(0);
  transition:
    grid-template-rows 220ms ease,
    margin-top 220ms ease,
    opacity 160ms ease,
    transform 220ms ease;
}

.empty-guide.is-dismissed {
  grid-template-rows: 0fr;
  margin-top: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
}

.empty-guide-inner {
  min-height: 0;
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}

.empty-guide h2 {
  margin-top: 2px;
}

.guide-list {
  display: grid;
  gap: 11px;
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
}

.guide-list li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  align-items: start;
  gap: 9px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.guide-list li > span {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--line));
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
  color: var(--link);
  font-size: 0.75rem;
  font-weight: 700;
}

.status-message {
  min-height: 42px;
  padding: 13px 2px 7px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.status-message.is-error {
  color: var(--danger);
}

.status-message.is-guidance {
  min-height: 0;
  margin: 4px 0 10px;
  border: 1px solid var(--warning-line);
  border-radius: 7px;
  background: var(--warning-bg);
  color: var(--warning);
  box-shadow: inset -3px 0 0 var(--warning-line);
  padding: 10px 12px;
}

.results {
  /* `clip` still trims the rows to the rounded corners but, unlike `hidden`, does
     not turn this into a scroll container — which would stop the sticky confirm bar
     inside an expanded row from ever pinning. `hidden` stays as the fallback for
     webviews without `clip`: they lose the pinning, not the layout. */
  overflow: hidden;
  overflow: clip;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.results:empty {
  display: none;
}

.result-item {
  border-bottom: 1px solid var(--line);
}

.result-item:last-child {
  border-bottom: 0;
}

.result-item.is-expanded {
  position: relative;
  z-index: 1;
  background: color-mix(in srgb, var(--accent) 5%, var(--surface));
  box-shadow:
    inset -3px 0 0 var(--accent),
    inset 0 0 0 1px color-mix(in srgb, var(--accent) 48%, var(--line));
}

.result-row {
  width: 100%;
  min-height: 74px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 0;
  background: transparent;
  padding: 12px 14px;
  cursor: pointer;
  text-align: right;
}

.result-row:active,
.result-row:hover,
.result-item.is-expanded .result-row {
  background: var(--surface-soft);
}

.result-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.result-title-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px 8px;
}

.category-badge {
  display: inline-flex;
  max-width: 100%;
  min-height: 21px;
  align-items: center;
  border: 1px solid hsl(var(--category-hue) 40% 72%);
  border-radius: 5px;
  background: hsl(var(--category-hue) 55% 94%);
  color: hsl(var(--category-hue) 55% 29%);
  font-size: 0.625rem;
  font-weight: 700;
  line-height: 1.45;
  padding: 2px 6px;
  overflow-wrap: anywhere;
}

:root[data-theme="dark"] .category-badge {
  border-color: hsl(var(--category-hue) 30% 43%);
  background: hsl(var(--category-hue) 30% 20%);
  color: hsl(var(--category-hue) 60% 76%);
}

.result-copy strong,
.result-subtitle,
.result-copy small {
  overflow-wrap: anywhere;
}

.result-copy strong {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.result-subtitle {
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.65;
  text-align: right;
  unicode-bidi: plaintext;
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 3px;
  color: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.65;
}

.result-meta > span,
.selection-meta > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.meta-divider {
  width: 1px;
  height: 14px;
  flex: 0 0 1px;
  margin-inline: 7px;
  background: color-mix(in srgb, var(--accent) 48%, var(--line));
}

.result-end {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 6px;
}

.row-arrow {
  width: 30px;
  height: 30px;
  display: inline-flex;
  flex: 0 0 30px;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--accent) 40%, var(--line));
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  transition: transform 160ms ease;
}

.row-arrow::before {
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  content: "";
  transform: rotate(45deg) translate(-1px, -1px);
}

.result-item.is-expanded .row-arrow {
  transform: rotate(180deg);
}

.text-command {
  width: 100%;
  min-width: 0;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--surface-soft) 45%, var(--surface));
  color: var(--muted);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.55;
  overflow-wrap: anywhere;
  padding: 6px;
}

.text-command:hover,
.text-command:focus-visible {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent-soft) 35%, var(--surface));
  color: var(--link);
}

.selection-panel {
  --panel-bg: color-mix(in srgb, var(--surface-soft) 38%, var(--surface));
  padding: 14px;
  border-top: 1px solid color-mix(in srgb, var(--accent) 32%, var(--line));
  background: var(--panel-bg);
}

.choice-step {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.choice-step.is-first {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.option-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

/* The form is a label the patient reads, not a button they have to decide on —
   deliberately quieter than the dose chips underneath it. */
.variant-group + .variant-group {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line);
}

.variant-group-title {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 0.8125rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.option-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

.option-flow .option-button {
  width: auto;
  max-width: 100%;
  flex: 0 1 auto;
  min-height: 42px;
  min-width: 88px;
  padding: 5px 12px;
}

.option-button {
  min-width: 0;
  min-height: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface);
  cursor: pointer;
  padding: 8px;
  overflow-wrap: anywhere;
  font-size: 0.875rem;
  line-height: 1.65;
}

.option-button small {
  color: var(--muted);
  font-size: 0.6875rem;
}

.option-button.is-selected {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: var(--link);
  box-shadow: inset 0 0 0 1px var(--accent);
  font-weight: 700;
}

.selection-summary {
  min-height: 48px;
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--surface-soft);
  color: var(--muted);
  padding: 12px;
  font-size: 0.8125rem;
}

.selection-summary.is-ready {
  border-color: color-mix(in srgb, var(--success) 35%, var(--line));
  color: var(--success);
}

.selection-summary > strong,
.selection-summary > .selection-meta {
  display: block;
  overflow-wrap: anywhere;
}

.selection-summary strong {
  font-size: 0.9375rem;
}

.selection-meta {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 2px;
  color: var(--muted);
  font-size: 0.8125rem;
}

/* A concept like استامینوفن carries 12 forms and 13 doses, so the confirm button
   would otherwise sit two screens below the chips the patient is tapping. Keeping it
   pinned means the current selection and the way forward are always both in reach. */
.bottom-actions {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin: 12px -14px 0;  /* bleed to the panel edges so nothing scrolls past the side */
  padding: 10px 14px max(10px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--line);
  background: var(--panel-bg);
}

.escape-hatch {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  text-align: center;
}

.escape-hatch-hint {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 0.75rem;
}

.primary-command,
.secondary-command {
  width: 100%;
  min-height: 52px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
}

.primary-command {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: var(--accent-contrast);
}

.primary-command:disabled {
  border-color: var(--line);
  background: var(--line);
  color: var(--muted);
  cursor: not-allowed;
}

.secondary-command {
  margin-top: 8px;
  border: 1px solid var(--accent);
  background: transparent;
  color: var(--link);
}

.notes-view {
  padding-top: 2px;
}

.back-command {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 9px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--surface);
  color: var(--accent);
  cursor: pointer;
}

.back-command > span {
  width: 8px;
  height: 8px;
  border-top: 2px solid currentColor;
  border-left: 2px solid currentColor;
  transform: rotate(-45deg);
}

.review-summary {
  min-height: 62px;
  margin-bottom: 18px;
  border: 1px solid color-mix(in srgb, var(--success) 38%, var(--line));
  border-radius: 7px;
  background: color-mix(in srgb, var(--success) 6%, var(--surface));
  padding: 11px 12px;
}

.review-summary > strong,
.review-summary > span {
  display: block;
  overflow-wrap: anywhere;
}

.review-summary > strong {
  font-size: 0.9375rem;
  line-height: 1.7;
}

.review-summary > span {
  margin-top: 1px;
  color: var(--muted);
  font-size: 0.8125rem;
}

.notes-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 7px;
}

.notes-label-row label {
  font-size: 0.875rem;
  font-weight: 700;
}

.notes-label-row span {
  border-radius: 5px;
  background: var(--surface-soft);
  color: var(--muted);
  font-size: 0.6875rem;
  padding: 2px 7px;
}

.notes-label-row span.is-required {
  background: var(--warning-bg);
  color: var(--warning);
}

#patient-notes {
  width: 100%;
  height: 172px;
  min-height: 172px;
  max-height: 172px;
  resize: none;
  border: 1px solid var(--line);
  border-radius: 8px;
  outline: 0;
  background: var(--surface);
  color: var(--text);
  line-height: 1.8;
  padding: 10px 12px;
}

#patient-notes:focus {
  border-color: var(--accent);
  outline: 2px solid color-mix(in srgb, var(--accent) 18%, transparent);
}

#patient-notes[aria-invalid="true"] {
  border-color: var(--danger);
}

#patient-notes::placeholder {
  color: var(--muted);
  opacity: 1;
}

.notes-meta {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 2px 0;
  color: var(--muted);
  font-size: 0.6875rem;
}

.notes-meta p {
  margin: 0;
}

.notes-meta span {
  flex: 0 0 auto;
}

.notes-error {
  min-height: 24px;
  margin: 0;
  padding-top: 4px;
  color: var(--danger);
  font-size: 0.75rem;
}

.final-submit {
  margin-top: 5px;
}

.done-view {
  padding-top: 12vh;
  text-align: center;
}

.done-view p {
  color: var(--muted);
}

.done-mark {
  width: 64px;
  height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success) 14%, var(--surface));
  color: var(--success);
  font-size: 2.125rem;
  font-weight: 700;
}

@media (max-width: 360px) {
  .app-shell {
    padding-inline: 10px;
  }

  .option-grid {
    grid-template-columns: 1fr;
  }

}

@media (prefers-reduced-motion: reduce) {
  * {
    scroll-behavior: auto !important;
  }
}