/* css/medical.css — components from the Antz Medical flow, iPad (medical-flow-ipad-ten.vercel.app/flow/ipad/app_3.html):
   header, icon pill tab bar, underline segment tabs, search + filter + add row, record card, context card (the animal card),
   section card with rows and severity tags, key-value grid, note card, precaution card, pill chips, chip sections.
   Values as in flow3.css, mf3-hosp-ov.css and mf3-records.css; tokens from app/tokens.css. */

.device { --mf-card-pad: 16px; --mf-card-radius: 12px; --mf-card-gap: 16px; --mf-screen-pad: 24px; }

/* ---------- header: back · title (and a line) · one action ---------- */
.mf-head { background: var(--on-primary); box-shadow: 0 2px 1px var(--black-04); position: relative; z-index: 3; }
.mf-head__row { display: flex; align-items: center; gap: var(--sp-12); min-height: 72px; padding: var(--sp-12) var(--sp-24) var(--sp-12) var(--sp-16); }
.mf-head__row .ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.mf-head__row h1 { color: var(--neutral-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-head__row .sub { display: inline-flex; align-items: center; gap: 4px; color: var(--on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mf-head__row .sub .app-icon { transform: rotate(-90deg); }

/* ---------- primary tab bar: icon pills, the active one filled ---------- */
.mf3-tabbar { display: flex; align-items: center; gap: var(--sp-8); padding: var(--sp-4) var(--sp-16) var(--sp-12); overflow-x: auto; scrollbar-width: none; }
.mf3-tabbar::-webkit-scrollbar { display: none; }
.mf3-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sp-8); height: 48px; padding: 0 20px; border-radius: 10px; color: var(--on-surface-variant); background: transparent; transition: background 200ms ease, color 200ms ease; }
.mf3-tab .app-icon { color: var(--on-surface-variant); }
.mf3-tab .n { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; background: var(--neutral-05); color: var(--on-surface-variant); }
.mf3-tab.on { background: var(--on-primary-container); color: var(--on-primary); }
.mf3-tab.on .app-icon { color: var(--primary-main); }
.mf3-tab.on .n { background: rgb(255 255 255 / 18%); color: var(--on-primary); }

/* ---------- secondary tabs: full width, green ink under the active one, count chip ---------- */
.mf3-segtabs { position: relative; display: flex; width: 100%; background: var(--on-primary); border-top: 1px solid var(--surface-variant); }
.mf3-seg { flex: 1; min-width: 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; color: var(--on-surface-variant); }
.mf3-seg.on { color: var(--primary-main); }
.mf3-seg .app-icon { color: inherit; }
.mf3-segtabs__ink { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(100% / var(--n, 2)); background: var(--primary-main); transform: translateX(calc(100% * var(--i, 0))); transition: transform 160ms cubic-bezier(.22,1,.36,1); }

/* ---------- body ---------- */
.mf-body { display: flex; flex-direction: column; gap: var(--mf-card-gap); padding: var(--mf-screen-pad); }
.mf-col { width: 100%; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--mf-card-gap); }

/* search · filter · add */
.mf-search { display: flex; align-items: center; gap: var(--sp-12); }
.mf-search__in { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--sp-8); height: 48px; padding: 0 var(--sp-12); border-radius: 8px; background: var(--displaybg-secondary); color: var(--on-surface-variant); }
.mf-search__in input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: none; color: var(--neutral-primary); }
.mf-filter { display: inline-flex; align-items: center; gap: var(--sp-8); height: 48px; padding: 0 var(--sp-20); border-radius: 8px; border: 1px solid var(--outline-variant); background: var(--on-primary); color: var(--on-surface); text-transform: uppercase; }
.mf-filter .dot { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--on-primary-container); color: var(--on-primary); display: inline-grid; place-items: center; }
.mf-add { display: inline-flex; align-items: center; gap: var(--sp-8); height: 48px; padding: 0 var(--sp-20); border-radius: 8px; background: var(--primary-main); color: var(--on-primary); text-transform: uppercase; white-space: nowrap; }

