/* ===========================================================================
   Anthony's Pharmacy — app shell
   ---------------------------------------------------------------------------
   v3.0.0 — redesign.

   The old shell was a generic mobile-app template: white rounded cards
   floating on grey, soft drop shadows, a green panel with curved bottom
   corners. It could have been any business.

   This one is built from the one object every patient here already holds:
   the prescription label. Warm label stock instead of cool grey. A double
   rule — 2px green over 1px amber — as the structural device that opens the
   app and every section in it. Monospace for anything that is data (hours,
   phone, status, section names), Fraunces for anything that is voice.
   Amber is promoted from a focus-ring afterthought to the accent, because
   amber is the colour of the vial.

   Panels run edge to edge on hairlines instead of floating in boxes, so the
   screen reads as printed material rather than a card deck. Exactly one
   thing is allowed to lift off the page: the refill button, because that is
   what people opened the app to do.

   Family owned on Atwood Ave. since 1958 — the design should look like it.

   Class names are unchanged from v2.x. This file drops in.
   =========================================================================== */

:root {
  /* Brand green, sampled from the app icon. Do not drift. */
  --ap-green:      #0a3d2e;
  --ap-green-deep: #04211a;
  --ap-green-tint: #e8f1ec;
  --ap-mint:       #7fe3b5;

  /* Apothecary glass. Split into two tones on purpose: --ap-amber is dark
     enough to carry small text on paper at 4.7:1 (WCAG AA), which matters for
     an app whose users are mostly over sixty. --ap-amber-rule is the brighter
     tone, used only for hairlines and other non-text marks, where the 3:1
     graphic threshold applies. --ap-amber-lift is the on-dark-green tone. */
  --ap-amber:      #9c5d12;
  --ap-amber-rule: #c87d1e;
  --ap-amber-lift: #f0a53c;
  --ap-amber-wash: #fbf1de;

  /* Label stock. Warm, not grey — the single biggest change, and the reason
     the app stops reading as a template. */
  --ap-paper:      #f5f2ea;
  --ap-white:      #ffffff;
  --ap-ink:        #16221d;
  --ap-muted:      #62726b;
  --ap-line:       #ddd6c6;
  --ap-line-soft:  #ebe6db;

  --ap-display: "Fraunces", Georgia, "Times New Roman", serif;
  --ap-mono: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace;
  --ap-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;

  --ap-radius: 12px;
  --ap-tap: 48px;
  --ap-gutter: 1.125rem;

  --ap-bar: 64px;
  --ap-logo: 40px;
  --ap-logo-hero: 158px;
  --ap-tabs: 64px;

  --ap-bar-total: calc(var(--ap-bar) + env(safe-area-inset-top, 0px));
}

* { box-sizing: border-box; }

/* ---------------------------------------------------------------------------
   GLOBAL TEXT SIZE — still the only number to change.

     100%    = browser default (usually 16px)
     112.5%  = 18px  <- current
     118.75% = 19px
     125%    = 20px

   A percentage, not a pixel value: a patient who has raised the text size in
   their phone settings keeps that preference and this scales on top of it.
   --------------------------------------------------------------------------- */
html {
  font-size: 112.5%;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--ap-sans);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ap-ink);
  background: var(--ap-paper);
  padding-top: var(--ap-bar-total);
  padding-bottom: calc(var(--ap-tabs) + env(safe-area-inset-bottom, 0px));
  overscroll-behavior-y: contain;
}

h1, h3, h4 {
  font-family: var(--ap-display);
  font-weight: 600;
  color: var(--ap-green);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .5rem;
}
h1 { font-size: 1.9rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 1rem; }
a { color: var(--ap-green); }

.wrap { padding: 0 var(--ap-gutter); max-width: 40rem; margin: 0 auto; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--ap-muted); font-size: .95rem; }

/* --- the label voice -----------------------------------------------------
   Monospace, uppercase, widely tracked. Used for anything that is data or a
   field name — never for sentences. This is the app's signature.
   ------------------------------------------------------------------------ */

.eyebrow {
  font-family: var(--ap-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ap-amber);
  margin: 0 0 .5rem;
}

