/* =========================================================
   Mekudeshet — Redesign Stylesheet
   Brand plum #6E4067 + hot-pink #FF0075 + brown #463939. Elegant, dignified.
   ========================================================= */

:root {
  /* Brand — taken from the live site's CSS:
     plum/mauve #6E4067 (primary) + hot-pink #FF0075 (accent) + brown #463939 text */
  --blue: #6E4067;          /* primary brand plum (var name kept for brevity) */
  --blue-deep: #4A2A47;     /* deep plum for sections/headers */
  --blue-ink: #3A2138;      /* near-black plum for headings */
  --blue-soft: #f3e8f0;     /* plum tint */

  --gold: #FF0075;          /* hot-pink accent (CTAs, highlights) */
  --gold-deep: #C70061;     /* deeper pink for hover/text */

  --ivory: #FAF7F9;         /* page background (warm white) */
  --cream: #F3ECF0;         /* alt section background (plum-tinted) */
  --white: #ffffff;

  --ink: #463939;           /* body text (brand brown) */
  --muted: #6b5d63;         /* secondary text */
  --line: #e9dee6;          /* hairlines on light */

  /* Type — PP Hatton (the site's proprietary serif) substituted with the
     closest high-contrast free serif; Inter stands in for Nunito Sans/Poppins */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Layout */
  --maxw: 1140px;
  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px -20px rgba(74, 42, 71, 0.30);
  --shadow-sm: 0 8px 24px -12px rgba(74, 42, 71, 0.26);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--ivory);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 600; line-height: 1.08; color: var(--blue-ink); }
p { margin: 0 0 1rem; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
.narrow { max-width: 760px; }
.center { text-align: center; }
.center-block { margin-left: auto; margin-right: auto; max-width: 640px; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--blue); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--sans); font-weight: 600; font-size: .95rem;
  padding: .72rem 1.4rem; border-radius: 999px; border: 1.5px solid transparent;
  cursor: pointer; transition: transform .25s var(--ease), box-shadow .25s var(--ease), background .2s, color .2s, border-color .2s;
  text-decoration: none; white-space: nowrap;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }
.btn-lg { padding: .9rem 1.8rem; font-size: 1rem; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #5a3355; }
.btn-gold { background: var(--gold); color: #fff; box-shadow: 0 10px 26px -12px rgba(199,0,97,.6); }
.btn-gold:hover { background: var(--gold-deep); color: #fff; }
.btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.6); }
.btn-ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(74, 42, 71, 0.94);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; height: 72px; }
.brand { display: flex; align-items: center; flex-shrink: 0; }
/* The wordmark is 1619x187 — an 8.7:1 strip. Sizing it by height alone made
   it 329px wide, which swallowed the whole header on a phone, so it is capped
   by width and steps down on small screens. */
.brand-logo { height: 32px; width: auto; max-width: 200px; object-fit: contain; }
.nav { display: flex; gap: 1.05rem; margin-left: auto; flex-wrap: nowrap; white-space: nowrap; }
.nav a {
  color: rgba(255,255,255,.86); font-size: .82rem; font-weight: 500; letter-spacing: .01em;
  text-decoration: none; position: relative; padding: 4px 0;
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -2px; height: 2px;
  background: var(--gold); transition: right .3s var(--ease);
}
.nav a:hover { color: #fff; }
.nav a:hover::after { right: 0; }
.nav-cta { margin-left: 1.1rem; flex-shrink: 0; }
.nav-toggle {
  display: none; flex-direction: column; gap: 5px; background: none; border: 0;
  cursor: pointer; padding: 8px; margin-left: auto;
}
.nav-toggle span { width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: .3s; }

.mobile-menu {
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--blue-deep); padding: 12px 24px 22px;
  border-top: 1px solid rgba(255,255,255,.08);
}
/* The [hidden] attribute must win over the display:flex above. */
.mobile-menu[hidden] { display: none; }
/* Never show the mobile drawer on desktop, even if toggled. */
@media (min-width: 1181px) { .mobile-menu { display: none !important; } }
.mobile-menu a { color: rgba(255,255,255,.9); padding: 12px 4px; border-bottom: 1px solid rgba(255,255,255,.07); font-weight: 500; }
.mobile-menu a:last-child { border-bottom: 0; margin-top: 12px; }
.mobile-menu .btn { justify-content: center; }

