/* ============================================================
   BetaDocta UI layer  (assets/css/bd-ui.css)
   ------------------------------------------------------------
   The pieces that interrupt someone: toasts, dialogs, the offline
   banner, the install card, the notification permission card.

   Rules this file follows, because these elements are the ones a
   user judges the whole platform by:
     - Brand tokens only. No new colours invented here.
     - Fraunces for the one line that carries meaning, Hanken
       Grotesk for everything the user has to read carefully.
     - One primary action per surface, in coral. Everything else
       is quiet.
     - Coral is for "yes, continue". Deep teal is for clinical
       urgency. Red danger is reserved for actual danger signs and
       is never used for a UI nag.
     - Works at 360px. Thumb-reachable. 44px minimum targets.
     - Honours prefers-reduced-motion completely.
   ============================================================ */

/* ---------- shared surface ---------- */
.bd-surface{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--radius-sm);
  box-shadow:var(--shadow);
  color:var(--text);
  font-family:var(--font-body);
}

/* ---------- toasts ----------
   popover="manual" so they do not light-dismiss when the user
   touches the page, and so several can coexist. */
.bd-toast{
  position:fixed;
  inset:auto 0 0 auto;
  margin:0 12px calc(12px + env(safe-area-inset-bottom,0px)) auto;
  width:min(380px, calc(100vw - 24px));
  padding:14px 16px;
  border:0;
  display:grid;
  grid-template-columns:22px 1fr auto;
  gap:12px;
  align-items:start;
  background:var(--green-900);
  color:#f2fbfc;
  border-radius:var(--radius-xs);
  box-shadow:0 18px 44px -20px rgba(6,38,43,.7);
  font:500 .93rem/1.45 var(--font-body);
  overflow:visible;
}
/* stack upward; sibling-index keeps them clear of each other */
@supports (bottom: calc(sibling-index() * 1px)){
  .bd-toast{ margin-bottom:calc(12px + env(safe-area-inset-bottom,0px) + (sibling-index() - 1) * 72px); }
}
@supports not (bottom: calc(sibling-index() * 1px)){
  .bd-toast + .bd-toast{ margin-bottom:calc(84px + env(safe-area-inset-bottom,0px)); }
  .bd-toast + .bd-toast + .bd-toast{ margin-bottom:calc(156px + env(safe-area-inset-bottom,0px)); }
}
.bd-toast__icon{ width:22px;height:22px;flex:none;opacity:.92 }
.bd-toast__body{ min-width:0 }
.bd-toast__title{ font-weight:700;display:block;margin:0 0 2px }
.bd-toast__text{ opacity:.86;display:block }
.bd-toast__close{
  appearance:none;background:transparent;border:0;color:inherit;
  opacity:.78;cursor:pointer;padding:4px;margin:-4px -4px 0 0;
  min-width:32px;min-height:32px;border-radius:8px;line-height:1;font-size:1.1rem;
}
.bd-toast__close:hover,.bd-toast__close:focus-visible{ opacity:1;background:rgba(255,255,255,.12) }
.bd-toast[data-tone="ok"]{ background:var(--green-700) }
.bd-toast[data-tone="warn"]{ background:#7a4a12 }
.bd-toast[data-tone="danger"]{ background:var(--danger) }

/* entry and exit from the top layer */
.bd-toast{ opacity:0; translate:0 12px;
  transition:opacity .22s ease, translate .22s ease, display .22s allow-discrete, overlay .22s allow-discrete; }
.bd-toast:popover-open{ opacity:1; translate:0 0 }
@starting-style{ .bd-toast:popover-open{ opacity:0; translate:0 12px } }

/* ---------- dialogs ---------- */
.bd-dialog{
  border:0;padding:0;background:transparent;
  width:min(520px, calc(100vw - 32px));
  max-height:min(86dvh, 760px);
  color:var(--text);
}
.bd-dialog::backdrop{
  background:rgba(6,38,43,.52);
  backdrop-filter:blur(3px);
  opacity:0;transition:opacity .24s ease, display .24s allow-discrete, overlay .24s allow-discrete;
}
.bd-dialog[open]::backdrop{ opacity:1 }
@starting-style{ .bd-dialog[open]::backdrop{ opacity:0 } }

.bd-dialog__panel{
  background:var(--paper);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  overflow:hidden auto;
  max-height:inherit;
  display:flex;flex-direction:column;
}
.bd-dialog{ opacity:0; scale:.97; translate:0 8px;
  transition:opacity .24s ease, scale .24s ease, translate .24s ease, display .24s allow-discrete, overlay .24s allow-discrete; }
.bd-dialog[open]{ opacity:1; scale:1; translate:0 0 }
@starting-style{ .bd-dialog[open]{ opacity:0; scale:.97; translate:0 8px } }

.bd-dialog__head{
  padding:26px 26px 0;
  display:grid;gap:8px;
}
/* the pulse rule: BetaDocta's signature mark, used once, at the top */
.bd-dialog__pulse{
  width:54px;height:14px;color:var(--green-500);opacity:.95;
  stroke-width:2;
}
.bd-dialog__title{
  /* styles.css uppercases h2 site-wide. A question about someone's health
     must not be shouted at them, so this is reset explicitly. */
  font:600 1.34rem/1.22 var(--font-display);
  text-transform:none;
  letter-spacing:-.01em;margin:0;color:var(--green-900);
}
.bd-dialog__lede{ margin:0;color:var(--muted);font-size:.96rem;line-height:1.55 }
.bd-dialog__body{ padding:18px 26px 4px;font-size:.96rem;line-height:1.6 }
.bd-dialog__body p{ margin:0 0 12px }
.bd-dialog__body ul{ margin:0 0 14px;padding-left:18px }
.bd-dialog__body li{ margin:0 0 7px }
.bd-dialog__foot{
  padding:16px 26px calc(22px + env(safe-area-inset-bottom,0px));
  display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;
  position:sticky;bottom:0;
  background:linear-gradient(to top, var(--paper) 72%, transparent);
}

/* ---------- buttons used inside these surfaces ---------- */
.bd-btn{
  appearance:none;cursor:pointer;font:600 .95rem/1 var(--font-body);
  min-height:46px;padding:0 20px;border-radius:999px;border:1px solid transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  transition:background .16s ease, color .16s ease, border-color .16s ease, translate .16s ease;
}
.bd-btn:focus-visible{ outline:3px solid var(--green-400);outline-offset:2px }
.bd-btn--primary{ background:var(--accent);color:#2a0d08;box-shadow:var(--shadow-gold) }
.bd-btn--primary:hover{ background:var(--accent-600);color:#fff;translate:0 -1px }
.bd-btn--quiet{ background:transparent;color:var(--green-800);border-color:var(--line-strong) }
.bd-btn--quiet:hover{ background:var(--surface);border-color:var(--green-500) }
.bd-btn--ghost{ background:transparent;color:var(--muted);border-color:transparent;padding:0 12px }
.bd-btn--ghost:hover{ color:var(--green-800) }
.bd-btn--block{ width:100% }

/* ---------- consent choice rows ---------- */
.bd-choice{
  display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;
  padding:14px;border:1px solid var(--line);border-radius:var(--radius-xs);
  background:var(--surface);margin:0 0 10px;cursor:pointer;
  transition:border-color .16s ease, background .16s ease;
}
.bd-choice:hover{ border-color:var(--green-400) }
.bd-choice:has(input:checked){ border-color:var(--green-500);background:#f1f9fa }
.bd-choice:has(input:focus-visible){ outline:3px solid var(--green-400);outline-offset:2px }
.bd-choice input{ width:20px;height:20px;margin:1px 0 0;accent-color:var(--green-600) }
.bd-choice{ font-weight:400 }                 /* styles.css bolds every label */
.bd-choice__label{ font-weight:600;display:block;margin:0 0 5px;font-size:.95rem;line-height:1.35 }
.bd-choice__note{ color:var(--muted);font-size:.87rem;line-height:1.55;display:block;font-weight:400 }
.bd-choice[data-required="true"] .bd-choice__label::after{
  content:"Required";display:inline-block;margin:0 0 0 8px;
  font-size:.64rem;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  color:#8c2d1f;background:var(--accent-soft);border:1px solid var(--accent-300);
  padding:3px 8px;border-radius:999px;vertical-align:3px;line-height:1;
}

/* a consent form should only enable its primary action once it is valid */
.bd-dialog form:invalid .bd-btn--primary{ opacity:.45;pointer-events:none }

/* ---------- inline banner (offline / install) ---------- */
.bd-banner{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));
  display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;
  background:var(--green-900);color:#eaf6f7;
  font:500 .9rem/1.4 var(--font-body);
  box-shadow:0 -12px 34px -22px rgba(6,38,43,.8);
  translate:0 100%;transition:translate .26s ease;
}
.bd-banner[data-open="true"]{ translate:0 0 }
.bd-banner__text{ display:flex;gap:10px;align-items:center;min-width:0 }
.bd-banner__dot{
  width:9px;height:9px;border-radius:50%;background:var(--accent);flex:none;
  box-shadow:0 0 0 0 rgba(255,111,94,.7);animation:bd-ping 2.4s ease-out infinite;
}
@keyframes bd-ping{ 0%{box-shadow:0 0 0 0 rgba(255,111,94,.6)} 70%{box-shadow:0 0 0 9px rgba(255,111,94,0)} 100%{box-shadow:0 0 0 0 rgba(255,111,94,0)} }
.bd-banner .bd-btn{ min-height:38px;font-size:.86rem }
.bd-banner .bd-btn--quiet{ color:#dff0f2;border-color:rgba(255,255,255,.28) }
.bd-banner .bd-btn--quiet:hover{ background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5) }

/* ---------- "saved on this phone" marker ----------
   Used wherever a diary or a screening is stored locally, so the
   promise in the privacy policy is visible at the point of use. */
.bd-local{
  display:inline-flex;align-items:center;gap:6px;
  font:600 .74rem/1 var(--font-body);letter-spacing:.04em;text-transform:uppercase;
  color:var(--green-600);background:#eaf5f6;border:1px solid #cfe6e9;
  padding:6px 10px;border-radius:999px;
}
.bd-local svg{ width:13px;height:13px }

@media (max-width:420px){
  .bd-dialog__head{ padding:22px 18px 0 }
  .bd-dialog__body{ padding:16px 18px 4px }
  .bd-dialog__foot{ padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px)) }
  .bd-dialog__foot .bd-btn{ flex:1 1 auto }
  .bd-dialog__title{ font-size:1.2rem }
  .bd-banner{ font-size:.86rem }
}