/* --- section headers: the double rule -------------------------------------
   2px green over a 1px amber hairline. It is the device printed across the
   top of every prescription label they dispense, and here it does real work:
   it is the only thing separating one section from the next.
   ------------------------------------------------------------------------ */

h2 {
  position: relative;
  font-family: var(--ap-mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ap-green);
  line-height: 1.2;
  margin: 2.25rem 0 1rem;
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--ap-green);
}
h2::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -4px;
  height: 1px;
  background: var(--ap-amber-rule);
  opacity: .8;
}

/* --- app bar -------------------------------------------------------------
   Height includes the status-bar inset so a notch pushes the bar taller
   rather than squashing its contents.
   ------------------------------------------------------------------------ */

.appbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  height: var(--ap-bar-total);
  padding-top: env(safe-area-inset-top, 0px);
  background: var(--ap-green);
  display: flex;
  align-items: center;
  gap: .625rem;
  padding-left: .875rem;
  padding-right: .875rem;
  border-bottom: 1px solid rgba(200, 125, 30, .55);
}

.appbar img {
  height: var(--ap-logo);
  width: auto;
  display: block;
  flex: 0 0 auto;
}

.appbar-title {
  font-family: var(--ap-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ap-white);
  letter-spacing: -0.01em;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The logo already says "Anthony's Pharmacy" — setting it twice competes for
   width. Inner pages have no logo, so the title still shows by the back arrow. */
.appbar img + .appbar-title { display: none; }

.appbar-brand {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  gap: 1px;
}
.appbar-brand .appbar-title { line-height: 1.15; }
.appbar-sub {
  font-family: var(--ap-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(127, 227, 181, .8);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.appbar-actions { margin-left: auto; display: flex; align-items: center; gap: .25rem; flex: 0 0 auto; }

.appbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px; height: 42px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--ap-mint);
  font: inherit;
  font-family: var(--ap-mono);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-decoration: none;
  cursor: pointer;
  padding: 0 .625rem;
}
.appbar-btn:active { background: rgba(127, 227, 181, .16); }

.appbar-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-left: -.375rem;
  border-radius: 8px;
  color: var(--ap-mint);
  text-decoration: none;
  font-size: 1.5rem;
  line-height: 1;
  flex: 0 0 auto;
}

@media (max-width: 340px) {
  :root { --ap-logo: 34px; }
  .appbar-btn { min-width: 36px; padding: 0 .375rem; }
}

@media (max-height: 700px) { :root { --ap-logo-hero: 126px; } }
@media (max-height: 600px) { :root { --ap-logo-hero: 100px; } }

/* --- hero: the label header ----------------------------------------------
   The curved bottom corners are gone. That shape is what dated the old
   screen — every app template since 2019 has it. A label does not have
   rounded corners; it has a rule, and then it starts.
   ------------------------------------------------------------------------ */

.hero {
  position: relative;
  background: var(--ap-green);
  color: var(--ap-white);
  padding: 1.875rem 0 2rem;
  text-align: center;
  border-bottom: 2px solid var(--ap-mint);
}
/* The amber underline of the double rule. */
.hero::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: var(--ap-amber-lift);
  opacity: .8;
}

.hero h1 {
  color: var(--ap-white);
  font-size: 1.6rem;
  margin-bottom: .25rem;
}

/* The tagline. Mono caps would shout at this length, so it stays in voice
   type — but it earns its place: 1958 is the whole pitch. */
.hero p {
  color: rgba(255, 255, 255, .84);
  font-family: var(--ap-display);
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.4;
  margin: 0 auto;
  max-width: 22rem;
}

.hero-logo {
  display: block;
  height: var(--ap-logo-hero);
  width: auto;
  max-width: 84%;
  margin: 0 auto 1.125rem;
}

/* The same double rule, standing alone under the mark. */
.hero-rule {
  width: 64px;
  height: 4px;
  border: 0;
  border-top: 2px solid var(--ap-mint);
  border-bottom: 1px solid var(--ap-amber-lift);
  background: none;
  margin: 0 auto 1rem;
}