/* ---------- record card ---------- */
.mfr-list { display: flex; flex-direction: column; gap: var(--mf-card-gap); }
.mfr-card { display: block; padding: var(--mf-card-pad); background: var(--on-primary); border-radius: var(--mf-card-radius); box-shadow: 0 1px 2px 0 var(--black-04); cursor: pointer; text-align: left; width: 100%; }
.mfr-card:active { background: var(--black-05); }
.mfr-card__head { display: flex; align-items: center; gap: var(--sp-12); padding-bottom: var(--sp-16); border-bottom: 1px solid var(--surface-variant); }
.mfr-card__icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex: none; border-radius: 50%; background: var(--surface-variant); color: var(--on-primary-container); }
.mfr-card__lead { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.mfr-card__code { color: var(--neutral-primary); }
.mfr-card__sub { display: flex; align-items: center; flex-wrap: wrap; gap: 0 var(--sp-8); color: var(--neutral-secondary); }
.mfr-card__chev { display: inline-flex; color: var(--on-surface-variant); }
.mfr-card__chev .app-icon { transform: rotate(-90deg); }
.mfr-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); padding: var(--sp-16) 0 0; color: var(--on-surface-variant); }
.mfr-meta span { display: inline-flex; align-items: center; gap: 6px; }
.mfr-meta .app-icon { color: var(--on-primary-container); }
.mfr-sub { padding: var(--sp-16) 0 var(--sp-8); color: var(--on-surface-variant); }
.mfr-chips { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.mfr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px var(--sp-12); border-radius: 6px; background: var(--surface-variant); color: var(--neutral-primary); }
.mfr-chip--warn { background: var(--notes-a60); color: var(--moderate-secondary); }

/* ---------- context card (the Medical animal card), in the white header under the title ---------- */
.mf-head__ctx { padding: 0 var(--sp-24) var(--sp-16); }
.mf-head__ctx .ctx-card { max-width: 820px; margin: 0 auto; }
.ctx-card { display: flex; align-items: flex-start; gap: var(--sp-16); padding: var(--sp-12); border-radius: var(--mf-card-radius); background: var(--background); }
.ctx-card__tile { width: 96px; height: 96px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--displaybg-primary); color: var(--on-primary-container); }
.ctx-card__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; color: var(--on-surface-variant); }
.ctx-card__txt .cid { color: var(--on-primary-container); }
.ctx-card__txt .sci { color: var(--neutral-secondary); font-style: italic; }
.ctx-card__end { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-8); flex: none; }

/* ---------- section card: title (with count) and a link, then rows with a severity tag ---------- */
.ov-sec { display: flex; flex-direction: column; gap: var(--sp-16); padding: var(--mf-card-pad); background: var(--on-primary); border-radius: var(--mf-card-radius); box-shadow: 0 1px 2px 0 var(--black-04); }
.ov-head { display: flex; align-items: center; gap: var(--sp-12); }
.ov-head .ttl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); color: var(--neutral-primary); }
.ov-head .ttl .sub { color: var(--neutral-secondary); }
.ov-link { display: inline-flex; align-items: center; gap: var(--sp-4); color: var(--on-surface); white-space: nowrap; }
.ov-link .app-icon { transform: rotate(-90deg); }
.ov-when { display: inline-flex; align-items: center; gap: 6px; color: var(--on-primary-container); white-space: nowrap; }
.ov-rows { display: flex; flex-direction: column; gap: var(--sp-8); }
.ov-row { display: flex; align-items: center; gap: var(--sp-12); padding: var(--sp-8) 0; }
.ov-row + .ov-row { border-top: 1px solid var(--black-05); }
.ov-row__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.ov-row__txt .nm { color: var(--on-surface-variant); }
.ov-row__txt .sub { color: var(--neutral-secondary); }
.ov-subbar { display: flex; align-items: center; gap: var(--sp-8); color: var(--neutral-primary); text-transform: uppercase; padding-top: var(--sp-8); }
.ov-subbar .muted { text-transform: none; color: var(--neutral-secondary); }
.sev { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-8) 10px; border-radius: 4px; white-space: nowrap; flex: none; }
.sev--severe { background: var(--error-container-a70); color: var(--error); }
.sev--medium { background: var(--moderate-primary-a40); color: var(--moderate-secondary); }
.sev--high { background: var(--tertiary-container-a50); color: var(--tertiary); }
.sev--guarded { background: var(--notes-a60); color: var(--moderate-secondary); }
.sev--mild { background: var(--secondary-container-a30); color: var(--add-primary); }
.sev--ok { background: var(--on-background); color: var(--on-surface); }
.sev--plain { padding: 0; color: var(--on-surface-variant); }
.sev--sm { padding: var(--sp-4) var(--sp-8); }

