/* --------------------------------------------------
   MedicalTrauma.me — colorful, friendly styles
   -------------------------------------------------- */

:root {
  /* Hero / brand pink — one source of truth. Richer tone used for the
     hero band, the CTA button, and the decorative hearts so everything
     stays in the same family. */
  --hero-pink: #ea5a83;
  --hero-pink-hover: #d1476d;
  --hero-pink-line: #c43e6b;
  --pink: #ff8fb1;
  --pink-soft: #ffd5e0;
  --peach: #ffc3a0;
  --lilac: #c4b5ff;
  --purple: #8b7bff;
  --blue: #7ec4ff;
  --blue-soft: #d7ecff;
  --mint: #a8e6cf;
  --mint-soft: #d7f5e7;
  --yellow: #ffe29a;
  --cream: #fff7f1;
  --ink: #2a2250;
  --ink-soft: #5a5486;
  --shadow: 0 10px 30px rgba(90, 60, 140, 0.12);
  --shadow-lg: 0 20px 45px rgba(90, 60, 140, 0.18);
  --radius: 20px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

body {
  font-family: 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--ink);
  background: #faf8fc;
  min-height: 100vh;
  line-height: 1.55;
  position: relative;
  overflow-x: hidden;
}

/* Clean neutral page base below the hero's pink band. */
body.home { background: #faf8fc; }

/* Old blob decorations from the first iteration — fully retired. */
.blob { display: none; }

main, header, footer { position: relative; z-index: 1; }

/* -------- Hero decoration band (pink, flowers, rainbow) --------
   Lives INSIDE the hero so it scrolls away naturally. As soon as the
   user scrolls past the hero, all of this is gone and the page is calm. */
.hero { position: relative; }
.hero-decor {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
  /* Rich rose-pink hero band — unified with the CTA + Submit buttons. */
  background: var(--hero-pink);
  /* No border-bottom: the concave swoop at the bottom handles the transition
     into the page below, so a straight border line would clash with the curve. */
}
/* (Removed: the soft pink gradient that bled below the swoop and read as a
   drop-shadow. The swoop now handles the whole transition on its own.) */
.hero-inner { position: relative; z-index: 1; }

/* Rainbow behind the logo */
.hero-rainbow {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 320px;
  height: 110px;
  opacity: 0.85;
}

/* Scattered flowers + hearts. Positions are percentages so they sit in
   sensible places regardless of hero height. */
.hero-decor svg { position: absolute; filter: drop-shadow(0 2px 6px rgba(255,143,177,0.25)); }

/* Bottom concave swoop — stretches full width, sits at the very bottom of
   the hero, and fills with the page background so the pink band ends in a
   gentle arch instead of a straight line. Taller than before so the deeper
   curve reads clearly. Override the decor drop-shadow. */
.hero-swoop {
  left: 0 !important;
  right: 0 !important;
  bottom: -1px;
  top: auto !important;
  width: 100%;
  height: 95px;
  display: block;
  filter: none !important;
  /* Let the big heart cutout extend upward into the pink band above
     the SVG's viewBox. */
  overflow: visible;
}
@media (max-width: 640px) {
  .hero-swoop { height: 60px; }
}

/* "Cutout" heart — positioned on the left, just above the swoop, so it looks
   like a heart has been punched out of the pink band. Fill matches the page
   background, stroke matches the swoop's pink line. Drop-shadow from the
   generic .hero-decor svg rule is disabled so the cutout reads as flat. */
.hero-cutout-heart {
  left: 7%;
  bottom: 55px;   /* sits above the deepest part of the swoop */
  top: auto !important;
  filter: none !important;
  transform: rotate(-12deg);
  z-index: 2;     /* above the swoop fill but below the hero-inner text */
}
@media (max-width: 900px) {
  .hero-cutout-heart { left: 4%; bottom: 38px; width: 58px; height: 58px; }
}
@media (max-width: 520px) {
  .hero-cutout-heart { display: none; }
}
.hero-flower.hf1 { top: 18px;   left: 8%;   transform: rotate(-15deg); }
.hero-flower.hf2 { top: 42px;   right: 10%; transform: rotate(20deg); }
.hero-heart.hh1  { top: 110px;  left: 18%;  transform: rotate(-10deg); opacity: 0.85; }
.hero-heart.hh2  { top: 140px;  right: 20%; transform: rotate(12deg);  opacity: 0.85; }

.hero-sparkle {
  position: absolute;
  font-size: 14px;
  color: #c4b5ff;
  opacity: 0.75;
  font-weight: 700;
}
.hero-sparkle.s1 { top: 60px;  left: 26%; }
.hero-sparkle.s2 { top: 90px;  right: 30%; font-size: 18px; color: #ff9cbd; }
.hero-sparkle.s3 { top: 170px; left: 35%; font-size: 12px; }

/* Hide the tighter top decorations on small screens so mobile isn't crowded;
   keep the pink gradient band and the rainbow. */
@media (max-width: 640px) {
  .hero-flower, .hero-heart, .hero-sparkle { display: none; }
  .hero-rainbow { width: 230px; height: 80px; opacity: 0.7; }
}

/* -------- Fixed side decorations + girly animations --------
   Each decor element is absolutely positioned within a full-height fixed
   column so we can drop them anywhere (top: N%) without margin-math.
   Responsive density:
     <  900px  → all hidden (pure mobile calm)
     >= 900px  → .d-md items show (moderate density)
     >= 1400px → .d-xl items also show (full density) */
/* Each side column occupies ONLY the empty space beside the centered content
   (widest card row is 1100px, plus 40px gutter so nothing overlaps). If the
   viewport is too narrow to leave breathing room, the column collapses to 0
   and the .d-md/.d-xl breakpoints below also hide the items. */
.side-decor {
  position: fixed;
  top: 0;
  bottom: 0;
  width: max(0px, calc((100vw - 1180px) / 2));
  z-index: 0;
  pointer-events: none;
}
.side-decor-left  { left: 0; }
.side-decor-right { right: 0; }

.side-decor > * {
  position: absolute;
  /* Items are positioned by inline top:X%/left:X%. No centering transform
     because the spin/pulse animations also use `transform:` and would
     clobber translateX(-50%) — so items are placed from top-left corner. */
  filter: drop-shadow(0 4px 10px rgba(255,143,177,0.25));
  opacity: 0.85;
}
.side-decor .decor-sparkle { font-weight: 700; line-height: 1; }

/* Every decor item is hidden by default; breakpoints below unhide them.
   Breakpoints match the side-column width formula (1180px + content), so
   items only appear once there's enough empty space to hold them without
   overlapping the centered cards. */
.d-md, .d-xl { display: none; }

@media (min-width: 1200px) {
  .d-md { display: block; }
}
@media (min-width: 1500px) {
  .d-xl { display: block; }
}

/* -------- Animations (subtle, girly) --------
   These use only rotate/scale so items can be positioned freely via
   inline left:X% without the animation overriding the placement. */
@keyframes spin-cw  { from { transform: rotate(0deg); }   to { transform: rotate(360deg); } }
@keyframes spin-ccw { from { transform: rotate(0deg); }   to { transform: rotate(-360deg); } }
@keyframes pulse    { 0%,100% { transform: scale(1); }    50% { transform: scale(1.12); } }
@keyframes twinkle  { 0%,100% { opacity: 0.3; transform: scale(0.85); } 50% { opacity: 1; transform: scale(1.2); } }

.spin-slow   { animation: spin-cw  22s linear infinite; }
.spin-med    { animation: spin-ccw 14s linear infinite; }
.pulse       { animation: pulse     2.6s ease-in-out infinite; }
.pulse-slow  { animation: pulse     4.2s ease-in-out infinite; }
.twinkle     { animation: twinkle   2.2s ease-in-out infinite; }
.twinkle-delay { animation: twinkle 2.8s ease-in-out infinite; animation-delay: 1.1s; }

/* Respect users who prefer less motion. */
@media (prefers-reduced-motion: reduce) {
  .spin-slow, .spin-med, .pulse, .pulse-slow, .twinkle, .twinkle-delay,
  .hero-flower, .hero-heart, .hero-sparkle {
    animation: none !important;
  }
}

/* Also give the in-hero decorations a gentle animation so the hero feels alive. */
.hero-flower.hf1 { animation: spin-cw  20s linear infinite; transform-origin: center; }
.hero-flower.hf2 { animation: spin-ccw 16s linear infinite; transform-origin: center; }
.hero-heart.hh1  { animation: pulse-hero 3s ease-in-out infinite; transform-origin: center; }
.hero-heart.hh2  { animation: pulse-hero 4s ease-in-out infinite; transform-origin: center; animation-delay: 0.7s; }
.hero-sparkle    { animation: twinkle-hero 2.4s ease-in-out infinite; }
.hero-sparkle.s2 { animation-delay: 0.6s; }
.hero-sparkle.s3 { animation-delay: 1.2s; }

/* Hero animations keep their existing rotate/translate transforms by
   re-applying them inside a separate keyframe (so we don't clobber position). */
@keyframes pulse-hero    { 0%,100% { transform: scale(1) rotate(var(--rot, 0deg)); } 50% { transform: scale(1.12) rotate(var(--rot, 0deg)); } }
@keyframes twinkle-hero  { 0%,100% { opacity: 0.35; transform: scale(0.85); }        50% { opacity: 1;  transform: scale(1.2); } }
.hero-heart.hh1 { --rot: -10deg; }
.hero-heart.hh2 { --rot:  12deg; }

/* -------- Hero -------- */
.hero {
  /* Bottom padding is large enough that the tagline clears the swoop's
     center dip (~55px up into the pink band at the deepest point). */
  padding: 72px 24px 130px;
  text-align: center;
}
.hero-inner {
  max-width: 760px;
  margin: 0 auto;
}
.logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  background: white;
  border-radius: 50%;
  box-shadow: var(--shadow);
  margin-bottom: 20px;
}
.hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  margin: 0 0 16px;
  color: #ffffff;
  font-weight: 700;
  text-shadow: 0 2px 14px rgba(180, 70, 110, 0.28), 0 1px 2px rgba(180, 70, 110, 0.15);
}
.tagline {
  font-size: 1.15rem;
  color: #ffffff;
  margin: 0 auto 28px;
  max-width: 600px;
  text-shadow: 0 1px 6px rgba(180, 70, 110, 0.22);
}
/* Button lives in its own section but is pulled up so it overlaps the
   bottom of the pink hero area — it straddles the pink/page boundary so
   half sits on pink and half on the page background below. */