/* --- open / closed -------------------------------------------------------
   Closed now reads amber rather than washed-out white. Amber is the
   pharmacy's own colour for "not yet", and it is legible; the old grey
   treatment made the most important fact on the screen the faintest.
   ------------------------------------------------------------------------ */

.status {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-top: 1.125rem;
  padding: .4rem .875rem .4rem .75rem;
  border-radius: 999px;
  border: 1px solid rgba(127, 227, 181, .35);
  background: rgba(127, 227, 181, .13);
  font-family: var(--ap-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ap-mint);
}
.status::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--ap-mint);
  box-shadow: 0 0 0 3px rgba(127, 227, 181, .18);
}
.status[data-open="false"] {
  background: rgba(240, 165, 60, .16);
  border-color: rgba(240, 165, 60, .42);
  color: var(--ap-amber-lift);
}
.status[data-open="false"]::before {
  background: var(--ap-amber-lift);
  box-shadow: 0 0 0 3px rgba(240, 165, 60, .18);
}

/* --- quick actions -------------------------------------------------------
   Refill is the reason the app exists, so it is the one element allowed to
   lift off the page. The other two share a single panel divided by a
   hairline rather than floating as separate boxes.
   ------------------------------------------------------------------------ */

.quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 0;
  row-gap: .75rem;
  margin: 1.75rem 0 .5rem;
}

.tile {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: .75rem;
  min-height: 116px;
  padding: 1rem;
  background: var(--ap-white);
  border: 1px solid var(--ap-line);
  text-decoration: none;
  color: var(--ap-ink);
  transition: transform .12s ease;
}
.tile:active { transform: scale(.98); }
.tile-icon { color: var(--ap-amber); line-height: 0; }
.tile-icon svg { display: block; width: 26px; height: 26px; }
.tile-label {
  font-family: var(--ap-display);
  font-size: 1.08rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--ap-green);
}
.tile-sub {
  display: block;
  font-family: var(--ap-sans);
  font-size: .8125rem;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ap-muted);
  margin-top: .25rem;
}

/* The pair, joined into one panel. */
.quick > .tile:nth-child(2) { border-radius: var(--ap-radius) 0 0 var(--ap-radius); border-right: 0; }
.quick > .tile:nth-child(3) { border-radius: 0 var(--ap-radius) var(--ap-radius) 0; }