/* ---------- Eyebrows & titles ---------- */
.eyebrow {
  display: inline-block; font-family: var(--sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: .18em; font-size: .72rem;
  color: var(--gold-deep); margin: 0 0 .9rem;
}
.eyebrow-light { color: var(--gold); }
.section-title { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -.01em; }
.section-title.light { color: #fff; }
.lead { font-size: 1.18rem; color: var(--muted); }
.lead.light { color: rgba(255,255,255,.85); }
.section-head { margin-bottom: 3rem; }

/* ---------- Sections ---------- */
.section { padding: clamp(4rem, 8vw, 7rem) 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative; color: #fff; overflow: hidden;
  padding: clamp(5rem, 12vw, 9rem) 0 clamp(4rem, 9vw, 7rem);
  isolation: isolate;
}
/* Background promo video — covers the hero, sits behind the gradient overlay */
.hero-video {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
  pointer-events: none;
}
.hero-bg {
  position: absolute; inset: 0; z-index: -2;
  /* Translucent plum tint over the video: keeps text legible, video shows through.
     Solid colors at the edges fall back gracefully if the video fails to load. */
  background:
    radial-gradient(1200px 600px at 75% -10%, rgba(255,0,117,.30), transparent 60%),
    radial-gradient(900px 600px at 10% 110%, rgba(110,64,103,.45), transparent 55%),
    linear-gradient(160deg, rgba(46,24,48,.82) 0%, rgba(74,42,71,.62) 45%, rgba(110,64,103,.55) 120%);
}
@media (prefers-reduced-motion: reduce) {
  /* Respect users who disable motion: hide the video, show the full gradient. */
  .hero-video { display: none; }
  .hero-bg {
    background:
      radial-gradient(1200px 600px at 75% -10%, rgba(255,0,117,.30), transparent 60%),
      radial-gradient(900px 600px at 10% 110%, rgba(110,64,103,.65), transparent 55%),
      linear-gradient(160deg, #2e1830 0%, #4A2A47 45%, #6E4067 120%);
  }
}
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 22px 22px; opacity: .5;
}
.hero-inner { position: relative; max-width: 880px; }
.hero h1 {
  color: #fff; font-size: clamp(2.6rem, 7vw, 5rem); font-weight: 600;
  margin: 0 0 1.4rem; letter-spacing: -.015em;
}
.hero-script {
  display: block; color: var(--gold); font-style: italic; font-weight: 500;
  font-size: clamp(1.8rem, 4.6vw, 3.2rem); margin-top: .2rem;
}
.hero-sub { font-size: clamp(1.05rem, 2vw, 1.3rem); color: rgba(255,255,255,.9); max-width: 620px; margin-bottom: 2.2rem; }
.hero-sub em { color: var(--gold); font-style: italic; }
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.hero-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 80px; background: linear-gradient(transparent, var(--ivory)); z-index: -1; }

/* ---------- Mission ---------- */
.mission { background: var(--ivory); }
.mission .lead { font-size: 1.3rem; color: var(--ink); }

/* ---------- Services / cards ---------- */
.services { background: var(--cream); }
.card-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem;
}
.card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem 1.6rem; box-shadow: var(--shadow-sm);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow); border-color: var(--gold); }
.card-icon {
  width: 54px; height: 54px; border-radius: 14px; display: grid; place-items: center;
  background: var(--blue-soft); color: var(--blue); margin-bottom: 1.1rem;
}
/* Drawn rather than typed: these were ♥ ⇆ ◷ ✦ until Kim asked for artwork on
   the last two ("Lightbulb helping hand clip art here"). `currentColor` keeps
   them tied to the tile's colour, so the two never drift apart. */
.card-icon svg { width: 27px; height: 27px; display: block; }
.card h3 { font-size: 1.5rem; margin-bottom: .5rem; }
.card p { color: var(--muted); flex: 1; }
.card-link { font-weight: 600; font-size: .95rem; margin-top: .6rem; color: var(--blue); }
.card-link:hover { color: var(--gold-deep); text-decoration: none; }

/* ---------- Feature splits ---------- */
.feature-alt { background: var(--ivory); }
.feature { background: var(--white); }
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; }
.split.reverse .split-text { order: 2; }
.split.reverse .split-photo { order: 1; }
.split-text .lead { margin-bottom: 1.6rem; }
.fine { font-size: .9rem; color: var(--muted); margin-top: 1rem; }

/* One column, because the second one is empty.
   The abstract panels that used to fill it — two rings and a mem, two linked
   squares, a giant quotation mark — were struck out: "This is not needed.
   Stock photos are acceptable. Messages from satisfied couples also are nice."
   A lone left-hand column with a hole beside it looks like a picture that
   failed to load, so these centre instead and read as a decision.
   Adding a photograph means deleting `split-solo` from the container. */