.hero-cta {
  text-align: center;
  padding: 4px 24px 26px;  /* tightened further so the story sits closer */
  margin-top: -36px;       /* pull up into the pink region */
  position: relative;
  z-index: 3;              /* render above the hero decor + swoop */
}
.cta-btn {
  display: inline-block;
  padding: 16px 44px;
  background: var(--hero-pink); /* rich rose-pink, matches the hero band */
  color: #ffffff;
  text-decoration: none;
  border-radius: 999px;
  font-weight: 700;
  font-size: 1.05rem;
  box-shadow: none;
  margin-bottom: 40px;
  transition: transform 0.15s ease, background 0.15s ease;
  /* Subtle, slow bounce to draw the eye without being annoying. */
  animation: cta-bounce 2.4s ease-in-out infinite;
}
.cta-btn:hover {
  transform: translateY(-4px);
  background: var(--hero-pink-hover);
  animation-play-state: paused; /* settle on hover so the click feels stable */
}
@keyframes cta-bounce {
  0%, 100%   { transform: translateY(0); }
  45%        { transform: translateY(-6px); }
  55%        { transform: translateY(-6px); }
}
@media (prefers-reduced-motion: reduce) {
  .cta-btn { animation: none; }
}
/* Reassurance now lives under the CTA in the page background (not on pink),
   so switch to a muted gray instead of the old semi-transparent white. */
.reassurance {
  margin: 8px auto 0;      /* tighter gap to the button above */
  color: #6b5f7a;
  font-size: 0.92rem;
  text-shadow: none;
}

/* -------- Info cards -------- */
/* Info cards: 1 col on mobile, 2 on tablet, 4 on desktop. We deliberately
   avoid a 3-column layout because with 4 cards it would leave an orphan. */
.info-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1100px;
  margin: 32px auto;
  padding: 0 24px;
}
@media (min-width: 560px) {
  .info-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1000px) {
  .info-cards { grid-template-columns: repeat(4, 1fr); }
}
.card {
  background: white;
  padding: 28px 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: transform 0.2s ease;
}
.card:hover { transform: translateY(-4px); }
.card-pink  { border-top: 6px solid var(--pink); }
.card-blue  { border-top: 6px solid var(--blue); }
.card-green { border-top: 6px solid var(--mint); }
.card-lilac { border-top: 6px solid var(--lilac); }
/* Icon sits inline with the heading (flex row) so they read as one line. */
.card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 1.1rem;
  line-height: 1.35;
}
.card-icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff8fb;
  box-shadow: 0 2px 8px rgba(255, 143, 177, 0.12);
  line-height: 1;
}
.card-icon svg { display: block; }
.card p  { margin: 0; color: var(--ink-soft); font-size: 0.98rem; }

/* -------- Story (Ashley's personal note) -------- */
.story-section {
  padding: 20px 24px 10px;
}
.story-wrap {
  max-width: 720px;
  margin: 0 auto;
  background: white;
  border-radius: var(--radius);
  padding: 36px 36px 32px;
  box-shadow: var(--shadow-lg);
  position: relative;
  border-left: 6px solid var(--pink);
}
.story-eyebrow {
  margin: 0 0 4px;
  font-size: 0.82rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--purple);
}
.story-wrap h2 {
  margin: 0 0 6px;
  font-size: 1.7rem;
  background: linear-gradient(90deg, var(--pink), var(--purple));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.story-date {
  margin: 0 0 18px;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 0.95rem;
}
.story-wrap p {
  color: var(--ink);
  line-height: 1.65;
  font-size: 1rem;
  margin: 0 0 14px;
}
.story-pullquote {
  background: linear-gradient(90deg, rgba(255,143,177,0.12), rgba(139,123,255,0.12));
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  gap: 12px;
  align-items: center;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  margin: 8px 0 20px;
}
.story-emoji { font-size: 1.4rem; line-height: 1; }
.story-sign {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed rgba(139,123,255,0.25);
  color: var(--ink-soft);
}
.story-author {
  font-weight: 600;
  color: var(--purple);
  font-style: italic;
}
.story-photo {
  float: right;
  width: 40%;
  max-width: 260px;
  margin: 4px 0 14px 22px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--cream);
  box-shadow: 0 10px 24px rgba(139, 123, 255, 0.18);
}
.story-photo img {
  display: block;
  width: 100%;
  height: auto;
}
.story-photo figcaption {
  padding: 8px 12px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  font-style: italic;
  text-align: center;
}
.story-subheading {
  margin: 28px 0 4px;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--purple);
  clear: both;
}
@media (max-width: 560px) {
  .story-wrap { padding: 26px 22px; }
  .story-wrap h2 { font-size: 1.45rem; }
  .story-photo {
    float: none;
    width: 100%;
    max-width: none;
    margin: 0 0 18px;
  }
}

/* -------- Form -------- */
.form-section {
  padding: 80px 24px 60px; /* extra top padding so the mascot can overhang */
}
.form-wrap {
  max-width: 760px;
  margin: 0 auto;
  background: white;
  border-radius: var(--radius);
  padding: 40px 36px;
  box-shadow: var(--shadow-lg);
  position: relative;
}

/* -------- Share Bear mascot -------- */
/* Original care-bear-style greeter that sits atop the share form.
   The wrap owns the size — bear and decorative backdrop both size from it so
   the composition scales cleanly between desktop and mobile. */
.share-bear-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  width: 140px;
  transform: translate(-50%, -58%);
  pointer-events: none;
  z-index: 2;
}
.share-bear-bg {
  position: absolute;
  width: 137%;                          /* backdrop is a bit larger than the bear */
  height: auto;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -53%);     /* seated slightly above bear center */
  z-index: -1;
  pointer-events: none;
}
.share-bear {
  display: block;
  position: relative;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(139, 123, 255, 0.28));
}
@media (max-width: 560px) {
  .share-bear-wrap {
    width: 105px;
    transform: translate(-50%, -74%);
  }
  .form-section { padding-top: 60px; }
}
.form-wrap h2 {
  margin: 0 0 6px;
  font-size: 2rem;
  background: linear-gradient(90deg, var(--purple), var(--blue));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.form-sub { margin: 0 0 28px; color: var(--ink-soft); }

.field { margin-bottom: 20px; }
.field label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--ink);
}
.optional { font-weight: 400; color: var(--ink-soft); font-size: 0.88rem; }

/* Match ALL text-like inputs, not just [type="text"], so email/password/search
   get the same soft pink/lilac look as the rest of the form. */
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 16px;
  border: 2px solid #eee4f1;
  border-radius: 14px;
  font-family: inherit;
  font-size: 1rem;
  background: #fdfbff;
  color: var(--ink);
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  box-shadow: inset 0 1px 2px rgba(90, 60, 140, 0.03);
  -webkit-appearance: none;
  appearance: none;
}
.field input::placeholder,
.field textarea::placeholder {
  color: #b5accf;
}
.field input:hover,
.field select:hover,
.field textarea:hover {
  border-color: #ddd0e4;
  background: #fffdff;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--purple);
  background: #ffffff;
  box-shadow: 0 0 0 4px rgba(139, 123, 255, 0.18);
}
.field textarea { resize: vertical; min-height: 160px; line-height: 1.55; }

/* Custom select chevron (consistent across browsers) */
.field select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%238b7bff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;
  cursor: pointer;
}

/* Neutralize Chrome/Edge autofill (yellow background + black text) so
   password-manager-filled fields still look on-brand. */
.field input:-webkit-autofill,
.field input:-webkit-autofill:hover,
.field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px #fdfbff inset;
  box-shadow: 0 0 0 1000px #fdfbff inset;
  caret-color: var(--ink);
  transition: background-color 9999s ease-in-out 0s;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 560px) {
  .field-row { grid-template-columns: 1fr; }
}

.counter {
  text-align: right;
  color: var(--ink-soft);
  font-size: 0.85rem;
  margin-top: 4px;
}

.submit-btn {
  display: block;
  width: 100%;
  padding: 16px;
  background: var(--hero-pink); /* matches Share-your-story CTA + hero band */
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.submit-btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); background: var(--hero-pink-hover); }
.submit-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }

.form-message {
  margin-top: 16px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 500;
  display: none;
}
.form-message.ok    { display: block; background: var(--mint-soft); color: #1e6b4a; }
.form-message.err   { display: block; background: #ffe0e5; color: #a03050; }

/* -------- Support strip -------- */
.support-strip {
  max-width: 760px;
  margin: 0 auto 60px;
  padding: 28px 32px;
  background: linear-gradient(135deg, var(--yellow), var(--peach));
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.support-strip h3 { margin: 0 0 8px; }
.support-strip p  { margin: 0; color: var(--ink); }

footer {
  text-align: center;
  padding: 30px 20px 40px;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* -------- Admin (reading view, kept restrained for readability) -------- */
body.admin {
  background: #f6f7fb;
  font-family: 'Inter', 'Quicksand', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #1f2937;
}
/* Hide the colorful hero blobs on admin pages — they distract from reading essays. */
body.admin .blob { display: none; }

body.admin {
  --admin-ink: #1f2937;
  --admin-ink-soft: #64748b;
  --admin-border: #e5e7eb;
  --admin-accent: #4f46e5;
  --admin-accent-soft: #eef2ff;
  --admin-danger: #dc2626;
  --admin-shadow: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --admin-radius: 10px;
}

.admin-shell {
  max-width: 1100px;
  margin: 0 auto;
  padding: 32px 24px 60px;
}

/* -------- Admin login (calmer than the marketing page) -------- */
.admin-login {
  max-width: 400px;
  margin: 10vh auto;
  background: white;
  padding: 36px 32px 32px;
  border-radius: 12px;
  border: 1px solid var(--admin-border);
  box-shadow: var(--admin-shadow);
  text-align: left;
  position: relative;
}
.admin-login h1 {
  margin: 0 0 4px;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--admin-ink);
  background: none;
  -webkit-text-fill-color: initial;
}
.admin-login p.sub { color: var(--admin-ink-soft); margin: 0 0 24px; font-size: 0.95rem; }
.admin-login .field { text-align: left; margin-bottom: 16px; }
.admin-login .field label { color: var(--admin-ink); font-weight: 500; font-size: 0.9rem; }
.admin-login .field input {
  border-radius: 8px;
  border: 1px solid var(--admin-border);
  background: white;
  padding: 10px 14px;
  box-shadow: none;
}
.admin-login .field input:hover { border-color: #cbd5e1; background: white; }
.admin-login .field input:focus {
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.admin-login .submit-btn {
  margin-top: 8px;
  background: var(--admin-accent);
  box-shadow: none;
  border-radius: 8px;
  font-size: 0.95rem;
  padding: 12px;
}
.admin-login .submit-btn:hover { background: #4338ca; transform: none; box-shadow: none; }
.admin-login .form-message.err {
  background: #fef2f2;
  color: var(--admin-danger);
  border: 1px solid #fecaca;
}
.admin-login .form-message.ok {
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* -------- Admin dashboard -------- */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}
.admin-header h1 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--admin-ink);
  background: none;
  -webkit-text-fill-color: initial;
}
.logout-btn {
  padding: 8px 16px;
  background: white;
  border: 1px solid var(--admin-border);
  color: var(--admin-ink-soft);
  border-radius: 8px;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.logout-btn:hover {
  background: #f9fafb;
  color: var(--admin-ink);
  border-color: #cbd5e1;
}

.stat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: white;
  padding: 18px 20px;
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border);
  box-shadow: var(--admin-shadow);
  text-align: left;
}
.stat-card .n {
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--admin-ink);
  /* Override the gradient-text styling from the public page */
  background: none;
  -webkit-text-fill-color: initial;
  line-height: 1.2;
  /* Keep long category names ("Medical gaslighting") on a single line and
     truncate with an ellipsis if needed, so the card doesn't overflow. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.stat-card .label {
  color: var(--admin-ink-soft);
  font-size: 0.8rem;
  margin-top: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 500;
}

body.admin .chart-card {
  background: white;
  padding: 20px 24px;
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border);
  box-shadow: var(--admin-shadow);
  margin-bottom: 20px;
}
body.admin .chart-card h2 {
  margin: 0 0 16px;
  font-size: 1rem;
  font-weight: 600;
  color: var(--admin-ink);
}

body.admin .reports-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
body.admin .reports-toolbar input,
body.admin .reports-toolbar select {
  padding: 9px 14px;
  border: 1px solid var(--admin-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
  background: white;
  color: var(--admin-ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}
body.admin .reports-toolbar input { flex: 1; min-width: 220px; }
body.admin .reports-toolbar input:focus,
body.admin .reports-toolbar select:focus {
  outline: none;
  border-color: var(--admin-accent);
  box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12);
}
body.admin .reports-toolbar select {
  padding-right: 36px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 5 5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px 8px;
  cursor: pointer;
}

body.admin .report-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
body.admin .report-item {
  background: white;
  padding: 20px 24px;
  border-radius: var(--admin-radius);
  border: 1px solid var(--admin-border);
  border-left: 3px solid #cbd5e1;
  box-shadow: var(--admin-shadow);
}
/* Subtle category accent stripe on the left edge only — not loud. */
body.admin .report-item.cat-misdiagnosis   { border-left-color: #ec4899; }
body.admin .report-item.cat-medical_error  { border-left-color: #ef4444; }
body.admin .report-item.cat-bedside_manner { border-left-color: #f97316; }
body.admin .report-item.cat-dismissal      { border-left-color: #3b82f6; }
body.admin .report-item.cat-gaslighting    { border-left-color: #8b5cf6; }
body.admin .report-item.cat-physical_harm  { border-left-color: #dc2626; }
body.admin .report-item.cat-medication     { border-left-color: #10b981; }
body.admin .report-item.cat-surgical       { border-left-color: #f59e0b; }
body.admin .report-item.cat-mental_health  { border-left-color: #6366f1; }
body.admin .report-item.cat-other          { border-left-color: #94a3b8; }

body.admin .report-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 0.8rem;
}
body.admin .tag {
  background: #f1f5f9;
  color: #475569;
  padding: 3px 10px;
  border-radius: 6px;
  font-weight: 500;
}
body.admin .tag.date { background: #f1f5f9; color: #475569; }
body.admin .tag.where { background: #f1f5f9; color: #475569; }

body.admin .report-body {
  white-space: pre-wrap;
  color: #111827;
  font-size: 0.98rem;
  line-height: 1.7;
}

body.admin .empty {
  text-align: center;
  padding: 40px;
  color: var(--admin-ink-soft);
}

/* ==================================================
   Consent / attribution blocks on the public form
   ================================================== */

/* Subtle "also mention my age/gender" inline checkbox that lives under a field */
.inline-check {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--ink-soft);
  cursor: pointer;
  line-height: 1.35;
}
/* Override the `.field input { ... appearance: none; padding; border; ... }`
   rule above so the native checkbox actually renders and clicks through. */
.inline-check input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
  margin: 3px 0 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--purple);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

/* Grouped fieldset for attribution / consent questions. Keeps them visually
   distinct from the shorter demo fields above. */
.prefs-block {
  margin-top: 24px;
  padding: 20px 22px 16px;
  border: 1px solid rgba(139, 123, 255, 0.22);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.55);
}
.prefs-block legend {
  font-weight: 700;
  color: var(--ink);
  padding: 0 8px;
  font-size: 1rem;
}
.prefs-block .prefs-sub {
  margin: 2px 0 14px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.radio-row,
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 4px;
  cursor: pointer;
  border-radius: 8px;
}
.radio-row:hover,
.check-row:hover {
  background: rgba(139, 123, 255, 0.06);
}
.radio-row input[type="radio"],
.check-row input[type="checkbox"] {
  -webkit-appearance: auto;
  appearance: auto;
  margin: 4px 0 0 0;
  padding: 0;
  border: none;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  accent-color: var(--purple);
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}
.radio-row input[type="radio"] {
  -webkit-appearance: radio;
  appearance: radio;
}
.check-row input[type="checkbox"] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}
.radio-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.radio-label strong {
  font-weight: 600;
  color: var(--ink);
}
.radio-hint {
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.4;
}

/* Grouped name + handle inputs that appear under the "Credit me" radio.
   Both inputs are enabled together when the user opts in — they can fill one,
   the other, or both. */
.attribution-group {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 2px 0 10px 34px;
  max-width: calc(100% - 34px);
}
@media (min-width: 640px) {
  .attribution-group {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
.attribution-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e3def4;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.95rem;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease, opacity 0.15s ease;
}
.attribution-input:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px rgba(139, 123, 255, 0.18);
}
.attribution-input:disabled {
  opacity: 0.45;
  background: #f7f5fc;
  cursor: not-allowed;
}

/* ==================================================
   Admin card badges for attribution + consent
   ================================================== */

body.admin .tag.attribution {
  background: #eef2ff;
  color: #4338ca;
  font-weight: 600;
}
body.admin .tag.attribution.anon { background: #f1f5f9; color: #475569; font-weight: 500; }
body.admin .tag.attribution.named { background: #fdf2f8; color: #be185d; }
body.admin .tag.attribution.handle { background: #ecfeff; color: #0e7490; }

body.admin .tag.consent.share   { background: #ecfdf5; color: #047857; }
body.admin .tag.consent.publish { background: #fff7ed; color: #c2410c; }

body.admin .share-ok {
  display: inline-block;
  margin-left: 4px;
  color: #059669;
  font-weight: 700;
}