/* The one raised thing on the screen. */
.tile-primary {
  grid-column: 1 / -1;
  min-height: 0;
  flex-direction: row;
  align-items: center;
  gap: .875rem;
  padding: 1.125rem 1.25rem;
  border-radius: var(--ap-radius);
  background: var(--ap-green);
  border-color: var(--ap-green);
  box-shadow: 0 8px 22px -10px rgba(4, 33, 26, .55);
}
.tile-primary .tile-icon { color: var(--ap-mint); flex: 0 0 auto; }
.tile-primary .tile-icon svg { width: 30px; height: 30px; }
.tile-primary .tile-label { color: var(--ap-white); font-size: 1.2rem; }
.tile-primary .tile-sub {
  color: rgba(127, 227, 181, .85);
  font-family: var(--ap-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* --- panels --------------------------------------------------------------
   Cards and row-lists run edge to edge on hairlines instead of floating in
   shadowed boxes. Printed material, not a card deck.
   ------------------------------------------------------------------------ */

.card, .rows {
  background: var(--ap-white);
  border: 1px solid var(--ap-line);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  box-shadow: none;
  margin-left: calc(var(--ap-gutter) * -1);
  margin-right: calc(var(--ap-gutter) * -1);
}
.card {
  padding: 1.125rem var(--ap-gutter);
  margin-bottom: 1.25rem;
}
.rows { overflow: hidden; }
.card h3 { margin-bottom: .25rem; }
.card p:last-child { margin-bottom: 0; }

/* A row-list nested inside a card must not bleed twice. */
.card .rows {
  margin-left: 0;
  margin-right: 0;
  border: 0;
}

/* A section header already ends in a rule. A panel opening directly beneath
   it does not need a second one four pixels later. */
h2 + .card,
h2 + .rows,
h2 + .formhost { border-top: 0; }

.row {
  display: flex;
  align-items: center;
  gap: .875rem;
  min-height: 58px;
  padding: .8rem var(--ap-gutter);
  border-bottom: 1px solid var(--ap-line-soft);
  text-decoration: none;
  color: var(--ap-ink);
}
.row:last-child { border-bottom: 0; }
.row:active { background: var(--ap-green-tint); }
/* Colour carries the information: amber means the row does something when you
   tap it, grey means it is just an item in a list. Eight identical amber
   bullets down a page of services was decoration, not signal. */
.row-icon { color: var(--ap-line); font-size: 1.125rem; width: 22px; text-align: center; flex: 0 0 auto; }
a.row .row-icon { color: var(--ap-amber); }
.row-body { flex: 1; min-width: 0; }
/* These are spans, so they must be told to stack. Without this the label and
   value render on one line — "Phone401-900-1788". */
.row-title { display: block; font-weight: 600; font-size: 1.02rem; line-height: 1.35; }
.row-sub { display: block; font-size: .875rem; color: var(--ap-muted); line-height: 1.4; margin-top: .0625rem; overflow-wrap: anywhere; }
.row-chev { color: var(--ap-muted); flex: 0 0 auto; }
a.row .row-title { color: var(--ap-green); }

/* --- hours: the dispensing label ------------------------------------------
   Day names in field type, times in tabular mono, joined by a dotted leader
   so the eye can run from one to the other. This is how the hours are
   printed on the door.
   ------------------------------------------------------------------------ */

.hours { list-style: none; margin: 0; padding: 0; }
.hours li {
  display: flex;
  align-items: baseline;
  gap: 0;
  padding: .5rem 0;
}
.hours .day {
  display: flex;
  align-items: baseline;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--ap-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ap-muted);
}
/* The leader. */
.hours .day::after {
  content: "";
  flex: 1 1 auto;
  min-width: 1.25rem;
  margin: 0 .625rem .28em;
  border-bottom: 1px dotted var(--ap-line);
}
.hours li > span:last-child {
  flex: 0 0 auto;
  font-family: var(--ap-mono);
  font-size: .9375rem;
  font-variant-numeric: tabular-nums;
  color: var(--ap-ink);
  text-align: right;
}
.hours li[data-today="true"] .day { color: var(--ap-green); font-weight: 600; }
.hours li[data-today="true"] > span:last-child { color: var(--ap-green); font-weight: 600; }
/* Specificity note: `.hours li > span:last-child` above is (0,2,1) and the
   today rule is (0,2,2), so a plain `.hours .closed` at (0,2,0) silently lost
   and "Closed" rendered as ordinary ink. These two selectors outrank both. */
.hours li > span.closed,
.hours li[data-today="true"] > span.closed { color: var(--ap-amber); }

/* --- buttons ------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: var(--ap-tap);
  padding: .75rem 1.375rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.btn-primary { background: var(--ap-green); color: var(--ap-white); }
.btn-primary:active { background: var(--ap-green-deep); }
.btn-mint { background: var(--ap-mint); color: var(--ap-green-deep); }
.btn-ghost { background: transparent; border-color: var(--ap-green); color: var(--ap-green); }
.btn-block { width: 100%; }

/* Focus. One ring cannot serve both surfaces: the bright amber is invisible
   on paper (2.07:1) and the dark amber disappears into the green (2.32:1).
   So the default is the dark tone, and anything sitting on green overrides. */
a:focus-visible, button:focus-visible {
  outline: 3px solid var(--ap-amber);
  outline-offset: 2px;
}
.appbar a:focus-visible,
.appbar button:focus-visible,
.hero a:focus-visible,
.tile-primary:focus-visible,
.install a:focus-visible,
.install button:focus-visible {
  outline-color: var(--ap-amber-lift);
}

/* --- form host: where the InSERVio embed lands --------------------------- */

.formhost {
  background: var(--ap-white);
  border: 1px solid var(--ap-line);
  border-left: 0;
  border-right: 0;
  border-radius: 0;
  padding: 1.25rem var(--ap-gutter);
  margin-left: calc(var(--ap-gutter) * -1);
  margin-right: calc(var(--ap-gutter) * -1);
  min-height: 12rem;
}
/* The embed ships its own markup; nudge it toward app-sized controls without
   fighting it. Deliberately shallow selectors only. */
.formhost input:not([type="checkbox"]):not([type="radio"]),
.formhost select,
.formhost textarea {
  /* Must never fall below 16px or iOS zooms the page on focus. max() keeps
     that floor while still scaling with the global size above. */
  font-size: max(16px, 1rem) !important;
  min-height: 48px;
  border-radius: 8px !important;
}
.formhost button, .formhost input[type="submit"] {
  min-height: var(--ap-tap);
  border-radius: 999px !important;
  font-weight: 600;
}

/* --- InSERVio embed overrides --------------------------------------------
   These reach into another vendor's markup, so !important is unavoidable —
   the embed ships its own stylesheet and would otherwise win. Class and id
   selectors are both listed because the embed's markup is not ours to pin
   down, and a selector that matches nothing costs nothing.

   The heading block goes because the page above the form already says
   "Refill a prescription" in the app's own type.
   ------------------------------------------------------------------------ */

.formhost .inservio-title-name,
.formhost .inservio-title-description,
.formhost .inservio-title-hr,
.formhost #inservio-title-name,
.formhost #inservio-title-description,
.formhost #inservio-title-hr {
  display: none !important;
}