/* ---------- key-value grid ---------- */
.kv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-16); padding: var(--sp-12); border-radius: 8px; background: var(--background-a50); }
.kv { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.kv .k { color: var(--neutral-secondary); }
.kv .v { color: var(--on-surface-variant); }
.kv--full { grid-column: 1 / -1; }

/* ---------- note card (yellow) and precaution card (tinted) ---------- */
.note-card { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-12); border-radius: 8px; background: var(--antz-notes-40); }
.note-card__hd { display: flex; align-items: center; gap: var(--sp-12); color: var(--on-surface-variant); }
.note-card__hd .who { flex: 1; min-width: 0; }
.note-card__hd .ago { color: var(--neutral-secondary); }
.note-card .body { color: var(--on-surface-variant); }
.prec__card { display: flex; flex-direction: column; gap: var(--sp-8); padding: var(--sp-12); border-radius: 8px; background: rgb(from var(--md3-tertiary-container) r g b / 16%); }
.prec__card--amber { background: var(--notes-a30); }
.prec__card--plain { background: var(--neutral-05); }
.prec__hd { display: flex; align-items: center; gap: 6px; color: var(--tertiary); }
.prec__card--amber .prec__hd { color: var(--moderate-secondary); }
.prec__card--plain .prec__hd { color: var(--on-surface-variant); }
.prec__card .body { color: var(--on-surface-variant); }
.prec__foot { color: var(--neutral-secondary); }

/* ---------- pill chips (one or several on) and chip sections ---------- */
.rx-tabs { display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.rx-tab { display: inline-flex; align-items: center; gap: 6px; padding: var(--sp-8) var(--sp-12); border-radius: 44px; background: var(--neutral-05); color: var(--on-surface-variant); border: 1px solid transparent; white-space: nowrap; }
.rx-tab.is-on { background: var(--on-primary-container); border-color: var(--on-primary-container); color: var(--on-primary); }
.chipsec { display: flex; flex-direction: column; gap: var(--sp-12); }
.chipsec h3 { color: var(--on-primary-container); text-transform: uppercase; letter-spacing: .02em; }
.mf-chip { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 var(--sp-12); border-radius: 8px; background: var(--neutral-05); color: var(--neutral-primary); }
.mf-chip--line { background: var(--displaybg-primary-a50, rgb(from var(--displaybg-primary) r g b / 50%)); box-shadow: inset 0 0 0 1px var(--displaybg-secondary); }
.mf-chip--warn { background: var(--notes-a60); color: var(--moderate-secondary); }

/* ---------- What should change: the pieces the four variations add ---------- */
.ov-row.chg { padding-left: var(--sp-12); box-shadow: inset 3px 0 0 var(--on-primary-container); }
.ov-row.stop .nm { text-decoration: line-through; color: var(--neutral-secondary); }
.ibtn { width: 44px; height: 44px; flex: none; border-radius: 8px; display: grid; place-items: center; border: 1px solid var(--outline-variant); background: var(--on-primary); color: var(--on-primary-container); }
.ibtn.bad { color: var(--error); }
.stepper { display: inline-flex; align-items: center; gap: 2px; padding: 2px; border-radius: 8px; border: 1px solid var(--outline-variant); background: var(--on-primary); flex: none; }
.stepper .qb { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; color: var(--on-primary-container); }
.stepper .qb:active { background: var(--neutral-05); }
.stepper span { min-width: 72px; text-align: center; color: var(--neutral-primary); }
.rx-tab .cnt { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--primary-main); color: var(--on-primary); font-size: 12px; }
.mf-chip--chg { background: var(--on-primary); box-shadow: inset 0 0 0 1.5px var(--on-primary-container); color: var(--on-primary-container); }
.mf-chip--stop { background: var(--error-container-a70); color: var(--error); text-decoration: line-through; }
.mf-chip--add { background: var(--on-background); color: var(--on-surface); }
.mf-chip--dash { background: transparent; border: 1px dashed var(--outline); color: var(--on-primary-container); }
.nn { display: grid; grid-template-columns: minmax(0, 1fr) 20px minmax(0, 1fr) 44px; gap: var(--sp-8) var(--sp-8); align-items: center; }
.nn-h { color: var(--neutral-secondary); letter-spacing: .04em; margin-bottom: calc(-1 * var(--sp-8)); }
.nn-now, .nn-new { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-8); min-height: 52px; padding: var(--sp-8) var(--sp-12); border-radius: 8px; }
.nn-now { background: var(--background); color: var(--on-surface-variant); }
.nn-now.none { background: transparent; border: 1px dashed var(--outline-variant); }
.nn-new { border: 1px solid var(--outline-variant); color: var(--neutral-primary); }
.nn-new.on { border: 1.5px dashed var(--on-primary-container); background: var(--displaybg-primary-a50); }
.nn-new .bad { color: var(--error); }
.nn-arr { display: grid; place-items: center; color: var(--outline); }