.split.split-solo {
  grid-template-columns: 1fr; max-width: 780px;
  margin-inline: auto; text-align: center;
}

/* The photograph slot. Nothing uses it yet — there are no photographs in the
   repository beyond the logo and the event stills. */
.split-photo {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  background: var(--blue-soft);
}
.split-photo img {
  display: block; width: 100%; height: 100%;
  min-height: 320px; object-fit: cover;
}

/* ---------- Couples (empty until somebody real has said something) ---------- */
.couples { background: var(--white); }
.couple-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.6rem; margin-top: 2.6rem;
}
.couple {
  margin: 0; padding: 2rem 1.8rem; border-radius: var(--radius);
  background: var(--ivory); border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); position: relative;
}
.couple blockquote {
  margin: 0; font-family: var(--serif); font-size: 1.35rem; line-height: 1.5;
  color: var(--blue-ink);
}
.couple blockquote::before { content: "\201C"; }
.couple blockquote::after  { content: "\201D"; }
.couple figcaption {
  margin-top: 1rem; font-family: var(--sans); font-size: .92rem;
  font-weight: 600; color: var(--gold-deep);
}

/* ---------- Dating Source (dark band) ---------- */
.dating-source {
  position: relative; color: #fff; isolation: isolate;
  background: linear-gradient(135deg, #4A2A47, #6E4067);
}
.dating-source::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(700px 400px at 85% 20%, rgba(255,0,117,.32), transparent 60%);
}
.dating-source .lead { max-width: 620px; margin-left: auto; margin-right: auto; }

/* ---------- Board ---------- */
.board { background: var(--cream); }
.board-group { margin-top: 2.5rem; }
.board-subhead {
  font-family: var(--sans); text-transform: uppercase; letter-spacing: .16em;
  font-size: .8rem; color: var(--gold-deep); font-weight: 700; text-align: center; margin-bottom: 1.6rem;
}
.people { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem 2.6rem; margin: 0; padding: 0; }
.person { text-align: center; width: 150px; }
.avatar {
  width: 92px; height: 92px; border-radius: 50%; margin: 0 auto .8rem;
  display: grid; place-items: center; font-family: var(--serif); font-size: 1.9rem; font-weight: 600;
  color: var(--blue-deep); background: var(--white); border: 2px solid var(--gold);
  box-shadow: var(--shadow-sm);
}
.person-name { font-weight: 600; margin: 0; color: var(--blue-ink); }
.person-role { margin: 0; color: var(--muted); font-size: .9rem; }

/* ---------- Videos ---------- */
.videos { background: var(--ivory); }
.video-featured { margin: 2.6rem auto 1.8rem; max-width: 880px; }
.video-featured video {
  width: 100%; aspect-ratio: 16/9; display: block; border-radius: var(--radius);
  box-shadow: var(--shadow); background: #1a0f1c;
}
.video-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin: 0 0 1rem; }
.video-item { margin: 0; }
.video-item video {
  width: 100%; aspect-ratio: 16/9; display: block; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); background: #1a0f1c;
  transition: transform .3s var(--ease);
}
.video-item:hover video { transform: translateY(-4px); box-shadow: var(--shadow); }
.video-cap {
  text-align: center; font-weight: 600; color: var(--blue-ink);
  margin: .7rem 0 0; font-family: var(--sans); font-size: .96rem;
}

/* ---------- Contact ---------- */
.contact { background: var(--white); }
.contact-list { list-style: none; padding: 0; margin: 1.6rem 0 0; }
.contact-list li { padding: .55rem 0; border-bottom: 1px solid var(--line); color: var(--ink); }
.contact-k { display: inline-block; width: 96px; color: var(--gold-deep); font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; }
.contact-form {
  background: var(--ivory); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 2rem; box-shadow: var(--shadow-sm);
}
.field { margin-bottom: 1.1rem; }
.field label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: .4rem; color: var(--blue-ink); }
.field input, .field select, .field textarea {
  width: 100%; padding: .75rem .85rem; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--sans); font-size: 1rem; background: #fff; color: var(--ink);
  transition: border-color .2s, box-shadow .2s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-soft);
}
.contact-form .btn { width: 100%; margin-top: .4rem; }
.form-note { font-size: .9rem; margin: .9rem 0 0; min-height: 1.2em; }