.formhost .inservio-submit-button,
.formhost #inservio-submit-button {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 1.25rem 0 0 !important;
  padding: .8125rem 1.375rem !important;
  min-height: var(--ap-tap) !important;
  box-sizing: border-box !important;

  background: var(--ap-green) !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--ap-white) !important;

  font-family: var(--ap-sans) !important;
  font-size: 1rem !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-align: center !important;
  text-transform: none !important;
  letter-spacing: 0 !important;

  cursor: pointer !important;
  box-shadow: none !important;
  transition: background-color .15s ease !important;
}

.formhost .inservio-submit-button:hover,
.formhost #inservio-submit-button:hover {
  background: var(--ap-green-deep) !important;
  color: var(--ap-white) !important;
}

.formhost .inservio-submit-button:active,
.formhost #inservio-submit-button:active {
  background: var(--ap-green-deep) !important;
  transform: translateY(1px);
}

.formhost .inservio-submit-button:focus-visible,
.formhost #inservio-submit-button:focus-visible {
  outline: 3px solid var(--ap-amber) !important;
  outline-offset: 2px !important;
}

.formhost .inservio-submit-button:disabled,
.formhost #inservio-submit-button:disabled {
  opacity: .55 !important;
  cursor: not-allowed !important;
}

/* If the embed wraps the button in a right-aligned or inline container, that
   container has to give up its width too or the button cannot fill it. */
.formhost .inservio-submit-button-container,
.formhost #inservio-submit-button-container {
  display: block !important;
  width: 100% !important;
  text-align: left !important;
}