@media (prefers-reduced-motion: reduce){
  .bd-toast,.bd-dialog,.bd-dialog::backdrop,.bd-banner,.bd-btn{ transition-duration:.001ms !important }
  .bd-banner__dot{ animation:none }
}

/* ============================================================
   Trust strip
   ------------------------------------------------------------
   Replaces the institutional logo wall that used to sit here.
   Borrowed logos imply an endorsement that does not exist; these
   four statements are things BetaDocta can actually be held to,
   which is both honest and a stronger thing to sell.
   ============================================================ */
.bd-trust{ display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(228px,1fr)) }
.bd-trust__item{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:20px 18px;box-shadow:var(--shadow-sm);position:relative;overflow:hidden;
}
.bd-trust__item::before{
  content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--green-500);opacity:.55;
}
.bd-trust__item[data-key="safety"]::before{ background:var(--accent);opacity:.85 }
.bd-trust__icon{ width:24px;height:24px;color:var(--green-600);margin:0 0 10px;display:block }
.bd-trust__item[data-key="safety"] .bd-trust__icon{ color:var(--accent-600) }
.bd-trust__h{ font:700 .98rem/1.3 var(--font-body);color:var(--green-900);margin:0 0 6px }
.bd-trust__p{ font-size:.89rem;line-height:1.55;color:var(--muted);margin:0 }
.bd-trust__lead{
  font:600 .8rem/1.3 var(--font-body);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);text-align:center;margin:0 0 18px;
}
.bd-trust__foot{
  text-align:center;margin:18px 0 0;font-size:.87rem;color:var(--muted);line-height:1.55;
}
@media (max-width:560px){ .bd-trust{ grid-template-columns:1fr } }

/* ============================================================
   Pending detail
   ------------------------------------------------------------
   A slot that has no real value yet. Marked as deliberate rather
   than left looking like a bug or filled with an invented number.
   Replace the text and remove the class when the real value exists.
   ============================================================ */
.bd-pending{
  display:inline-block;font-style:italic;color:var(--muted);
  background:#f1f5f6;border:1px dashed var(--line-strong);
  padding:2px 9px;border-radius:999px;font-size:.88rem;
}