/* FootNote AI — refined clinical-SaaS design layer on Tailwind */

:root {
  --brand: #2563eb;
  --brand-700: #1d4ed8;
  --ring: rgba(37,99,235,.14);
}

html { -webkit-text-size-adjust: 100%; }

html { scroll-behavior: smooth; }

/* Form fields — dark input text + readable (not washed-out) placeholders */
input, textarea, select { color: #0f172a; }
input::placeholder, textarea::placeholder { color: #64748b; opacity: 1; }

/* Inputs feel tactile & calm — uniform hover + soft focus halo across the whole app */
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),
textarea, select {
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):hover,
textarea:hover, select:hover { border-color: #cbd5e1; }
input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):focus,
textarea:focus, select:focus {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 4px rgba(37,99,235,.13) !important;
}

/* Buttons respond to touch — a small, satisfying press */
button, a[class*="rounded-xl"], .copy-btn {
  transition: transform .08s ease, box-shadow .18s ease, background-color .16s ease, border-color .16s ease, filter .16s ease;
}
button:active:not(:disabled) { transform: translateY(1px); }

/* Considered selection colour */
::selection { background: rgba(37,99,235,.16); color: #0f172a; }

/* Typography craft — confident, well-set headings; humane wrapping */
h1, h2, h3 { text-wrap: balance; }
h1 { line-height: 1.07; }
p { text-wrap: pretty; }

/* Typography — tighter, crisper, better rhythm */
body {
  letter-spacing: -0.006em;
  font-feature-settings: "cv02","cv03","cv04","ss01";
  background-image:
    radial-gradient(60rem 40rem at 100% -10%, rgba(37,99,235,.05), transparent 60%),
    radial-gradient(55rem 45rem at 50% 128%, rgba(245,158,66,.035), transparent 62%),
    radial-gradient(50rem 40rem at -10% 0%, rgba(15,23,42,.025), transparent 55%);
  background-attachment: fixed;
}
h1, h2, h3 { letter-spacing: -0.022em; }
.tabular { font-variant-numeric: tabular-nums; }

/* Card — 1px hairline border + layered soft shadow, 18px radius */
.card {
  background: #fff;
  border: 1px solid rgb(226 232 240 / .75);
  border-radius: 1.125rem;
  box-shadow: 0 1px 2px 0 rgb(15 23 42 / .04), 0 1px 3px 0 rgb(15 23 42 / .03);
}

/* Animated gradient hero orb */
.hero-orb {
  background: radial-gradient(120% 120% at 20% 10%, #60a5fa 0%, #2563eb 45%, #1e40af 100%);
}

/* Fade/slide in */
@keyframes fadeUp { from { opacity:0; transform: translateY(10px);} to { opacity:1; transform:none;} }
.animate-fadeup { animation: fadeUp .45s cubic-bezier(.2,.7,.3,1) both; }
.stagger > * { animation: fadeUp .5s cubic-bezier(.2,.7,.3,1) both; }
.stagger > *:nth-child(2){ animation-delay:.06s; }
.stagger > *:nth-child(3){ animation-delay:.12s; }
.stagger > *:nth-child(4){ animation-delay:.18s; }
.stagger > *:nth-child(5){ animation-delay:.24s; }

/* Copy button */
.copy-btn { transition: all .15s ease; }
.copy-btn.copied { background:#2563eb !important; color:#fff !important; border-color:#2563eb !important; }

/* Tissue bars */
.tissue-bar { height:.5rem; border-radius:9999px; transition: width .8s cubic-bezier(.2,.7,.3,1); }

/* Spinner */
.spinner { width:1.15rem;height:1.15rem;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite; }
.spinner-dark { border-color: rgba(37,99,235,.22); border-top-color:#2563eb; }
@keyframes spin { to { transform: rotate(360deg);} }

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 2rem);
  background: #0f172a; color:#fff; padding:.7rem 1.1rem; border-radius:.75rem;
  font-size:.875rem; font-weight:600; box-shadow:0 16px 40px -10px rgb(15 23 42 /.45); z-index:60;
  opacity:0; pointer-events:none; transition: all .3s ease;
}
#toast.show { opacity:1; transform: translate(-50%, 0); }

/* Dropzone */
.dropzone { transition: border-color .18s ease, background .18s ease; }
.dropzone:hover { border-color:#93c5fd; background:#eff6ff; }
.dropzone.dragover { border-color:#2563eb; background:#dbeafe; }

/* Report section scroll on small screens */
.report-scroll { overflow-x:auto; }

/* Pulse dot */
.pulse-dot { position:relative; }
.pulse-dot::after{
  content:""; position:absolute; inset:0; border-radius:9999px;
  box-shadow:0 0 0 0 rgba(96,165,250,.6); animation:pulse 1.8s infinite;
}
@keyframes pulse { 70%{ box-shadow:0 0 0 10px rgba(96,165,250,0);} 100%{ box-shadow:0 0 0 0 rgba(96,165,250,0);} }

/* Focus-visible affordance for keyboard users */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, summary:focus-visible {
  outline: 2px solid #3b82f6; outline-offset: 2px; border-radius: .5rem;
}

/* ---------------------------------------------------------------------------
   Mobile-first layer — 90% of clinical usage happens on a phone.
--------------------------------------------------------------------------- */

/* Bottom tab bar (rendered by footer.php inside app sections).
   Dark navy glass to bookend the header chrome; the active tab's icon sits
   in a glowing blue pill. */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: rgba(10,17,34,.92);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 -14px 40px -14px rgba(10,17,34,.6);
  padding-bottom: env(safe-area-inset-bottom); /* clear the iPhone home bar */
}
.bottom-nav-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; min-height: 62px; padding: 8px 2px 7px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .02em;
  color: rgba(255,255,255,.55); transition: color .18s ease;
  -webkit-tap-highlight-color: transparent;
}
.bottom-nav-item .bn-icon {
  display: grid; place-items: center;
  width: 46px; height: 27px; border-radius: 9999px;
  transition: background .18s ease, box-shadow .18s ease, transform .12s ease;
}
.bottom-nav-item:active .bn-icon { transform: scale(.9); }
.bottom-nav-item:active { color: rgba(255,255,255,.85); }
.bottom-nav-item.is-active { color: #fff; }
.bottom-nav-item.is-active .bn-icon {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 4px 16px -4px rgba(59,130,246,.75), inset 0 1px 0 rgba(255,255,255,.28);
}
.bottom-nav-item.is-active svg { stroke-width: 2.3; }
.bottom-nav-item .bn-label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

@media (max-width: 640px) {
  /* 16px inputs: stops iOS Safari's zoom-on-focus (the "broken paste" feeling) */
  input:not([type=checkbox]):not([type=radio]):not([type=range]),
  select, textarea { font-size: 16px !important; }

  /* Tighter page rhythm on small screens */
  .card { border-radius: 1rem; }
  h1 { letter-spacing: -0.03em; }

  /* Momentum scrolling for any horizontal scrollers */
  .report-scroll, .overflow-x-auto { -webkit-overflow-scrolling: touch; }
}

/* Standalone (Add to Home Screen) mode: respect the iOS status-bar notch */
@media (display-mode: standalone) {
  header.sticky { padding-top: env(safe-area-inset-top); }
}