.formloading {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--ap-mono);
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ap-muted);
  padding: 1.5rem 0;
}
.spinner { width: 18px; height: 18px; border: 2px solid var(--ap-line); border-top-color: var(--ap-amber-rule); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.notice {
  border-radius: 0;
  border-left: 3px solid var(--ap-green);
  padding: .875rem 1rem;
  font-size: .9375rem;
  margin-bottom: 1rem;
}
.notice-info { background: var(--ap-green-tint); color: var(--ap-green-deep); }
.notice-warn { background: var(--ap-amber-wash); color: #6b4a10; border-left-color: var(--ap-amber); }

/* --- tab bar ------------------------------------------------------------- */

.tabbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  height: calc(var(--ap-tabs) + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: rgba(245, 242, 234, .95);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid var(--ap-line);
}
.tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 2px;
  text-decoration: none;
  color: var(--ap-muted);
  font-family: var(--ap-mono);
  font-size: .625rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
}
/* Five tabs: keep labels on one line rather than letting a longer word like
   "Servicios" wrap and push the row taller. */
.tab span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tab svg { width: 22px; height: 22px; flex: 0 0 auto; }

@media (max-width: 360px) {
  .tab { font-size: .5625rem; letter-spacing: .04em; }
  .tab svg { width: 20px; height: 20px; }
}

/* The current tab is marked by the double rule again, this time overhead. */
.tab[aria-current="page"] { color: var(--ap-green); }
.tab[aria-current="page"]::before {
  content: "";
  position: absolute;
  top: 0; left: 22%; right: 22%;
  height: 2px;
  background: var(--ap-green);
}
.tab[aria-current="page"]::after {
  content: "";
  position: absolute;
  top: 3px; left: 22%; right: 22%;
  height: 1px;
  background: var(--ap-amber-rule);
  opacity: .7;
}

/* --- offline + install --------------------------------------------------- */

.offline {
  position: fixed;
  top: var(--ap-bar-total); left: 0; right: 0;
  z-index: 55;
  background: var(--ap-amber-lift);
  color: #3d2705;
  text-align: center;
  padding: .5rem 1rem;
  font-family: var(--ap-mono);
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .06em;
}
.offline[hidden] { display: none; }

.install {
  position: fixed;
  left: .75rem; right: .75rem;
  bottom: calc(var(--ap-tabs) + env(safe-area-inset-bottom, 0px) + .75rem);
  z-index: 70;
  max-width: 28rem;
  margin: 0 auto;
  background: var(--ap-green);
  color: var(--ap-white);
  border-radius: var(--ap-radius);
  border-top: 2px solid var(--ap-mint);
  padding: .9375rem 1rem;
  box-shadow: 0 18px 48px rgba(4, 33, 26, .3);
}
.install[hidden] { display: none; }
.install p { margin: 0 0 .1875rem; font-weight: 600; font-size: .9375rem; }
.install small { color: rgba(255,255,255,.75); font-size: .8125rem; line-height: 1.4; display: block; }
.install-row { display: flex; gap: .5rem; margin-top: .75rem; }
.install .btn { min-height: 38px; padding: .375rem 1rem; font-size: .875rem; flex: 1; }

/* The iOS steps. Each instruction sits beside the icon it is talking about,
   because "tap Share" only works for someone who already knows the glyph —
   and on this app, most people do not. The numbering is real: these have to
   happen in order. */
.install-steps {
  list-style: none;
  counter-reset: step;
  margin: .75rem 0 0;
  padding: 0;
}
.install-steps li {
  display: flex;
  align-items: center;
  gap: .625rem;
  counter-increment: step;
  padding: .375rem 0;
  color: rgba(255,255,255,.9);
  font-size: .8125rem;
  line-height: 1.35;
}
.install-steps li::before {
  content: counter(step);
  flex: 0 0 auto;
  font-family: var(--ap-mono);
  font-size: .625rem;
  font-weight: 600;
  color: var(--ap-mint);
}
.install-glyph {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 8px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(127,227,181,.28);
  color: var(--ap-mint);
}
.install-glyph svg { width: 17px; height: 17px; display: block; }

/* The same steps on the More page, where they sit on white rather than inside
   the dark pop-up. Only the colours change; the structure is identical, so a
   patient who saw the pop-up recognises this as the same instruction. */
.card .install-steps { margin-top: .5rem; }
.card .install-steps li { color: var(--ap-ink); font-size: .9375rem; padding: .4375rem 0; }
.card .install-steps li::before { color: var(--ap-amber); }
.card .install-glyph {
  background: var(--ap-green-tint);
  border-color: var(--ap-line);
  color: var(--ap-green);
}

/* Platform labels inside the catch-all block. Field type, so they read as
   headings for the steps beneath rather than as another instruction. */
.install-plat {
  font-family: var(--ap-mono);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ap-amber);
  margin: 1.125rem 0 .125rem;
}
.card [data-ip] > .install-plat:first-child { margin-top: .625rem; }

/* The panel reveals one branch at a time, so trim the gap the hidden ones
   would otherwise leave behind. */