/* Entering yourself by talking, with the form one tap away (case 41). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* The two tabs that used to sit here are gone: Kim, "I'm not sure why there
   are two options. I'd have it say 'tell us about yourself' which opens to the
   form." What is left is one checkbox and one link, neither of which reads as
   a fork in the road. */
.perspective {
  display: flex; align-items: center; gap: .55rem; margin: 1.6rem 0 .4rem;
  font-family: var(--sans); font-size: .95rem; color: var(--muted);
  cursor: pointer;
}
.perspective input { width: 1.05rem; height: 1.05rem; accent-color: var(--blue); }
.chat-offer {
  margin: 0 0 .4rem; font-family: var(--sans); font-size: .95rem;
  color: var(--muted);
}
.linky {
  padding: 0; border: 0; background: none; cursor: pointer;
  font: inherit; color: var(--blue); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
.linky:hover { color: var(--blue-ink); }
.intake-chat {
  margin-top: 1rem;
  background: var(--ivory); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.4rem; box-shadow: var(--shadow-sm);
}
.chat-log { display: flex; flex-direction: column; gap: .7rem; margin-bottom: 1rem; }
.chat-line {
  max-width: 85%; padding: .7rem .9rem; border-radius: 14px;
  font-size: 1rem; line-height: 1.45;
}
/* Us on the left, them on the right — the arrangement everybody already
   knows from a messaging app, so nobody has to work out who is speaking. */
.chat-us { align-self: flex-start; background: var(--blue-soft); color: var(--blue-ink); }
.chat-them { align-self: flex-end; background: var(--blue); color: #fff; }
.chat-entry { display: flex; gap: .6rem; }
.chat-entry input {
  flex: 1; padding: .75rem .85rem; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); font-family: var(--sans); font-size: 1rem;
  background: #fff; color: var(--ink);
}
.chat-entry .btn { width: auto; flex: 0 0 auto; }
.form-note.ok { color: #198754; }
.form-note.err { color: #c0392b; }

/* ---------- Donate CTA ---------- */
.donate-cta {
  text-align: center; color: #fff;
  background: linear-gradient(135deg, var(--gold-deep), var(--gold));
}
.donate-cta .section-title.light { color: #fff; }
.donate-cta .lead.light { color: rgba(255,255,255,.9); }
.donate-cta .btn-gold { background: var(--blue-deep); color: #fff; box-shadow: 0 10px 26px -12px rgba(46,24,48,.6); }
.donate-cta .btn-gold:hover { background: var(--blue-ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--blue-ink); color: rgba(255,255,255,.78); padding: 3.5rem 0 1.5rem; }
.footer-inner { display: grid; grid-template-columns: 1.3fr 1.4fr 1fr; gap: 2.5rem; }
.footer-logo { height: 54px; margin-bottom: 1rem; }
.footer-tag { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: rgba(255,255,255,.9); max-width: 280px; }
.footer-nav { display: flex; flex-direction: column; gap: .55rem; }
.footer-nav a { color: rgba(255,255,255,.78); font-size: .95rem; }
.footer-nav a:hover { color: var(--gold); text-decoration: none; }
.footer-contact p { margin: 0 0 .4rem; font-size: .95rem; }
.footer-contact a { color: rgba(255,255,255,.85); }
.footer-contact a:hover { color: var(--gold); }
.footer-contact .ig { display: inline-block; margin-top: .6rem; color: var(--gold); font-weight: 600; }
.footer-legal {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 2.5rem; padding-top: 1.4rem;
  font-size: .82rem; color: rgba(255,255,255,.55);
}
.footer-legal p { margin: 0 0 .35rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:hover, .card:hover { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .nav, .nav-cta { display: none; }
  .nav-toggle { display: flex; }
}
@media (max-width: 1000px) {
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
  .split { grid-template-columns: 1fr; gap: 2rem; }
  /* On a phone the picture always follows the words, whichever side it takes
     on a wide screen. */
  .split.reverse .split-text { order: 1; }
  .split.reverse .split-photo { order: 2; }
  .split-photo img { min-height: 220px; }
  .card-grid { grid-template-columns: 1fr; }
  .video-grid { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  .contact-k { display: block; width: auto; margin-bottom: 2px; }
}

/* =========================================================
   Sign-in link + the shadchan portal section.
   Added with the portal: the public site now has a private
   half, and the front page should say so plainly.
   ========================================================= */

.nav-signin {
  font-weight: 600;
  padding-left: 18px;
  margin-left: 4px;
  border-left: 1px solid var(--line);
}

.section.portal {
  background: var(--blue-deep);
  color: #fff;
  overflow: hidden;
}
.portal-inner {
  display: grid;
  gap: 48px;
  align-items: center;
}
@media (min-width: 900px) {
  .portal-inner { grid-template-columns: 1.05fr .95fr; }
}
/* With the roster mockup gone there is no second column. Centred, so the
   section reads as finished rather than as a picture that failed to load. */
.portal-inner.portal-solo {
  grid-template-columns: 1fr; max-width: 760px;
  margin-inline: auto; text-align: center;
}
.portal-solo .portal-actions { justify-content: center; }
.portal .eyebrow { color: var(--gold); }
.portal .section-title { color: #fff; }
.portal .lead { color: rgba(255, 255, 255, .82); }

.portal-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.btn-primary { background: #fff; color: var(--blue-deep); }
.btn-primary:hover { background: rgba(255, 255, 255, .9); text-decoration: none; }
.btn-ghost-dark {
  border: 1px solid rgba(255, 255, 255, .35);
  color: #fff;
}
.btn-ghost-dark:hover { border-color: #fff; text-decoration: none; }

@media (max-width: 720px) {
  .brand-logo { height: 26px; max-width: 156px; }
  .header-inner { height: 62px; gap: 1rem; }
}
@media (max-width: 380px) {
  .brand-logo { height: 22px; max-width: 132px; }
}

/* ---------- Photo ID (Tell us about yourself) ----------

   Two tap targets, side by side, sized like the thing they are asking for
   rather than like a form field: a licence is a wide rectangle, so the slots
   are 1.6:1 and the person can see at a glance that a portrait photo of a
   ceiling is not what was wanted. The thumbnail fills the slot once a picture
   is chosen, which is the only confirmation that matters on a phone. */
.id-hint {
  background: var(--blue-soft); border-radius: var(--radius);
  padding: .8rem 1rem; margin: 1.2rem 0 0;
}
.id-sides { display: flex; gap: 1rem; margin: 1.4rem 0 .4rem; }
.id-side {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  gap: .5rem; cursor: pointer;
}
.id-thumb {
  width: 100%; aspect-ratio: 1.6 / 1; border-radius: var(--radius);
  border: 2px dashed var(--line); background: var(--white);
  background-size: cover; background-position: center;
  /* The prompt is inside the empty slot, and disappears under the photograph
     the moment there is one — an empty dashed rectangle says nothing about
     what it wants. */
  display: flex; align-items: center; justify-content: center; text-align: center;
  padding: .5rem; font-size: .8rem; color: var(--muted);
  transition: border-color .15s ease;
}
.id-thumb[style*="url"] { color: transparent; }
.id-side:hover .id-thumb, .id-side:focus-within .id-thumb { border-color: var(--blue); }
/* Solid, in the accent, once the server has it — a dashed outline still reads
   as "empty" however good the picture inside it is. */
.id-thumb.done { border: 2px solid var(--gold); }
.id-side-label {
  font-weight: 600; font-size: .85rem; color: var(--blue-ink);
}
.id-check .btn { width: 100%; margin-top: .8rem; }
@media (max-width: 420px) {
  .id-sides { flex-direction: column; }
}


/* ---------- Photographs at sign-up ----------

   Not the ID's shape. A licence is a wide card and gets a 1.6:1 window; a
   photograph of a person is portrait, and the tiles are small squares in a row
   that scrolls — because "add another" is a thing somebody does three times,
   and three full-width cards is a page nobody reaches the end of. */
.photo-row {
  display: flex; gap: 12px; margin: .9rem 0 .2rem;
  overflow-x: auto; padding-bottom: 4px;
}
.photo-tile {
  flex: 0 0 auto; display: flex; flex-direction: column;
  align-items: center; gap: .45rem; cursor: pointer;
}
.photo-thumb {
  width: 96px; height: 112px; border-radius: var(--radius);
  border: 2px dashed var(--line); background: var(--white);
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: .4rem;
  font-size: .72rem; color: var(--muted); line-height: 1.25;
  transition: border-color .15s ease;
}
.photo-tile:hover .photo-thumb,
.photo-tile:focus-within .photo-thumb { border-color: var(--blue); }
/* Solid once the server has it — a dashed outline still reads as empty. */
.photo-thumb.done { border: 2px solid var(--gold); color: transparent; }
.photo-thumb[style*="url"] { color: transparent; }

/* A button that is waiting for something looks like it (Kim, 2 Oct: the
   sign-up's send stays shut until a photo is added, and a shut button that
   looks open reads as a broken one). */
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }