/* =========================================================================
   Family Tree — stylesheet
   Deliberately framework-free (no Bootstrap/Tailwind/etc.) so there is
   nothing to update or that can break over the years. Uses only system
   fonts too, so the site makes zero third-party network requests.
   ========================================================================= */

:root {
  /* B5: light "heirloom paper" theme. */
  --bg: #f6f2ea;
  --bg-elevated: #ffffff;
  --bg-card: #ffffff;
  --text: #2b2620;
  --text-dim: #6d6455;
  --accent: #a97d3f; /* warm brass/gold - "heirloom" feel */
  --accent-dim: #7c6142;
  --border: #e2d9c6;
  --connector-neutral: #a89a7d;
  --shadow: 0 20px 60px rgba(40, 32, 16, 0.14);
  --serif: ui-serif, Georgia, "Iowan Old Style", "Palatino Linotype", Palatino, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  height: 100%;
  overflow: hidden;
}

button, input { font-family: inherit; }

/* -------------------------------------------------------------------- */
/* Landing / search screen                                              */
/* -------------------------------------------------------------------- */

#landing {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px;
  transition: opacity 0.6s ease, transform 0.6s ease;
  background:
    radial-gradient(ellipse at 50% 30%, #ffffff 0%, var(--bg) 70%);
}

#landing.hidden {
  opacity: 0;
  transform: scale(0.98);
  pointer-events: none;
}

.landing-title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2rem, 6vw, 3.4rem);
  letter-spacing: 0.01em;
  margin: 0 0 0.4em;
  color: var(--text);
  text-align: center;
}

.landing-sub {
  color: var(--text-dim);
  font-size: 1rem;
  margin: 0 0 2.5em;
  text-align: center;
  letter-spacing: 0.02em;
}

.search-wrap {
  position: relative;
  width: min(560px, 100%);
}

#search-input {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 1.15rem;
  padding: 18px 22px;
  border-radius: 999px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#search-input:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 4px rgba(169, 125, 63, 0.14);
}

#suggestions {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  right: 0;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow);
  max-height: 60vh;
  overflow-y: auto;
  display: none;
}

#suggestions.open { display: block; }

.suggestion {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
}

.suggestion:last-child { border-bottom: none; }
.suggestion:hover, .suggestion.active { background: var(--bg); }

.suggestion .avatar,
.suggestion .avatar-fallback { width: 40px; height: 40px; flex: none; font-size: 0.85rem; }

.suggestion-name { font-size: 0.98rem; color: var(--text); }
.suggestion-married-name { font-weight: 400; font-style: italic; color: var(--text-dim); }
.suggestion-meta { font-size: 0.8rem; color: var(--text-dim); }

/* -------------------------------------------------------------------- */
/* Avatars (photo or initials placeholder)                              */
/* -------------------------------------------------------------------- */

.avatar {
  border-radius: 50%;
  object-fit: cover;
  display: block;
  background: var(--bg-card);
}

.avatar-fallback {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  color: #14161a;
  font-weight: 600;
}

/* -------------------------------------------------------------------- */
/* Tree screen                                                          */
/* -------------------------------------------------------------------- */

#tree-screen {
  position: fixed;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
  display: flex;
  flex-direction: column;
}

#tree-screen.visible { opacity: 1; pointer-events: auto; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-elevated);
  position: relative;
  z-index: 2;
}

.topbar .brand {
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--accent);
  cursor: pointer;
  white-space: nowrap;
}

/* B5 quick-win #5: the always-on search box is replaced by this compact
   icon button, reclaiming the header's horizontal space (and, on narrow
   phones, avoiding the old two-line topbar wrap entirely). Two inline
   SVGs are cross-faded/rotated between so the icon "morphs" in place —
   see .search-drawer below for the panel it opens. */
.search-toggle {
  position: relative;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}

.search-toggle:hover,
.search-toggle.open {
  border-color: var(--accent-dim);
  color: var(--accent-dim);
}

.search-toggle svg {
  position: absolute;
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.search-toggle .icon-search { opacity: 1; transform: rotate(0deg) scale(1); }
.search-toggle .icon-close { opacity: 0; transform: rotate(-40deg) scale(0.7); }
.search-toggle.open .icon-search { opacity: 0; transform: rotate(40deg) scale(0.7); }
.search-toggle.open .icon-close { opacity: 1; transform: rotate(0deg) scale(1); }

/* Zero-height anchor sitting flush under the topbar, purely so the
   drawer's "top: 0" lines up exactly with the topbar's bottom edge
   without hardcoding or measuring the topbar's height in JS. */
.search-drawer-anchor {
  position: relative;
  height: 0;
  z-index: 1;
}

/* Tucked up behind the (opaque, higher z-index) topbar until opened, so
   it visually "slides into view from the top" on tap — the icon button
   in the topbar itself never moves. */
.search-drawer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 14px 28px 18px;
  background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 14px 30px rgba(40, 32, 16, 0.12);
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.28s ease;
  pointer-events: none;
}

.search-drawer.open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.search-drawer .search-wrap { width: min(480px, 100%); }
.search-drawer #search-input-top {
  width: 100%;
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.95rem;
  padding: 10px 16px;
  border-radius: 999px;
  outline: none;
}

/* A1: the viewport. Fixed size, clipped, panned/zoomed via a transform
   on #tree-world rather than native scrolling. */
.tree-canvas {
  flex: 1;
  position: relative;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background:
    radial-gradient(circle at 1px 1px, var(--border) 1px, transparent 0) 0 0/28px 28px;
}

.tree-canvas.panning { cursor: grabbing; }

/* A1: the pannable/zoomable world. Sized naturally by its content (the
   generation rows), then moved/scaled entirely via CSS transform so the
   browser still does all normal row layout underneath. */
#tree-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  padding: 90px 70px;
  will-change: transform;
}

#connector-svg {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: visible;
}

.generation-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* B5 fix: without this, flex's default `stretch` forces every card in
     a mixed-scale row (e.g. the focus card at 1.5x next to smaller
     partner cards) to match the row's tallest card, padding out the
     shorter cards' name-label area with dead space. Top-aligning instead
     lets each card size to its own content, so a partner's label keeps
     the same proportions as everyone else's. */
  align-items: flex-start;
  gap: 18px;
  position: relative;
}

/* B1: beyond 4 children, hold each card at its base size and let the row
   extend past the viewport edge instead of wrapping — the pan/zoom world
   is how you reach the rest. */
.children-row.overflow {
  flex-wrap: nowrap;
}

/* B1 (mirrored for partners): same fix, applied to the focus row once
   app.js estimates the focus card + partner cards won't fit the real
   available width. Without this, .generation-row's default flex-wrap:
   wrap lets a partner row break onto a second (broken-looking) line on
   narrow (mobile) viewports — #tree-world is sized via shrink-to-fit
   against the real, un-scaled viewport width at layout time, so this
   wrapping happens before the pan/zoom CSS transform (paint-only) can ever
   compensate for it. Note this can trigger with as few as 2-3 partners if
   their names are long, since spouseScale (unlike childScale) only
   accounts for partner count, not available width. */
.focus-row.overflow {
  flex-wrap: nowrap;
}

.connector {
  width: 1px;
  height: 28px;
  background: var(--border);
}

/* B1: cards are vertical (avatar stacked over name/dates) for better use
   of narrow mobile widths. Every size-dependent value derives from
   --card-scale, which is how B3 (spouse count) and B1 (children-row
   fit) shrink cards, and how A2's 50%-larger focus card grows one. */
.person-card {
  --card-scale: 1;
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  width: calc(var(--card-scale) * 128px);
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: center;
  gap: 0;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, width 0.2s ease;
  flex: none;
}

.person-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent-dim);
  box-shadow: 0 10px 30px rgba(40, 32, 16, 0.12);
}

/* A4: subtle tactile feedback on press/tap. Declared after :hover so it
   wins when both apply (pressing while already hovering on desktop). */
.person-card:active {
  transform: scale(0.96) rotate(-0.4deg);
  transition: transform 0.12s ease;
}

.person-card.focus {
  border-color: var(--accent);
  background: linear-gradient(180deg, #fffaf1, var(--bg-card));
  box-shadow: 0 12px 34px rgba(169, 125, 63, 0.18);
}

/* B5 quick-win #3: avatars are full-bleed — flush to the card's top and
   side edges with no padding, cropped to a square via object-fit so
   they read larger relative to the card than the old 64px circle did.
   object-position: center is a deliberate, honest best-effort for face
   centering — true guaranteed centering would need face-detection,
   which is out of scope for this zero-dependency site. */
.person-card .avatar,
.person-card .avatar-fallback {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 0;
  object-position: center;
  flex: none;
}

.person-card .avatar-fallback {
  font-family: var(--sans);
  font-weight: 700;
  font-size: calc(var(--card-scale) * 2.1rem);
}

.person-text {
  min-width: 0;
  width: 100%;
  padding: calc(var(--card-scale) * 10px) calc(var(--card-scale) * 8px) calc(var(--card-scale) * 12px);
}

.person-name {
  font-family: var(--sans);
  font-weight: 800;
  letter-spacing: -0.01em;
  font-size: calc(var(--card-scale) * 0.94rem);
  color: var(--text);
  line-height: 1.25;
  overflow-wrap: break-word;
  word-break: break-word;
}

.person-dates {
  font-size: calc(var(--card-scale) * 0.76rem);
  color: var(--text-dim);
  margin-top: 2px;
}

/* Married surname (e.g. "(Simmons)") — the same convention MacFamilyTree
   itself uses to show a married name alongside the birth name, just
   given its own small line here to fit the card's vertical layout. */
.person-married-name {
  font-size: calc(var(--card-scale) * 0.78rem);
  color: var(--text-dim);
  font-style: italic;
  margin-top: 1px;
}

/* B4: marker elements only (their real on-screen line is drawn in the
   SVG overlay) — kept out of normal flex flow. */
.stub { display: none; }

.empty-hint {
  color: var(--text-dim);
  font-size: 0.85rem;
  font-style: italic;
}

/* -------------------------------------------------------------------- */
/* A4: tree motion                                                      */
/* -------------------------------------------------------------------- */

/* FLIP glide: when a card that was already on screen moves to a new
   spot (a new focus was chosen), app.js applies an inverted transform
   with transitions off, then clears it on the next frame with this
   class present — the browser animates the release. Uses a dedicated,
   longer, !important transition so it doesn't fight the base card's
   own 0.2s hover transition. */
.person-card.card-flip {
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: transform;
}

/* Entrance for a card that's newly visible in this view (wasn't on
   screen before the focus change) — a light fade/slide, staggered a
   little per card by app.js via --card-scale-independent animation-delay. */
@keyframes card-enter {
  from { opacity: 0; transform: translateY(10px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.person-card.card-enter {
  animation: card-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* One-time "growing tree" entrance: the very first tree a visitor
   lands on unrolls generation-row by generation-row rather than
   simply appearing. app.js only adds this class on the session's
   first render and staggers each row's animation-delay. */
@keyframes row-grow-enter {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.generation-row.grow-enter {
  animation: row-grow-enter 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Connector "drawing in" — used only alongside the first-render grow
   animation above. app.js sets --line-len to each line's true pixel
   length and --line-delay per section so the crossbar+trunk shape
   appears to trace itself in, shortly after the cards it connects
   have faded in. */
@keyframes connector-draw {
  to { stroke-dashoffset: 0; }
}
#connector-svg line.connector-draw {
  stroke-dasharray: var(--line-len, 300);
  stroke-dashoffset: var(--line-len, 300);
  animation: connector-draw 0.45s ease forwards;
  animation-delay: var(--line-delay, 0s);
}

/* Plain fade-in for the connector overlay on ordinary (non-first-load)
   renders, so the new lines don't just snap into place. */
@keyframes svg-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
#connector-svg.connector-fade-in {
  animation: svg-fade-in 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
  .person-card.card-flip,
  .person-card.card-enter,
  .generation-row.grow-enter,
  #connector-svg line.connector-draw,
  #connector-svg.connector-fade-in,
  .modal-section,
  .search-drawer,
  .search-toggle svg {
    animation: none !important;
    transition: none !important;
  }
  .person-card:active { transform: none !important; }
}

/* -------------------------------------------------------------------- */
/* Person modal                                                         */
/* -------------------------------------------------------------------- */

#modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 24, 14, 0.45);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 50;
  padding: 24px;
}

#modal-backdrop.open { opacity: 1; pointer-events: auto; }

#modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  width: min(520px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.3s ease;
}

#modal-backdrop.open #modal { transform: translateY(0) scale(1); }

.modal-header {
  display: flex;
  gap: 18px;
  align-items: center;
  margin-bottom: 22px;
}

.modal-header .avatar,
.modal-header .avatar-fallback { width: 88px; height: 88px; font-size: 1.7rem; flex: none; }

.modal-name { font-family: var(--serif); font-size: 1.5rem; margin: 0; }
.modal-married-name {
  font-family: var(--sans);
  font-style: italic;
  font-weight: 400;
  font-size: 0.62em;
  color: var(--text-dim);
}
.modal-sub { color: var(--text-dim); font-size: 0.9rem; margin-top: 4px; }

.modal-close {
  position: absolute;
  top: 20px;
  right: 24px;
  background: none;
  border: none;
  color: var(--text-dim);
  font-size: 1.4rem;
  cursor: pointer;
}

/* A4: sections reveal in as the modal opens (and, for anything below
   the fold in a long entry, as the user scrolls to them) rather than
   all appearing at once — see setupModalReveal()/openModal() in
   app.js, which toggles the .revealed class via IntersectionObserver
   and staggers each section's transition-delay. */
.modal-section {
  margin-bottom: 18px;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.modal-section.revealed {
  opacity: 1;
  transform: translateY(0);
}
.modal-section h4 {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent-dim);
  margin: 0 0 8px;
}
.modal-section p { margin: 0 0 4px; font-size: 0.95rem; color: var(--text); }

.relative-group { margin-bottom: 14px; }
.relative-group:last-child { margin-bottom: 0; }
.relative-role {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin: 0 0 6px;
}

.relatives-list { display: flex; flex-wrap: wrap; gap: 8px; }
.relative-chip {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  cursor: pointer;
}
.relative-chip:hover { border-color: var(--accent-dim); }

.gallery { display: flex; gap: 8px; flex-wrap: wrap; }
.gallery img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease;
}
.gallery img:hover { transform: scale(1.05); }

/* -------------------------------------------------------------------- */
/* Photo lightbox (A3)                                                  */
/* -------------------------------------------------------------------- */

#lightbox-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 12, 8, 0.86);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
  z-index: 60;
  padding: 24px;
}

#lightbox-backdrop.open { opacity: 1; pointer-events: auto; }

#lightbox-frame {
  max-width: min(900px, 88vw);
  max-height: 84vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

#lightbox-img {
  max-width: 100%;
  max-height: 76vh;
  border-radius: 10px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  object-fit: contain;
  background: #000;
}

#lightbox-caption {
  color: #f0ece2;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
}

.lightbox-nav {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: #f6f2ea;
  font-size: 2rem;
  line-height: 1;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  flex: none;
  margin: 0 14px;
  transition: background 0.15s ease;
}
.lightbox-nav:hover { background: rgba(255, 255, 255, 0.18); }

.lightbox-close {
  position: absolute;
  top: 22px;
  right: 26px;
  background: none;
  border: none;
  color: #f6f2ea;
  font-size: 1.6rem;
  cursor: pointer;
}

@media (max-width: 640px) {
  #tree-world { gap: 24px; padding: 60px 24px; }
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.6rem; margin: 0 6px; }
  .search-drawer { padding: 14px 18px 18px; }
}

/* -------------------------------------------------------------------- */
/* Suggest an Edit (feedback FAB + modal)                                */
/* -------------------------------------------------------------------- */

/* Confirmation shown after the "photo attached" path's real page
   reload brings the visitor back here — see checkFeedbackReturn() in
   app.js. Sits just above the FAB so it reads as connected to it. */
#feedback-toast {
  position: fixed;
  right: 20px;
  bottom: 82px;
  z-index: 41;
  max-width: min(320px, calc(100vw - 40px));
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.85rem;
  padding: 12px 16px;
  border-radius: 14px;
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
}

#feedback-toast:empty { display: none; }

#feedback-toast.open {
  opacity: 1;
  transform: translateY(0);
}

.feedback-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px 12px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-card);
  color: var(--text-dim);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-size: 0.88rem;
  font-family: var(--sans);
  transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.feedback-fab:hover {
  border-color: var(--accent-dim);
  color: var(--accent-dim);
  transform: translateY(-2px);
  box-shadow: 0 24px 60px rgba(40, 32, 16, 0.2);
}

.feedback-fab:active { transform: translateY(0) scale(0.97); }

.feedback-fab svg { flex: none; }

#feedback-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(30, 24, 14, 0.45);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 50;
  padding: 24px;
}

#feedback-backdrop.open { opacity: 1; pointer-events: auto; }

#feedback-modal {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: 22px;
  box-shadow: var(--shadow);
  width: min(480px, 100%);
  max-height: 85vh;
  overflow-y: auto;
  padding: 32px;
  transform: translateY(10px) scale(0.98);
  transition: transform 0.3s ease;
}

#feedback-backdrop.open #feedback-modal { transform: translateY(0) scale(1); }

#feedback-modal-title { font-family: var(--serif); font-size: 1.4rem; margin: 0 0 6px; }

.feedback-modal-sub {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin: 0 0 22px;
}

.feedback-field {
  display: block;
  margin-bottom: 16px;
}

.feedback-field > span {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  margin-bottom: 6px;
}

.feedback-field em {
  font-style: normal;
  font-weight: 400;
  color: var(--text-dim);
  opacity: 0.8;
}

.feedback-field input[type="text"],
.feedback-field input[type="email"],
.feedback-field select,
.feedback-field textarea {
  width: 100%;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--sans);
  font-size: 0.95rem;
  padding: 11px 14px;
  border-radius: 12px;
  outline: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.feedback-field textarea { resize: vertical; }

.feedback-field input[type="text"]:focus,
.feedback-field input[type="email"]:focus,
.feedback-field select:focus,
.feedback-field textarea:focus {
  border-color: var(--accent-dim);
  box-shadow: 0 0 0 4px rgba(169, 125, 63, 0.14);
}

.feedback-field input[type="file"] {
  width: 100%;
  font-size: 0.85rem;
  color: var(--text-dim);
}

/* Honeypot: kept in the tab order out of reach (tabindex="-1") and
   hidden off-screen rather than with display:none, which some spam
   bots specifically detect and skip past. */
.feedback-honey {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.feedback-submit {
  width: 100%;
  background: var(--accent);
  border: none;
  color: #fff9f0;
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 600;
  padding: 13px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease, opacity 0.2s ease;
}

.feedback-submit:hover { background: var(--accent-dim); }
.feedback-submit:active { transform: scale(0.98); }
.feedback-submit:disabled { opacity: 0.6; cursor: default; transform: none; }

.feedback-status {
  margin: 12px 0 0;
  font-size: 0.85rem;
  min-height: 1.2em;
}

.feedback-status-ok { color: #3c7a4b; }
.feedback-status-error { color: #b3492f; }

@media (max-width: 640px) {
  .feedback-fab span { display: none; }
  .feedback-fab {
    right: 16px;
    bottom: 16px;
    padding: 12px;
  }
  #feedback-modal { padding: 26px 22px; }
}