.card [data-ip] > :last-child { margin-bottom: 0; }
.card [data-ip] .btn { margin-top: .375rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- device profile & autofill --------------------------------------------

   Two surfaces: the editor on profile.php, and the strip that appears over an
   InSERVio form once something has been filled in.

   The editor deliberately does not borrow .formhost's input styling. That
   block exists to wrestle another vendor's markup into shape with !important;
   these are our own fields and can be styled honestly.
   ------------------------------------------------------------------------ */

/* Any author-level `display` outranks the UA stylesheet's [hidden] rule, so a
   flex or grid container with the hidden attribute renders anyway — which is
   how the autofill banner first shipped as an empty green bar over the refill
   form. Declared once, here, rather than trusting every future rule to
   remember to guard itself. */
[hidden] { display: none !important; }

.pf-privacy {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  margin: 1.125rem 0 1.25rem;
  padding: .875rem 1rem;
  border-radius: var(--ap-radius);
  background: var(--ap-green-tint);
  border: 1px solid color-mix(in srgb, var(--ap-green) 14%, transparent);
}
.pf-privacy p { margin: 0; font-size: .9rem; line-height: 1.5; color: var(--ap-green-deep); }
.pf-privacy-icon { flex: 0 0 auto; color: var(--ap-green); }
.pf-privacy-icon svg { width: 22px; height: 22px; display: block; }

.pf-section { margin-bottom: 1rem; }
.pf-h {
  margin: 0 0 .875rem;
  font-family: var(--ap-mono);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ap-amber);
}

.pf-field { margin-bottom: 1rem; }
.pf-field:last-child { margin-bottom: 0; }

.pf-label {
  display: block;
  margin-bottom: .375rem;
  font-size: .9375rem;
  font-weight: 600;
  color: var(--ap-ink);
}
.pf-optional { font-weight: 400; color: var(--ap-muted); font-size: .8125rem; }

.pf-input {
  display: block;
  width: 100%;
  /* 16px floor or iOS zooms the page the moment the field takes focus. */
  font-size: max(16px, 1rem);
  font-family: var(--ap-sans);
  color: var(--ap-ink);
  min-height: var(--ap-tap);
  padding: .625rem .8125rem;
  background: var(--ap-white);
  border: 1px solid var(--ap-line);
  border-radius: 8px;
  -webkit-appearance: none;
  appearance: none;
}
.pf-input:focus {
  outline: none;
  border-color: var(--ap-green);
  box-shadow: 0 0 0 3px var(--ap-green-tint);
}
/* Rx numbers read as data, not prose. */
.pf-input-rx { font-family: var(--ap-mono); letter-spacing: .02em; }

.pf-hint { margin: .375rem 0 0; font-size: .8125rem; color: var(--ap-muted); line-height: 1.45; }
.pf-hint-lead { margin: -.375rem 0 .875rem; }

.pf-med { display: flex; gap: .5rem; align-items: flex-start; margin-bottom: .625rem; }
.pf-med-fields { flex: 1; min-width: 0; display: grid; gap: .375rem; }
.pf-med-remove {
  flex: 0 0 auto;
  width: var(--ap-tap);
  min-height: var(--ap-tap);
  border: 1px solid var(--ap-line);
  border-radius: 8px;
  background: transparent;
  color: var(--ap-muted);
  font-size: 1.375rem;
  line-height: 1;
  cursor: pointer;
}
.pf-med-remove:active { background: var(--ap-green-tint); }

.pf-add {
  display: inline-flex;
  align-items: center;
  gap: .4375rem;
  min-height: var(--ap-tap);
  margin-top: .375rem;
  padding: 0 .875rem;
  background: transparent;
  border: 1px dashed var(--ap-line);
  border-radius: 999px;
  color: var(--ap-green);
  font-family: var(--ap-sans);
  font-size: .9375rem;
  font-weight: 600;
  cursor: pointer;
}
.pf-add:active { background: var(--ap-green-tint); }

.pf-status {
  margin: 0 0 .75rem;
  padding: .625rem .8125rem;
  border-radius: 8px;
  font-size: .9rem;
  font-weight: 600;
}
.pf-status-ok   { background: var(--ap-green-tint); color: var(--ap-green-deep); }
.pf-status-warn { background: var(--ap-amber-wash); color: #6b4a10; }

.pf-clear {
  display: block;
  width: 100%;
  min-height: var(--ap-tap);
  margin-top: .625rem;
  background: transparent;
  border: 0;
  color: var(--ap-muted);
  font-family: var(--ap-sans);
  font-size: .9375rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
.pf-foot { margin: 1rem 0 0; font-size: .8125rem; color: var(--ap-muted); line-height: 1.5; }
.pf-shortcut { margin: 1.75rem 0 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--ap-line-soft); }

/* --- over the form -------------------------------------------------------- */

.pf-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 1rem 0 0;
  padding: .6875rem .875rem;
  border-radius: var(--ap-radius);
  background: var(--ap-green-tint);
  border-left: 3px solid var(--ap-green);
}
.pf-banner-text { font-size: .875rem; font-weight: 600; color: var(--ap-green-deep); line-height: 1.4; }
.pf-banner-link {
  flex: 0 0 auto;
  font-size: .875rem;
  color: var(--ap-green);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.pf-chips { margin: .75rem 0 0; }
.pf-chip-head {
  margin: 0 0 .5rem;
  font-size: .8125rem;
  color: var(--ap-muted);
}
.pf-chiprow { display: flex; flex-wrap: wrap; gap: .5rem; }

.pf-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .0625rem;
  min-height: 44px;
  padding: .4375rem .8125rem;
  background: var(--ap-white);
  border: 1px solid var(--ap-line);
  border-radius: 999px;
  font-family: var(--ap-sans);
  text-align: left;
  cursor: pointer;
}
.pf-chip-name { font-size: .875rem; font-weight: 600; color: var(--ap-ink); line-height: 1.2; }
.pf-chip-rx { font-family: var(--ap-mono); font-size: .75rem; color: var(--ap-muted); line-height: 1.2; }

/* Selected state carries a border and a fill, not colour alone — some of this
   audience will not reliably see a tint change. */
.pf-chip[aria-pressed="true"] {
  background: var(--ap-green);
  border-color: var(--ap-green);
}
.pf-chip[aria-pressed="true"] .pf-chip-name { color: var(--ap-white); }
.pf-chip[aria-pressed="true"] .pf-chip-rx { color: var(--ap-mint); }

.pf-invite {
  margin: 0 0 1.5rem;
  padding: 1.125rem 1.125rem 1.25rem;
  border-radius: var(--ap-radius);
  border: 1px dashed var(--ap-line);
  background: var(--ap-white);
}
.pf-invite h3 { margin: 0 0 .375rem; font-size: 1.05rem; }
.pf-invite p { margin: 0 0 .875rem; font-size: .9rem; color: var(--ap-muted); line-height: 1.55; }

/* A field we filled gets a quiet flag, so a patient scanning the form can see
   which answers came from their phone and which they still owe. */
.formhost [data-ap-filled] {
  background-image: linear-gradient(to right, var(--ap-green-tint), var(--ap-green-tint));
  background-size: 3px 100%;
  background-repeat: no-repeat;
  background-position: left center;
}

@media (prefers-reduced-motion: reduce) {
  .pf-chip, .pf-banner { transition: none; }
}

/* --- refill history ------------------------------------------------------- */

.pf-chip-when {
  font-size: .6875rem;
  color: var(--ap-amber);
  line-height: 1.2;
  margin-top: .0625rem;
}
.pf-chip[aria-pressed="true"] .pf-chip-when { color: var(--ap-amber-lift); }

.pf-med-when {
  font-family: var(--ap-mono);
  font-size: .6875rem;
  color: var(--ap-muted);
  letter-spacing: .04em;
}

.pf-toggle {
  display: flex;
  gap: .6875rem;
  align-items: flex-start;
  margin: 1.125rem 0 0;
  padding: .875rem;
  border-radius: var(--ap-radius);
  background: var(--ap-paper);
  border: 1px solid var(--ap-line-soft);
  cursor: pointer;
}
.pf-toggle input {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: .0625rem 0 0;
  accent-color: var(--ap-green);
}
.pf-toggle-body { display: block; }
.pf-toggle-title { display: block; font-size: .9375rem; font-weight: 600; color: var(--ap-ink); }
.pf-toggle-hint { display: block; margin-top: .25rem; font-size: .8125rem; color: var(--ap-muted); line-height: 1.45; }

.pf-hint-note {
  margin-top: .875rem;
  padding-top: .875rem;
  border-top: 1px solid var(--ap-line-soft);
}