/* ==========================================================================
   Shell — the chrome that wraps every page.

   Navbar, language switcher, account menu, contact band, footer and the two
   floating actions. Split out of main.css, which had passed the 600-line rule
   and is the design SYSTEM: tokens, layout primitives, buttons, cards, forms.
   This file is the furniture built out of them.

   Loaded on every page, immediately after main.css and before depth.css.
   Unlike depth.css this is NOT optional — remove the <link> and the page has
   no navigation.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Navbar
   -------------------------------------------------------------------------- */

.nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--grey-200);
}
.nav__in {
  height: var(--nav-h); display: flex; align-items: center; gap: var(--s5);
  width: min(100% - 2 * var(--s5), var(--wrap)); margin-inline: auto;
}
.nav__logo { display: flex; align-items: center; gap: var(--s3); flex: 0 0 auto; }
.nav__logo:hover { text-decoration: none; }
.nav__logo img { height: 40px; width: 40px; object-fit: contain; }
/* Wordmark lives here, never inside the image — an image that carries its own
   text collides with the text beside it. */
.nav__name {
  display: flex; flex-direction: column; line-height: 1.05;
  font-weight: 700; font-size: 1.02rem; color: var(--navy); letter-spacing: -.01em;
}
.nav__name strong {
  font-weight: 500; font-size: .82rem; color: var(--grey-600); letter-spacing: .01em;
}
.nav__links {
  display: flex; align-items: center; gap: var(--s4);
  margin-inline-start: auto; min-width: 0;
}
.nav__links a {
  color: var(--grey-900); font-size: .92rem; font-weight: 500; white-space: nowrap;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--blue); text-decoration: none; }
.nav__links .btn { padding: 9px var(--s4); min-height: 42px; white-space: nowrap; }

/* --------------------------------------------------------------------------
   Account menu — replaces the "Mon dossier" button once signed in.

   A circle with the patient's photo, opening a small menu. The bar already
   carries six links and a language switcher; adding two more pushed it into a
   horizontal scroll on a laptop. Sign-out also should not sit at the same
   weight as a navigation link.
   -------------------------------------------------------------------------- */

.acct { position: relative; flex: 0 0 auto; }

.acct__btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px 3px 3px; cursor: pointer;
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--r-full);
  transition: border-color .15s, box-shadow .15s;
}
.acct__btn:hover { border-color: var(--blue); box-shadow: var(--shadow); }
.acct__btn[aria-expanded="true"] { border-color: var(--blue); background: var(--blue-soft); }

.acct__avatar {
  width: 34px; height: 34px; border-radius: 50%; overflow: hidden;
  display: grid; place-items: center; flex: 0 0 auto;
  background: var(--blue); color: var(--white);
  font-weight: 700; font-size: .95rem; line-height: 1;
}
.acct__avatar img { width: 100%; height: 100%; object-fit: cover; }
.acct__caret { color: var(--grey-400); font-size: .7rem; transition: transform .15s; }
.acct__btn[aria-expanded="true"] .acct__caret { transform: rotate(180deg); }

.acct__menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 200;
  min-width: 244px; padding: var(--s2);
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--r); box-shadow: var(--shadow-lg);
}
.acct__menu[hidden] { display: none; }

.acct__head {
  padding: var(--s3); margin-bottom: var(--s1);
  border-bottom: 1px solid var(--grey-100);
}
.acct__head strong { display: block; font-size: .95rem; color: var(--navy); }
.acct__head small {
  display: block; color: var(--grey-600); font-size: .8rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.acct__menu a,
.acct__out {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  padding: 10px var(--s3); border: 0; border-radius: var(--r-sm);
  background: none; cursor: pointer; text-align: start;
  font: inherit; font-size: .92rem; color: var(--grey-900); white-space: nowrap;
}
.acct__menu a:hover, .acct__out:hover { background: var(--grey-100); text-decoration: none; }
.acct__icon { width: 20px; text-align: center; color: var(--grey-400); }
.acct__out { color: var(--red); border-top: 1px solid var(--grey-100); border-radius: 0; margin-top: var(--s1); }
.acct__out:hover { background: var(--red-soft); }
.acct__out[disabled] { opacity: .55; cursor: default; }
.nav__toggle { display: none; background: none; border: 0; padding: var(--s2); cursor: pointer; }

/* Six links + language + a sign-in button need real room. Collapsing at 940px
   left them overlapping the logo on a laptop. */
@media (max-width: 1180px) {
  .nav__toggle { display: block; margin-inline-start: auto; }
  .nav__links {
    position: fixed; inset: var(--nav-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--grey-200);
    padding: var(--s3) var(--s5) var(--s5); margin: 0;
    max-height: calc(100dvh - var(--nav-h)); overflow-y: auto;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: .18s;
  }
  .nav__links.is-open { transform: none; opacity: 1; pointer-events: auto; }
  .nav__links > a {
    padding-block: var(--s3); border-bottom: 1px solid var(--grey-100);
  }
  .nav__links .btn { margin-top: var(--s3); }

  /* In the drawer the menu is already open by definition — there is nothing to
     drop it down over. The avatar row and its links become part of the list. */
  .acct { margin-top: var(--s3); }
  .acct__btn { display: none; }
  .acct__menu {
    position: static; display: block; min-width: 0;
    border: 0; box-shadow: none; padding: 0; background: none;
  }
  .acct__menu[hidden] { display: block; }
  .acct__head { padding-inline: 0; }
  .acct__menu a, .acct__out { padding-inline: 0; border-radius: 0; }
  .acct__menu a { border-bottom: 1px solid var(--grey-100); }
}

/* Language switcher — one flag button, the rest in a dropdown. Four buttons
   in a row ate a third of the navbar on a phone. */
.lang { position: relative; flex: 0 0 auto; }

.lang__btn {
  display: inline-flex; align-items: center; gap: var(--s2);
  border: 1px solid var(--grey-200); background: var(--white);
  border-radius: var(--r-full); padding: 5px 10px 5px 6px;
  font-size: .82rem; font-weight: 600; color: var(--grey-900); cursor: pointer;
}
.lang__btn:hover { border-color: var(--blue); }
.lang__caret { color: var(--grey-400); font-size: .7rem; }

.lang__flag {
  width: 22px; height: 15px; border-radius: 3px; overflow: hidden;
  flex: 0 0 auto; display: block; box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
}
.lang__flag svg { width: 100%; height: 100%; display: block; }

.lang__menu {
  position: absolute; top: calc(100% + 6px); inset-inline-end: 0; z-index: 200;
  list-style: none; margin: 0; padding: var(--s1);
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--r); box-shadow: var(--shadow-lg); min-width: 168px;
}
.lang__menu[hidden] { display: none; }
.lang__menu button {
  display: flex; align-items: center; gap: var(--s3); width: 100%;
  border: 0; background: none; cursor: pointer; text-align: start;
  padding: 9px var(--s3); border-radius: var(--r-sm); font-size: .9rem;
}
.lang__menu button:hover { background: var(--grey-100); }
.lang__menu [aria-selected="true"] button {
  font-weight: 600; color: var(--blue); background: var(--blue-soft);
}
.lang__btn[aria-expanded="true"] { border-color: var(--blue); background: var(--blue-soft); }
.lang__btn[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }
.lang__caret { transition: transform .15s; }

/* In the mobile drawer the switcher must not float at all.
   `.nav__links` carries `overflow-y: auto`, and CSS computes the other axis to
   `auto` as soon as one axis is not `visible` — so the drawer is a scroll
   container in BOTH directions and it CLIPS anything absolutely positioned
   that reaches past its padding box. Dropping the menu to the right therefore
   opened it into a strip iOS Safari never paints: the caret turned, the pill
   lit up, and no languages appeared. Dropping it down was clipped the same
   way, one fold lower.

   There are only four site languages, so lay them out in the flow as a row of
   pills — exactly what `.acct__menu` already does a few rules above. Nothing
   is positioned, so nothing can be clipped. Declared AFTER the base rule on
   purpose; the same selector inside the earlier @media block lost to it on
   source order. */
@media (max-width: 1180px) {
  .lang { margin-top: var(--s3); }
  .lang__btn { display: none; }

  /* Two columns, not a wrapping row: four names of unequal length (Français,
     English, العربية, Türkçe) laid out with flex push the last one off a
     390 px screen. A grid gives each an equal half and wraps to 2×2 whatever
     the language names are. */
  .lang__menu {
    position: static; transform: none; min-width: 0;
    display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2);
    border: 0; box-shadow: none; padding: 0; background: none;
  }
  /* The drawer IS the open state — the pill that used to toggle it is gone. */
  .lang__menu[hidden] { display: grid; }
  .lang__menu button {
    justify-content: center; border: 1px solid var(--grey-200);
    border-radius: var(--r-full); padding: 8px var(--s3);
  }
  .lang__menu [aria-selected="true"] button { border-color: var(--blue); }
}

/* Google sign-in button — the G sits on a white disc inside the solid button,
   the way 3aychek does it. Google's brand rules want the mark on white, and a
   bare multicolour G on navy reads as a rendering glitch. */
.btn--google { gap: var(--s3); }
.btn--google svg {
  flex: 0 0 auto; background: var(--white); border-radius: 50%;
  padding: 4px; box-sizing: content-box; width: 15px; height: 15px;
}

/* --------------------------------------------------------------------------
   Contact band — sits directly above the footer on every public page.
   -------------------------------------------------------------------------- */

.cband {
  background: var(--blue-soft);
  border-top: 1px solid var(--blue-line);
  padding-block: var(--s8);
}
.cband__in { display: grid; gap: var(--s6); align-items: center; }
@media (min-width: 900px) {
  .cband__in { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: var(--s7); }
}
.cband h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: var(--s3); }
.cband .lead { margin: 0; }

/* One button. The "Contact" link that sat beside it is gone — the nav and the
   footer of the same page both already carry it. */
.cband__actions {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s4);
}
@media (min-width: 900px) { .cband__actions { align-items: center; flex-direction: row; } }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer { background: var(--navy-deep); color: #C6D3E4; padding-block: var(--s8) var(--s5); }
.footer h4 { color: var(--white); font-size: .95rem; margin-bottom: var(--s3); }
.footer a { color: #C6D3E4; font-size: .92rem; }
.footer a:hover { color: var(--white); }
.footer ul { list-style: none; padding: 0; }
.footer li + li { margin-top: var(--s2); }
.footer__cols { display: grid; gap: var(--s6); grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.footer__bottom {
  margin-top: var(--s7); padding-top: var(--s5);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; gap: var(--s4);
  justify-content: space-between; font-size: .85rem;
}
/* The relationship must always be stated plainly next to the Medipol name */
.footer__affil { color: #8FA6C4; max-width: 46ch; font-size: .85rem; }

/* ---- Credibility strip ----------------------------------------------------
   JCI, Health Türkiye, university hospital.

   Each mark sits on its own white chip. Dropping them straight onto the navy
   was tried first and two of the three disappeared: the JCI seal is gold on
   transparent and the university mark is grey line art, so on a dark ground
   one glowed and one vanished. A white chip is also what these marks are
   designed to sit on — recolouring somebody's registered logo to suit our
   background is not ours to do.
   -------------------------------------------------------------------------- */
.footer__trust {
  margin-top: var(--s7); padding-top: var(--s6);
  border-top: 1px solid rgba(255,255,255,.12);
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s5) var(--s7); justify-content: center;
}
.footer__trust span { display: grid; place-items: center; }

/* Straight on the navy, no chips: the files all carry alpha, so the footer's
   own gradient shows through them.

   Two treatments, because the three marks are not the same kind of thing.
   The Health Türkiye wordmark and the university seal are line art whose ink
   is dark — invisible on navy — so they are rendered as flat white. The JCI
   seal is a gold medallion: flattening it to white turns it into a plain
   disc with nothing inside, which is worse than leaving it alone. It keeps
   its own colour. */
.footer__trust img {
  height: 46px; width: auto; display: block;
  filter: brightness(0) invert(1);
  opacity: .82; transition: opacity .18s, transform .18s;
}
/* Written as `.footer__trust img.…` on purpose: a bare class loses to
   `.footer__trust img` on specificity and the seal came out as a blank disc. */
.footer__trust img.footer__mark--color { filter: none; opacity: .95; height: 52px; }
.footer__trust span:hover img { opacity: 1; transform: translateY(-2px); }

/* The strip already draws the rule above it. */
.footer__trust + .footer__bottom { margin-top: var(--s6); border-top: 0; padding-top: 0; }

@media (max-width: 560px) {
  .footer__trust { gap: var(--s4) var(--s5); }
  .footer__trust img { height: 34px; }
}

/* ---- The bottom line ------------------------------------------------------
   Copyright, what the company is, and the disclaimer. Three items, so the
   middle one centres itself rather than fighting for the gap.
   -------------------------------------------------------------------------- */
.footer__bridge {
  display: inline-flex; align-items: center; gap: var(--s2);
  color: #C6D3E4; font-weight: 500; white-space: nowrap;
}
.footer__heart { width: 15px; height: 15px; fill: #E4574C; flex: none; }
.footer__flag  {
  width: 22px; height: auto; flex: none;
  border-radius: 2px; box-shadow: 0 0 0 1px rgba(255,255,255,.25);
}


/* --------------------------------------------------------------------------
   Floating actions — mounted by UI.mountFabs() on every public page.

   Left = deposit a medical file (the funnel). Right = talk to a person.
   Physical corners, not a stack, so neither is ever hit by accident.

   They are pills that collapse to a disc: the label is revealed on hover on a
   pointer device, and is never shown on a phone, where two labelled pills would
   sit across the content. Deliberately below the toasts (z 900) and far below
   the lightbox (z 950) — a floating button must never land on top of a video
   or an error message.
   -------------------------------------------------------------------------- */

.fabs {
  position: fixed; z-index: 880;
  inset-block-end: var(--s5); inset-inline: var(--s5);
  display: flex; justify-content: space-between; align-items: flex-end;
  pointer-events: none;   /* the bar is a rail; only the buttons take clicks */
}

.fab {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: 0;
  height: 56px; padding: 0; border-radius: var(--r-full);
  color: var(--white); font-weight: 600; font-size: .93rem;
  box-shadow: 0 8px 26px rgba(7,29,61,.34);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, gap .22s, padding .22s;
  overflow: hidden;
}
.fab:hover { text-decoration: none; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(7,29,61,.4); }
.fab:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* Both in the brand blue: two different colours read as two different systems,
   and these are the same offer twice ("give us the file" / "ask us about it"). */
.fab--upload  { background: var(--blue); }
.fab--upload:hover  { background: var(--blue-hover); }
.fab--contact { background: var(--navy); }
.fab--contact:hover { background: var(--blue); }

.fab__icon {
  flex: 0 0 auto; width: 56px; height: 56px;
  display: grid; place-items: center;
}
.fab__icon svg { width: 23px; height: 23px; }

/* The site mark, on the white disc it is drawn for. A navy logo on a navy
   button would be a hole in the button. */
.fab__icon--logo::before {
  content: ''; position: absolute; width: 40px; height: 40px;
  border-radius: 50%; background: var(--white);
}
.fab__icon--logo { position: relative; }
.fab__icon--logo img { position: relative; width: 26px; height: 26px; object-fit: contain; }

/* The label is laid out but clipped to zero width, so opening it is a width
   transition rather than a reflow of the page. */
.fab__label {
  max-width: 0; opacity: 0; white-space: nowrap;
  transition: max-width .28s cubic-bezier(.2,.7,.3,1), opacity .2s, padding-inline-end .28s;
  padding-inline-end: 0;
}
@media (hover: hover) and (pointer: fine) {
  .fab:hover .fab__label, .fab:focus-visible .fab__label {
    max-width: 340px; opacity: 1; padding-inline-end: var(--s5);
  }
}

@media (max-width: 620px) {
  .fabs { inset-block-end: var(--s4); inset-inline: var(--s4); }
  .fab { height: 50px; }
  .fab__icon { width: 50px; height: 50px; }
  .fab__icon svg { width: 21px; height: 21px; }
}

/* Toasts stack above the left-hand button rather than under it. */
.toasts { inset-block-end: calc(var(--s5) + 68px); }

@media (prefers-reduced-motion: reduce) {
  .fab, .fab__label { transition: none; }
  .fab:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   Contact form — one card, generated by js/forms.js, used on the homepage and
   on contact.html. Wide and rounded, the way 3aychek does it: the form IS the
   contact section, not a link to one.
   -------------------------------------------------------------------------- */

.contactcard {
  max-width: 720px; margin: var(--s6) auto 0;
  background: var(--white); border: 1px solid var(--blue-line);
  border-radius: var(--r-lg); padding: var(--s6);
  box-shadow: var(--e2, var(--shadow-lg));
}
@media (max-width: 620px) { .contactcard { padding: var(--s5) var(--s4); } }

.contactcard .row--2 { display: grid; gap: var(--s4); }
@media (min-width: 560px) { .contactcard .row--2 { grid-template-columns: 1fr 1fr; } }

/* The recorder sits inside the form, not behind a second link: for a lot of
   this audience, speaking is the only realistic channel. */
.voicebox {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s4); flex-wrap: wrap;
  margin: var(--s5) 0; padding: var(--s4);
  background: var(--teal-soft); border-radius: var(--r);
  border-inline-start: 3px solid var(--teal);
}
.voicebox strong { display: block; color: var(--navy); font-size: .97rem; }
.voicebox .voice { flex: 0 0 auto; }
@media (max-width: 560px) { .voicebox .voice, .voicebox .voice .btn { width: 100%; } }

.contactcard [data-nomed] {
  padding: var(--s3) var(--s4); background: var(--amber-soft);
  border-radius: var(--r-sm); color: var(--grey-900);
}

/* --------------------------------------------------------------------------
   Voice recorder — the WhatsApp shape.

   A round glassy mic to start; a live waveform, a timer, pause and stop while
   recording; a player and a re-record button when it is done. See the note at
   the top of js/recorder.js for why this one control is worth the trouble.
   -------------------------------------------------------------------------- */

.voice { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.voice__label { font-size: .85rem; color: var(--grey-600); }

/* The button. Glass over a teal core, with a ring that breathes so it reads as
   "press me" rather than as an icon someone forgot to style. */
.mic {
  position: relative; flex: 0 0 auto;
  width: 56px; height: 56px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--white);
  background:
    linear-gradient(145deg, rgba(255,255,255,.35), rgba(255,255,255,0) 45%),
    linear-gradient(140deg, #17B7B7 0%, #0B7C7C 100%);
  box-shadow: 0 8px 22px rgba(15,158,158,.4),
              inset 0 1px 1px rgba(255,255,255,.55),
              inset 0 -2px 6px rgba(0,0,0,.18);
  transition: transform .2s cubic-bezier(.2,.7,.3,1), box-shadow .2s;
}
.mic:hover { transform: translateY(-2px) scale(1.04); box-shadow: 0 14px 30px rgba(15,158,158,.5); }
.mic:active { transform: translateY(0) scale(.97); }
.mic svg { width: 24px; height: 24px; position: relative; z-index: 1; }

.mic__ring {
  position: absolute; inset: -6px; border-radius: 50%;
  border: 2px solid rgba(15,158,158,.35);
  animation: micPulse 2.4s ease-out infinite;
}
@keyframes micPulse {
  0%   { transform: scale(.92); opacity: .9; }
  70%  { transform: scale(1.18); opacity: 0; }
  100% { opacity: 0; }
}

/* Recording strip */
.rec {
  display: flex; align-items: center; gap: var(--s3); flex-wrap: nowrap;
  width: 100%; padding: var(--s2) var(--s3);
  background: rgba(255,255,255,.78); backdrop-filter: blur(8px);
  border: 1px solid var(--blue-line); border-radius: var(--r-full);
  box-shadow: var(--shadow);
}
.rec__dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: var(--red); animation: recBlink 1.2s ease-in-out infinite;
}
.rec__dot.is-paused { background: var(--grey-400); animation: none; }
@keyframes recBlink { 50% { opacity: .25; } }

.rec__time {
  flex: 0 0 auto; font-variant-numeric: tabular-nums;
  font-size: .9rem; font-weight: 600; color: var(--navy);
}
.rec__wave { flex: 1 1 auto; min-width: 80px; height: 40px; display: block; }

.rec__btn {
  flex: 0 0 auto; width: 40px; height: 40px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%;
  display: grid; place-items: center;
  font-size: .8rem; line-height: 1;
  background: var(--white); color: var(--navy);
  box-shadow: 0 2px 8px rgba(11,44,91,.18);
  transition: transform .18s, background-color .18s, color .18s;
}
.rec__btn:hover { transform: scale(1.08); }
.rec__btn--stop { background: var(--red); color: var(--white); }
.rec__btn--stop:hover { background: #9A1F18; }

.rec--done { border-radius: var(--r-lg); padding: var(--s3); }
.rec--done audio { flex: 1 1 auto; min-width: 0; height: 40px; }

@media (prefers-reduced-motion: reduce) {
  .mic__ring, .rec__dot { animation: none; }
  .mic, .rec__btn { transition: none; }
}

/* One more way to reach the only action that matters, at the bottom of every
   page. Someone who has read to the end of the footer is not looking for our
   email address — they are deciding.

   Glass over a lit blue core: a flat pill on a near-black footer reads as a
   disabled control. The sheen is a gradient, not an image, and the whole thing
   is one element. */
.footer__cta {
  position: relative; isolation: isolate;
  display: inline-flex; align-items: center; gap: var(--s3);
  margin-top: var(--s5); padding: 12px var(--s5) 12px 12px;
  border-radius: var(--r-full);
  color: #fff !important; font-size: .93rem; font-weight: 600; letter-spacing: .01em;
  background:
    linear-gradient(160deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,0) 42%),
    linear-gradient(135deg, #1C86E0 0%, #0B63B0 55%, #084A86 100%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 10px 26px rgba(11,99,176,.5),
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -3px 8px rgba(0,0,0,.28);
  transition: transform .22s cubic-bezier(.2,.7,.3,1), box-shadow .22s, filter .22s;
}
.footer__cta:hover {
  text-decoration: none; transform: translateY(-3px);
  filter: saturate(1.12);
  box-shadow: 0 18px 38px rgba(11,99,176,.6),
              inset 0 1px 1px rgba(255,255,255,.6),
              inset 0 -3px 8px rgba(0,0,0,.28);
}
.footer__cta:active { transform: translateY(-1px); }

/* A lit disc behind the icon, so the pill has a focal point rather than being
   an even block of blue. */
.footer__ctaIcon {
  flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.18);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45);
}
.footer__ctaIcon svg { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  .footer__cta { transition: none; }
  .footer__cta:hover { transform: none; }
}

/* --------------------------------------------------------------------------
   The nudge — "do you have a report with you?"

   ⚠ This had NO styles at all. It was written as a floating card and rendered
   as a wall of unstyled text under the footer, which is what Ayoub saw on his
   phone. Fifth component this week whose CSS was missing or in a file its own
   page does not load (CLAUDE.md rule 23).

   A small card that floats clear of the page, above the left-hand button and
   never over it, with an X. It is a suggestion, not a modal: no overlay, no
   trapped focus, nothing behind it goes dark. Someone reading a page about
   their illness must always be able to keep reading.
   -------------------------------------------------------------------------- */

.nudge {
  position: fixed; z-index: 890;
  inset-block-end: calc(var(--s5) + 72px);
  inset-inline-start: var(--s5);
  width: min(330px, calc(100vw - 2 * var(--s5)));
  padding: var(--s5) var(--s5) var(--s4);
  background: var(--white); border: 1px solid var(--grey-200);
  border-radius: var(--r-lg);
  box-shadow: 0 12px 40px rgba(7,29,61,.24);
  /* Starts low and faded; .is-in is added on the next frame. */
  opacity: 0; transform: translateY(14px);
  transition: opacity .3s ease, transform .3s cubic-bezier(.2,.7,.3,1);
}
.nudge.is-in { opacity: 1; transform: none; }

.nudge__body strong { display: block; color: var(--navy); margin-bottom: var(--s2); }
.nudge__body p { margin: 0 0 var(--s4); font-size: .92rem; color: var(--grey-600); }

.nudge__x {
  position: absolute; inset-block-start: 6px; inset-inline-end: 6px;
  width: 32px; height: 32px; padding: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: none;
  color: var(--grey-400); font-size: .95rem; line-height: 1;
}
.nudge__x:hover { background: var(--grey-100); color: var(--grey-900); }

/* On a phone it spans the width above the buttons — a 330 px card beside a
   50 px button leaves an awkward strip of page showing through. */
@media (max-width: 620px) {
  .nudge {
    inset-inline: var(--s4);
    inset-block-end: calc(var(--s4) + 64px);
    width: auto;
  }
}