/* Shared components: buttons, forms, cards, pills, tables, dialogs. */
/* ---------------------------------------------------------------- buttons */
.btn,.btn-sm{display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--accent-600); color:#fff; border:0; border-radius:var(--r);
  padding:14px 28px; min-height:50px; font-weight:600; font-size:1rem; cursor:pointer;
  font-family:inherit; text-align:center; line-height:1.25;
  box-shadow:0 1px 2px rgba(30,42,51,.14), 0 3px 10px rgba(30,42,51,.06);
  transition:background .15s var(--ease), box-shadow .2s var(--ease), transform .12s var(--ease);
  -webkit-tap-highlight-color:transparent; user-select:none}
.btn-sm{padding:10px 18px; min-height:44px; font-size:.94rem}
.btn:hover,.btn-sm:hover{background:var(--accent-700); text-decoration:none; transform:none;
  box-shadow:0 2px 4px rgba(30,42,51,.15), 0 6px 16px rgba(30,42,51,.08)}
.btn:active,.btn-sm:active{background:var(--accent-800); transform:translateY(1px);
  box-shadow:0 1px 2px rgba(30,42,51,.15)}
.btn:disabled,.btn-sm:disabled{opacity:.55; cursor:not-allowed; transform:none;
  box-shadow:none}
.btn.ghost,.btn-sm.ghost{background:#fff; color:var(--accent-700);
  box-shadow:inset 0 0 0 1.5px var(--line-strong), var(--shadow-xs)}
.btn.ghost:hover,.btn-sm.ghost:hover{filter:none; background:var(--tint);
  box-shadow:inset 0 0 0 1.5px var(--accent), var(--shadow-xs)}
.btn.ghost:active,.btn-sm.ghost:active{filter:none; background:var(--tint-line);
  transform:translateY(1px); box-shadow:inset 0 0 0 1.5px var(--accent)}
.link{color:var(--muted); font-weight:600; font-size:.92rem;
  display:inline-flex; align-items:center; min-height:44px; padding:0 4px}
a.link:hover,button.link:hover{color:var(--accent-700)}
button.link{background:none; border:0; cursor:pointer; font-family:inherit}
.link.danger{color:var(--danger)}

/* status dots — colour-coded state markers (replace the old emoji prefixes) */
.sdot{display:inline-block; width:9px; height:9px; border-radius:50%;
  background:var(--muted); margin-inline-end:8px; vertical-align:2px}
.sdot.ok{background:var(--ok)}
.sdot.warn{background:var(--warn)}
.sdot.gold{background:var(--gold)}

/* ---------------------------------------------------------------- hero */
.hero{text-align:center; padding:44px 0 26px}
.kicker{display:inline-block; background:var(--tint); color:var(--accent-700); font-weight:600;
  font-size:.8rem; padding:7px 15px; border-radius:var(--r-pill); margin-bottom:20px;
  letter-spacing:.02em; border:1px solid var(--tint-line)}
.hero h1{font-size:clamp(2.5rem,9vw,4.2rem)}
.lede{max-width:620px; margin:18px auto 30px; font-size:1.12rem; color:var(--ink-soft)}
.cta{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.cta .btn,.cta .btn.ghost{min-width:min(100%,280px)}
@media(min-width:640px){.cta .btn,.cta .btn.ghost{min-width:0}}

.steps{display:grid; grid-template-columns:1fr; gap:14px; margin-top:44px}
@media(min-width:640px){.steps{grid-template-columns:repeat(2,1fr); gap:18px}}
@media(min-width:960px){.steps{grid-template-columns:repeat(4,1fr)}}
.step{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:24px 22px; box-shadow:var(--shadow-sm); position:relative}
.step .num{width:36px; height:36px; border-radius:50%; background:var(--tint); color:var(--accent-700);
  border:1.5px solid var(--tint-line); display:grid; place-items:center; font-weight:700;
  margin-bottom:14px; font-family:'Newsreader',serif; font-size:1.05rem}
.step h3{font-size:1.18rem}
.step p{color:var(--muted); margin:.35em 0 0; font-size:.95rem}

/* ---------------------------------------------------------------- forms */
.form-page{max-width:720px; margin:0 auto}
.form-page.narrow{max-width:440px}
.form-page > h1{margin-bottom:.1em}
label{display:block; font-weight:600; font-size:.9rem; margin-bottom:2px; color:var(--ink-soft)}
.block{margin:18px 0}
input,select,textarea{width:100%; padding:13px 15px; border:1.5px solid var(--line-strong);
  border-radius:var(--r-sm); font-family:inherit; font-size:max(16px,1rem); background:#fff;
  margin-top:6px; color:var(--ink); min-height:48px;
  transition:border-color .15s, box-shadow .15s; -webkit-appearance:none; appearance:none}
input::placeholder,textarea::placeholder{color:#9d97b0}
/* Show/Hide on password boxes (static/revealpw.js wraps each one). The wrapper is
   block-level so it drops into the same place the bare input used to sit, and the
   button is overlaid inside the field's right edge with padding reserved for it so
   long passwords never run underneath. */
.pw-wrap{position:relative; display:block}
.pw-wrap input{padding-inline-end:74px}
.pw-reveal{position:absolute; inset-inline-end:8px; top:6px; bottom:0; margin:auto 0;
  height:34px; padding:0 10px; border:0; border-radius:var(--r-sm); background:none;
  font-family:inherit; font-size:.85rem; font-weight:600; color:var(--accent-700);
  cursor:pointer; min-height:0; width:auto}
.pw-reveal:hover{background:rgba(39,75,102,.08)}
.pw-reveal:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
input:focus,select:focus,textarea:focus{outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(39,75,102,.14)}
textarea{resize:vertical; line-height:1.55; min-height:0}
select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23645d7a' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; padding-inline-end:38px; cursor:pointer}
input[type=checkbox],input[type=radio]{width:22px; height:22px; min-height:0; padding:0; margin:0;
  accent-color:var(--accent-600); -webkit-appearance:auto; appearance:auto; cursor:pointer; flex:none}
input[type=number]{-moz-appearance:textfield}
.dob-parts{display:flex; gap:8px}
.dob-parts .dob-m{flex:2.2; min-width:0}
.dob-parts .dob-d{flex:1; min-width:0; text-align:center}
.dob-parts .dob-y{flex:1.4; min-width:0; text-align:center}
.dob-parts.input-error .dob-part{border-color:var(--danger) !important; background:var(--danger-bg)}
.grid{display:grid; grid-template-columns:1fr; gap:14px}
@media(min-width:560px){.grid{grid-template-columns:1fr 1fr}}
.grid .wide{grid-column:1/-1}
fieldset{border:1.5px solid var(--line); background:var(--card); border-radius:var(--r);
  padding:18px; margin:22px 0; box-shadow:var(--shadow-xs)}
legend{font-family:'Newsreader',serif; font-weight:600; padding:0 10px; font-size:1.05rem}
.manual{margin-top:8px}
.contact-note{color:var(--muted); font-size:.92rem; margin:18px 0 4px}

/* numbered form sections */
.form-step{margin:30px 0 0; padding:22px clamp(12px,3.5vw,18px); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--shadow-sm)}
.form-step .block:first-of-type{margin-top:8px}
.step-head{display:flex; gap:12px; align-items:baseline; margin-bottom:4px}
.step-num{flex:none; width:30px; height:30px; border-radius:50%; background:var(--tint);
  border:1.5px solid var(--tint-line); color:var(--accent-700); display:grid; place-items:center;
  font-weight:700; font-family:'Newsreader',serif; font-size:.95rem; transform:translateY(4px)}
.step-title{font-family:'Newsreader',serif; font-weight:600; font-size:1.28rem; line-height:1.2}
.step-sub{color:var(--muted); font-size:.92rem; margin:2px 0 6px 42px}
.form-step fieldset{border:0; padding:0; margin:12px 0 0; box-shadow:none; background:none}
.form-step legend{padding:0; font-size:1rem; color:var(--ink-soft); font-family:'Hanken Grotesk',sans-serif;
  font-weight:600; margin-bottom:6px}
.form-foot{margin:28px 0 6px}
.form-foot .btn{width:100%}
@media(min-width:640px){
  .form-step{padding:26px 26px}
  .form-foot .btn{width:auto; min-width:260px}
}

/* who-sees-your-photo card (signup step 4 / add-profile) */
.req-note{font-weight:500; font-size:.95rem; color:var(--muted)}
.audience-card{background:var(--tint); border:1px solid var(--tint-line);
  border-radius:var(--r); padding:14px 16px; margin:12px 0 16px}
.audience-h{margin:0 0 8px; font-weight:700; font-size:.92rem; color:var(--accent-800)}
.audience-list{list-style:none; margin:0; padding:0; display:grid; gap:7px}
.audience-list li{position:relative; padding-inline-start:24px; font-size:.9rem; color:var(--ink-soft);
  line-height:1.5}
.audience-list li::before{content:""; position:absolute; left:2px; top:.42em; width:12px; height:12px;
  border-radius:50%; background:var(--ok-bg); border:1.5px solid var(--ok)}
.audience-list li.yes::after{content:""; position:absolute; left:5.5px; top:calc(.42em + 3px);
  width:5px; height:3px; border-inline-start:1.5px solid var(--ok); border-bottom:1.5px solid var(--ok);
  transform:rotate(-45deg)}
.audience-list li.opt::before{background:var(--warn-bg); border-color:var(--warn)}
.audience-list li.no::before{background:var(--bg-soft); border-color:var(--line-strong)}
.audience-list li.no{color:var(--muted)}

/* "wrong email?" disclosure on the verify page */
.change-email{margin-top:8px}
.change-email summary{cursor:pointer; list-style:none; display:inline-flex}
.change-email summary::-webkit-details-marker{display:none}
.change-email .code-form{margin-top:8px}
.change-email input[type=email]{letter-spacing:normal; text-align:start; max-width:280px}
.email-change-form{max-width:340px; margin-top:8px}
.email-change-form input{letter-spacing:normal; text-align:start}
.email-change-form .btn-sm{margin-top:10px}

/* radios as choice chips */
.radios{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 10px}
.sub-head{grid-column:1/-1; margin:20px 0 2px; font-weight:600; color:var(--ink)}
.marital-fields{grid-column:1/-1}
.marital-fields .block{margin:12px 0}
.marital-fields .field-err{display:block; margin-top:4px}
.hashkafa-picker{margin:2px 0 12px; padding:12px 14px; border:1.5px solid var(--line-strong);
  border-radius:14px; background:var(--card)}
.hp-head{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px}
.hp-all{font-size:.85rem; white-space:nowrap}
.hp-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px}
.hp-opt{display:flex; align-items:center; gap:9px; padding:9px 12px; border:1.5px solid var(--line-strong);
  border-radius:10px; font-size:.9rem; font-weight:500; cursor:pointer; transition:border-color .12s, background .12s}
.hp-opt:hover{border-color:var(--accent-400,#b9a5ff)}
.hp-opt:has(input:checked),.hp-opt.is-checked{border-color:var(--accent-600,var(--accent)); background:var(--accent-50,#f3f0ff)}
.hp-opt input{margin:0; flex:none}
/* Spoken-languages multi-select — same chip grid as the hashkafa picker. */
.lang-fields{margin:12px 0}
.lang-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:8px; margin-top:8px}
.lang-opt{display:flex; align-items:center; gap:9px; padding:9px 12px; border:1.5px solid var(--line-strong);
  border-radius:10px; font-size:.9rem; font-weight:500; cursor:pointer; transition:border-color .12s, background .12s}
.lang-opt:hover{border-color:var(--accent-400,#b9a5ff)}
.lang-opt:has(input:checked),.lang-opt.is-checked{border-color:var(--accent-600,var(--accent)); background:var(--accent-50,#f3f0ff)}
.lang-opt input{margin:0; flex:none}
.radio{display:flex; align-items:center; gap:9px; font-weight:500; margin:0;
  padding:10px 16px 10px 12px; min-height:46px; border:1.5px solid var(--line-strong);
  border-radius:var(--r-pill); background:#fff; cursor:pointer; color:var(--ink);
  transition:border-color .15s, background .15s; font-size:.95rem}
.radio:hover{border-color:var(--accent)}
.radio:has(input:checked){border-color:var(--accent-600); background:var(--tint);
  color:var(--accent-800); font-weight:600; box-shadow:0 0 0 1px var(--accent-600) inset}
.radio input{width:18px; height:18px}
.submitter{margin-top:10px}

.toggle{display:flex; gap:12px; align-items:flex-start; margin:20px 0; font-weight:500;
  padding:14px 16px; background:var(--card); border:1.5px solid var(--line);
  border-radius:var(--r-sm); cursor:pointer; font-size:.95rem; color:var(--ink)}
.toggle input{margin:2px 0 0}
.toggle:has(input:checked){border-color:var(--tint-line); background:#fdfcff}

/* custom file field (photos) */
.file-field{position:relative}
.file-field input[type=file]{position:absolute; width:1px; height:1px; min-height:0; padding:0;
  margin:0; opacity:0; overflow:hidden; border:0; pointer-events:none}
.file-trigger{display:flex; align-items:center; gap:12px; margin-top:6px;
  border:2px dashed var(--line-strong); border-radius:var(--r-sm); background:#fffdf9;
  padding:14px 16px; min-height:58px; cursor:pointer; transition:border-color .15s, background .15s;
  font-weight:500; color:var(--ink-soft)}
.file-field:hover .file-trigger{border-color:var(--accent); background:var(--tint)}
.file-trigger .ft-icon{line-height:0; color:var(--accent-700); flex:none}
.file-trigger .ft-label{font-weight:600; color:var(--ink)}
.file-trigger .ft-note{display:block; font-size:.82rem; color:var(--muted); font-weight:400}
.file-field.has-files .file-trigger{border-style:solid; border-color:var(--ok); background:var(--ok-bg)}
.file-field.has-files .ft-label{color:var(--ok)}

/* ---------------------------------------------------------------- dropzone */
.dropzone{border:2px dashed var(--line-strong); border-radius:var(--r-lg);
  padding:30px clamp(10px,4vw,18px); min-width:0;
  text-align:center; cursor:pointer; background:#fffdf9; margin-top:18px;
  transition:border-color .2s, background .2s, box-shadow .2s; position:relative}
.dropzone:hover,.dropzone.over{border-color:var(--accent); background:var(--tint);
  box-shadow:0 0 0 4px rgba(124,92,255,.08)}
.dropzone.over{border-style:solid}
.dz-icon{line-height:1; color:var(--accent-700); display:flex; justify-content:center}
.dz-inner p{margin:12px 0 2px; font-size:1.02rem}
.dz-inner small{color:var(--muted)}
.dz-status{margin:16px auto 0; padding:12px 16px; border-radius:var(--r-sm); font-size:.94rem;
  font-weight:500; max-width:480px; text-align:start; display:flex; align-items:center; gap:10px;
  justify-content:center}
.dz-status.busy{background:var(--warn-bg); color:var(--warn); border:1px solid #f0dcb0}
.dz-status.ok{background:var(--ok-bg); color:var(--ok); border:1px solid #bfe3cf}
.dz-status.err{background:var(--danger-bg); color:var(--danger); border:1px solid #f2c9c6}
.actions .err{color:var(--danger); font-size:.85em; margin-inline-start:.4rem}
.dropzone:has(.dz-status.busy){border-color:var(--accent); background:var(--tint);
  animation:dzPulse 1.6s ease-in-out infinite}
@keyframes dzPulse{0%,100%{box-shadow:0 0 0 0 rgba(124,92,255,.18)} 50%{box-shadow:0 0 0 8px rgba(124,92,255,0)}}
.dropzone:has(.dz-status.ok){border-style:solid; border-color:var(--ok); background:#fdfefd; cursor:default}
.spin{display:inline-block; width:15px; height:15px; border:2.5px solid rgba(143,87,22,.25);
  border-top-color:var(--warn); border-radius:50%; animation:sp .7s linear infinite;
  vertical-align:middle; flex:none}
@keyframes sp{to{transform:rotate(360deg)}}

/* "Write my resume" — the no-resume entry point + guided questionnaire */
.no-resume-cta{margin:14px 0 0; text-align:center; color:var(--muted); font-size:.94rem}
.no-resume-cta .link{color:var(--accent-700); font-weight:600}
.guided{margin-top:16px; padding:18px 16px; border:1px solid var(--tint-line);
  border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-xs)}
.guided-intro{margin:0 0 14px; color:var(--ink-soft); font-size:.95rem}
.guided-note{margin:12px 0 0; color:var(--muted); font-size:.86rem}
.guided-foot{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin-top:14px}

/* SMS opt-in disclosure — permanently visible helper text under the phone field
   (Twilio A2P proof-of-consent). Legible, not faint; spans the full form width. */
.sms-consent{grid-column:1/-1; margin:-2px 0 2px; font-size:.82rem; line-height:1.5;
  color:var(--ink-soft)}
.sms-consent a{color:var(--accent-700); font-weight:600; text-decoration:underline}

/* skeleton for the fields about to be filled by AI */
.dz-skel{display:none; margin-top:18px; padding:20px 18px; border:1px solid var(--tint-line);
  border-radius:var(--r-lg); background:var(--card); box-shadow:var(--shadow-xs)}
form:has(.dz-status.busy) .dz-skel{display:block}
form:has(.dz-status.busy) #extracted:not([hidden]) ~ .dz-skel,
form:has(#extracted:not([hidden])) .dz-skel{display:none}
.dz-skel .sk-title{font-size:.85rem; font-weight:600; color:var(--accent-700); margin-bottom:14px}
.sk-row{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:12px}
.sk{height:16px; border-radius:6px;
  background:linear-gradient(90deg,var(--tint) 25%, #e6ddff 45%, var(--tint) 65%);
  background-size:220% 100%; animation:shimmer 1.4s ease-in-out infinite}
.sk.tall{height:44px}
.sk.w60{width:60%}
@keyframes shimmer{0%{background-position:130% 0} 100%{background-position:-90% 0}}

/* extracted fields reveal — the AI moment */
#extracted:not([hidden]){animation:extractIn .5s var(--ease)}
#extracted:not([hidden]) .grid > label{animation:fieldIn .45s var(--ease) both}
#extracted:not([hidden]) .grid > label:nth-child(1){animation-delay:.05s}
#extracted:not([hidden]) .grid > label:nth-child(2){animation-delay:.1s}
#extracted:not([hidden]) .grid > label:nth-child(3){animation-delay:.15s}
#extracted:not([hidden]) .grid > label:nth-child(4){animation-delay:.2s}
#extracted:not([hidden]) .grid > label:nth-child(5){animation-delay:.25s}
#extracted:not([hidden]) .grid > label:nth-child(6){animation-delay:.3s}
#extracted:not([hidden]) .grid > label:nth-child(7){animation-delay:.35s}
#extracted:not([hidden]) .grid > label:nth-child(8){animation-delay:.4s}
#extracted:not([hidden]) .grid > label:nth-child(9){animation-delay:.45s}
#extracted:not([hidden]) .grid > label:nth-child(10){animation-delay:.5s}
@keyframes extractIn{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}
@keyframes fieldIn{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}
fieldset.extracted{border:1.5px solid var(--tint-line) !important; background:linear-gradient(180deg,#fdfcff,#fff) !important;
  padding:18px !important; margin:20px 0 0 !important; box-shadow:var(--shadow-xs) !important; border-radius:var(--r)}
fieldset.extracted legend{color:var(--accent-700); font-family:'Newsreader',serif !important;
  font-size:1.05rem !important; padding:0 10px !important}

/* ---------------------------------------------------------------- cards */
.sec-h{font-size:1.55rem; margin-top:14px}
.cards{display:grid; grid-template-columns:1fr; gap:18px; margin:18px 0 36px}
@media(min-width:600px){.cards{grid-template-columns:repeat(2,1fr); gap:20px}}
@media(min-width:920px){.cards{grid-template-columns:repeat(3,1fr)}}
.card{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column;
  transition:box-shadow .25s var(--ease), transform .25s var(--ease)}
.card:hover{box-shadow:var(--shadow); transform:translateY(-2px)}
/* Portrait 4:5 (not landscape 4:3) so a portrait headshot barely crops, and the crop
   that remains favours the top ~quarter where faces sit. Same shape at every width. */
.photo{position:relative; aspect-ratio:4/5; background:var(--bg-soft)}
.photo img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block}
.noimg{width:100%; height:100%; display:grid; place-items:center; font-family:'Newsreader',serif;
  font-size:3rem; color:#b1a3ce; background:linear-gradient(140deg,#f3effc,#e7dff3 55%,#efe6da)}
.noimg.big{aspect-ratio:1; border-radius:var(--r)}
.score{position:absolute; right:12px; bottom:12px; background:rgba(255,255,255,.96);
  border-radius:var(--r-sm); padding:6px 12px; font-weight:700; color:var(--accent-700);
  box-shadow:var(--shadow-sm); font-size:1.02rem; backdrop-filter:blur(4px)}
.score small{font-size:.65em; font-weight:600}
.card-body{padding:18px; flex:1; display:flex; flex-direction:column; gap:7px}
.card-body h3{font-size:1.3rem}
.meta{color:var(--muted); font-size:.9rem; margin:0}
.occ{font-weight:500; margin:0; font-size:.95rem; color:var(--ink-soft)}
.about{color:var(--ink-soft); font-size:.92rem; margin:0}
.blurb{background:var(--tint); border:1px solid var(--tint-line); padding:11px 13px;
  border-radius:var(--r-sm); font-size:.9rem; margin:4px 0; color:var(--ink-soft); line-height:1.5}
/* Keep the suggestion reason to ~2 lines so the person leads, not the explanation. */
.blurb-text{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.blurb.open .blurb-text{-webkit-line-clamp:unset; display:block}
.blurb-more{display:inline-block; margin-top:5px; background:none; border:0; padding:0;
  cursor:pointer; color:var(--accent-700); font-size:.84rem; font-weight:600}
.blurb.open .blurb-more{display:none}
.likes-you{display:inline-flex; align-items:center; gap:6px; font-size:.82rem; font-weight:700;
  color:var(--ok); background:var(--ok-bg); border:1px solid #bfe3cf; border-radius:var(--r-pill);
  padding:3px 10px; margin:2px 0 4px}
/* A shadchan personally put this match forward — brass, like the match moment. */
.shadchan-star{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:700;
  color:var(--gold-ink); background:var(--gold-bg); border:1px solid #e4d7ae; border-radius:var(--r-pill);
  padding:3px 10px; margin:0 0 8px}
.shadchan-star svg{color:var(--gold)}
.ai-tag{display:inline-block; background:var(--accent-600); color:#fff; font-size:.62rem;
  font-weight:700; padding:2.5px 8px; border-radius:6px; text-transform:uppercase;
  letter-spacing:.06em; margin-inline-end:7px; vertical-align:middle}
.actions{margin-top:auto; display:flex; align-items:center; gap:10px; padding-top:12px; flex-wrap:wrap}
.actions .btn-sm{flex:1 1 auto; min-width:110px}
.actions .btn-sm.ghost{flex:0 1 auto}
.actions .link{margin-inline-start:auto}
.done{color:var(--ok); font-weight:600; display:inline-flex; align-items:center; min-height:44px}
/* Pass is acknowledged too, but quietly — muted, not the celebratory green of Interested. */
.passed{color:var(--muted); font-weight:600; display:inline-flex; align-items:center; min-height:44px}
/* Undo-a-Pass toast: bottom-centered, out of the way, dismisses itself. */
.toast{position:fixed; left:50%; bottom:22px; transform:translate(-50%,120%);
  display:flex; align-items:center; gap:14px; background:var(--ink); color:#fff;
  padding:12px 16px 12px 18px; border-radius:var(--r-pill); box-shadow:var(--shadow);
  z-index:210; opacity:0; transition:transform .25s var(--ease), opacity .25s var(--ease);
  font-size:.92rem; max-width:calc(100vw - 32px)}
.toast.show{transform:translate(-50%,0); opacity:1}
.toast-undo{background:transparent; border:0; color:#fff; font-weight:700; cursor:pointer;
  text-decoration:underline; text-underline-offset:2px; min-height:44px; padding:0 4px; font-size:.92rem}

/* the match moment */
.card.match{border:0; box-shadow:0 0 0 2px var(--gold), var(--shadow); position:relative;
  background:var(--card)}
.card.match::before{content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:linear-gradient(120deg,#e7cf9b,#caa45a 30%,#f4e3bd 50%,#caa45a 70%,#e7cf9b);
  background-size:220% 100%; animation:goldShift 4s linear infinite;
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; z-index:1}
@keyframes goldShift{to{background-position:-220% 0}}
/* Who am I acting as? Prominent on /matches when an account manages several profiles,
   so a parent never likes on the wrong child's behalf. */
.acting-as{background:var(--tint); border:1px solid var(--tint-line); border-radius:var(--r);
  padding:11px 15px; margin:4px 0 18px; color:var(--ink-soft); font-size:.92rem}
.acting-as strong{color:var(--accent-700)}
.match-hero{margin:6px 0 2px; text-align:center}
.match-hero .sec-h{font-size:1.8rem}
.handled-by{font-style:italic}
/* The match itself gets its own centered, contained lane — not a stranded cell in the
   3-up suggestions grid. One mutual match centers; several stack down the middle. */
.match-cards{display:flex; flex-direction:column; align-items:center; gap:20px;
  max-width:480px; margin:2px auto 40px}
.match-cards .card{width:100%}

/* confetti (pure CSS/JS, no libs) */
.confetti-layer{position:fixed; inset:0; pointer-events:none; z-index:200; overflow:hidden}
.confetti-piece{position:absolute; top:-14px; width:9px; height:14px; border-radius:2px;
  animation:confFall linear forwards}
@keyframes confFall{
  0%{transform:translateY(-3vh) rotate(0) rotateY(0); opacity:1}
  85%{opacity:1}
  100%{transform:translateY(105vh) rotate(660deg) rotateY(540deg); opacity:0}
}

/* ---------------------------------------------------------------- pills */
.pill{display:inline-flex; align-items:center; padding:5px 13px; border-radius:var(--r-pill);
  font-size:.78rem; font-weight:700; letter-spacing:.01em; align-self:flex-start}
.pill.awaiting_shadchan{background:var(--warn-bg); color:var(--warn)}
.pill.redt{background:var(--tint); color:var(--accent-700)}
.pill.dating{background:var(--ok-bg); color:var(--ok)}
.pill.on_hold{background:#eceaf1; color:#5d5871}
.pill.not_pursuing{background:var(--danger-bg); color:var(--danger)}

/* ---------------------------------------------------------------- empty states */
.empty{margin:22px 0 30px; padding:38px 22px; text-align:center; background:var(--card);
  border:1.5px dashed var(--line-strong); border-radius:var(--r-lg); color:var(--muted); max-width:none}
.empty strong{font-family:'Newsreader',serif; font-size:1.25rem; letter-spacing:-.01em}
.empty .empty-icon{display:block; font-size:2.4rem; margin-bottom:10px;
  filter:grayscale(.15) drop-shadow(0 4px 10px rgba(36,31,54,.10))}
.empty strong{display:block; font-family:'Newsreader',serif; font-size:1.2rem; color:var(--ink);
  font-weight:600; margin-bottom:4px}
.empty p{margin:.3em auto 0; max-width:46ch}
.empty .btn-sm,.empty .btn{margin-top:16px}

/* ---------------------------------------------------------------- profile */
.profile-head{display:flex; gap:22px; align-items:flex-end; flex-wrap:wrap; margin-bottom:12px}
.gallery{display:flex; gap:10px; flex-wrap:wrap}
.gallery img{width:150px; height:180px; object-fit:cover; object-position:center top;
  border-radius:var(--r); box-shadow:var(--shadow-sm); border:1px solid var(--line)}
.gallery.edit img{width:96px; height:110px}
/* Profile view: the lead photo carries the page — give it real presence next to the name. */
.profile-head .gallery img{width:230px; height:288px}
@media(max-width:520px){.profile-head .gallery img{width:180px; height:225px}}
/* editable photo gallery on /me — each photo with its own Remove button */
.photo-edit-grid{display:flex; gap:12px; flex-wrap:wrap; margin:8px 0 2px}
.photo-edit-item{display:flex; flex-direction:column; gap:6px; align-items:center}
.photo-edit-item img{width:110px; height:132px; object-fit:cover; object-position:center top;
  border-radius:var(--r); box-shadow:var(--shadow-sm); border:1px solid var(--line)}
.photo-edit-item form{margin:0}
/* "Make first" — the no-gesture path to the same result, on every photo but the
   one already leading. Deliberately a plain button under the photo, not a hover
   affordance: a phone has no hover. */
.pfirst{background:var(--card); border:1px solid var(--line); border-radius:99px;
  padding:7px 12px; font:inherit; font-size:.78rem; font-weight:600;
  color:var(--ink-soft); cursor:pointer; min-height:36px; width:110px}
.pfirst:hover{border-color:var(--gold); color:var(--gold-ink)}
.photo-remove{width:110px; text-align:center}
.photo-remove[disabled]{opacity:.5; cursor:not-allowed}
.detail-grid{display:grid; grid-template-columns:1fr; gap:0; margin-top:18px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); overflow:hidden}
.detail-grid > div{padding:16px 20px; border-bottom:1px solid var(--line)}
.detail-grid > div:last-child{border-bottom:0}
.detail-grid h4{margin:0 0 4px; font-size:.74rem; text-transform:uppercase; letter-spacing:.08em;
  color:var(--muted)}
.detail-grid p{margin:0; color:var(--ink-soft)}
/* Single column at every width: a clean labelled facts list with no orphaned empty cell
   (the 2-up grid left a hole whenever the short facts were an odd count). */

/* ---------------------------------------------------------------- share */
.share-h{font-size:.76rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted);
  margin:28px 0 10px; font-weight:700}
.share-card{display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r-lg); padding:20px; box-shadow:var(--shadow-sm)}
.share-card .qr{text-align:center; flex:none; margin:0 auto}
.share-card .qr img{border-radius:var(--r-sm); border:1px solid var(--line); background:#fff; display:block}
.share-card .qr .link{display:inline-flex; margin-top:4px; font-size:.82rem}
.share-actions{flex:1; min-width:min(100%,250px)}
.share-label{font-weight:600; margin:0 0 6px}
.copy-row{display:flex; gap:8px}
.copy-row input{margin:0; font-size:max(16px,.9rem); color:var(--muted); min-width:0}
.copy-row .btn-sm{flex:none}
.share-btns{display:flex; gap:8px; margin-top:12px; flex-wrap:wrap}
.chip{display:inline-flex; align-items:center; justify-content:center; padding:10px 18px;
  min-height:44px; border-radius:var(--r-pill); font-weight:600; font-size:.9rem;
  background:#fff; color:var(--ink); border:1.5px solid var(--line-strong); cursor:pointer;
  transition:background .15s, border-color .15s, transform .12s var(--ease)}
.chip:hover{text-decoration:none; background:var(--bg-soft); border-color:var(--line-strong)}
.chip:active{transform:translateY(1px)}
.chip.wa{background:#1da851; color:#fff; border-color:#1da851}
.chip.wa:hover{background:#178a42; border-color:#178a42}

/* ---------------------------------------------------------------- public profile */
.profile-view.public{max-width:760px; margin:0 auto}
.public-banner{background:var(--tint); color:var(--accent-700); text-align:center; font-weight:600;
  padding:10px 14px; border-radius:var(--r-sm); margin-bottom:20px; border:1px solid var(--tint-line);
  font-size:.92rem}
.cta-box{background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:28px 22px; text-align:center; margin:28px 0;
  box-shadow:var(--shadow)}
.cta-box h3{margin-top:0; font-size:1.45rem}
.cta-box .btn{margin-top:8px; width:100%}
@media(min-width:560px){.cta-box .btn{width:auto; min-width:240px}}

/* ---------------------------------------------------------------- search */
.search-bar{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:16px 0 8px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:14px; box-shadow:var(--shadow-xs)}
.search-bar input,.search-bar select{margin:0; min-width:0}
.search-bar input[name=q]{grid-column:1/-1}
.search-bar .btn-sm{grid-column:1/-1; width:100%}
@media(min-width:760px){
  .search-bar{display:flex; flex-wrap:wrap; align-items:center}
  .search-bar input[name=q]{flex:2 1 220px}
  .search-bar select{flex:1 1 130px; width:auto}
  .search-bar input[name=location]{flex:1 1 130px; max-width:170px}
  .search-bar input[name=age_min],.search-bar input[name=age_max]{flex:0 1 90px; max-width:95px}
  .search-bar .btn-sm{grid-column:auto; width:auto; flex:none}
}
.result-count{color:var(--muted); font-size:.9rem; margin:10px 2px 0}

/* ---------------------------------------------------------------- MDY flyer */
.flyer{max-width:840px; margin:0 auto; text-align:center}
.flyer-head h1{font-size:clamp(1.9rem,6vw,3.2rem); margin:6px 0 14px}
.flyer-head .lede{max-width:620px; margin:0 auto 10px; color:var(--ink-soft); font-size:1.08rem}
.flyer-grid{display:grid; grid-template-columns:1fr; gap:26px; align-items:center; margin:30px 0;
  text-align:start; background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:26px 22px; box-shadow:var(--shadow)}
@media(min-width:640px){.flyer-grid{grid-template-columns:1.1fr .9fr; padding:30px}}
.flyer-steps{display:flex; flex-direction:column; gap:18px}
.fstep{display:flex; gap:14px; align-items:flex-start}
.fstep .num{flex:none; width:32px; height:32px; border-radius:50%; background:var(--tint);
  border:1.5px solid var(--tint-line); color:var(--accent-700); display:grid; place-items:center;
  font-weight:700; font-family:'Newsreader',serif}
.fstep strong{font-family:'Newsreader',serif; font-size:1.12rem}
.fstep p{margin:2px 0 0; color:var(--muted); font-size:.92rem}
.flyer-qr{text-align:center; border-top:1px solid var(--line); padding-top:22px}
@media(min-width:640px){.flyer-qr{border-top:0; border-inline-start:1px solid var(--line);
  padding-top:0; padding-inline-start:28px}}
.flyer-qr img{border-radius:var(--r-sm); border:1px solid var(--line); background:#fff}
.flyer-qr .scan{font-family:'Newsreader',serif; font-weight:600; font-size:1.3rem; margin:12px 0 2px}
.flyer-qr .url{color:var(--muted); font-size:.85rem; margin:0 0 14px; word-break:break-all}
.flyer-actions{display:flex; gap:8px; justify-content:center; flex-wrap:wrap}
.flyer-actions .chip{font-family:inherit}
.flyer-foot{color:var(--muted); font-size:.9rem}

/* ---------------------------------------------------------------- intl phone */
.iti{width:100%; margin-top:6px}
.iti input{margin-top:0}

/* ---------------------------------------------------------------- verification */
.verify-banner{background:var(--warn-bg); border:1px solid #f0dcb0; color:var(--warn);
  padding:13px 16px; border-radius:var(--r-sm); margin-bottom:20px; font-weight:500;
  display:flex; gap:12px; justify-content:space-between; flex-wrap:wrap; align-items:center;
  font-size:.94rem}
.verify-banner a{color:var(--accent-700); font-weight:700; white-space:nowrap}
/* pending approval is informational, not a warning — calmer blue tone */
.pending-banner{background:#eef5fd; border-color:#cfe2f7; color:#28517a}
.dev-note{background:#eef5fd; border:1px solid #cfe2f7; color:#28517a; padding:14px 16px;
  border-radius:var(--r-sm); margin:18px 0; font-size:.94rem}
.dev-note ul{margin:8px 0 4px; padding-inline-start:18px}
.dev-note code{background:#fff; padding:2px 9px; border-radius:6px; font-size:1.1em; font-weight:700;
  letter-spacing:.12em; border:1px solid #cfe2f7}
.verify-row{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; margin:14px 0; box-shadow:var(--shadow-sm)}
.vr-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px}
.vr-head strong{font-family:'Newsreader',serif; font-size:1.1rem}
.vr-head .muted{color:var(--muted); font-size:.92rem; word-break:break-all}
.code-form{display:flex; gap:10px}
.code-form input{margin:0; letter-spacing:.35em; text-align:center; max-width:230px;
  font-size:max(16px,1.15rem); font-weight:600}
/* the wide tracking is for the typed digits — don't stretch the "6-digit code" hint or it clips */
.code-form input::placeholder{letter-spacing:.02em}
.code-form .btn-sm{flex:none}
.resend{margin-top:2px}
.resend .link{min-height:44px; font-size:.88rem}
.vbadge{display:inline-flex; align-items:center; background:var(--danger-bg); color:var(--danger);
  padding:3px 10px; border-radius:var(--r-pill); font-size:.72rem; font-weight:700; line-height:1.5}
.vbadge.ok{background:var(--ok-bg); color:var(--ok)}
/* display:inline-flex reasserted: the shared `.mini` class (used by the pair mini-card,
   .mini{display:flex}) would otherwise stretch these badges to full column width. */
.vbadge.mini{font-size:.68rem; padding:1px 8px; display:inline-flex}

/* ---------------------------------------------------------------- who-for */
.forwhom{margin-bottom:6px}

/* ---------------------------------------------------------------- my profile */
.contact-status{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; box-shadow:var(--shadow-xs)}
.contact-status .share-h{margin-top:0}
.cs-row{display:flex; gap:10px 20px; align-items:center; flex-wrap:wrap; font-size:.95rem}
.cs-row .btn-sm{margin-inline-start:auto}
.meta.via{font-style:italic}
.meta.contact{word-break:break-all}
.meta.contact a{color:var(--accent-700)}

.status-card{display:flex; justify-content:space-between; align-items:center; gap:14px;
  flex-wrap:wrap; background:var(--card); border:1px solid var(--line);
  border-inline-start:4px solid var(--ok); border-radius:var(--r); padding:16px 18px; margin:16px 0;
  box-shadow:var(--shadow-sm)}
.status-card.paused{border-inline-start-color:#a49dbb}
.status-card.engaged{border-inline-start-color:var(--gold)}
.status-card strong{font-family:'Newsreader',serif; font-weight:600; font-size:1.06rem}
.status-card .share-h{margin:0 0 4px}
.status-actions{display:flex; gap:8px; flex-wrap:wrap; align-items:flex-start}
.status-actions button{margin:0}
/* "We're engaged" opens a small, deliberate form (who / from the site) instead of
   being a one-tap off-switch — Pause stays the one-tap "just taking a break". */
.engaged-reveal>summary{list-style:none; margin:0}
.engaged-reveal>summary::-webkit-details-marker{display:none}
.engaged-reveal>summary::marker{content:""}
.engaged-reveal[open]{flex-basis:100%}
.engaged-fields{display:flex; flex-direction:column; gap:10px; max-width:420px;
  margin-top:12px; padding:14px; background:var(--tint); border:1px solid var(--line);
  border-radius:var(--r)}
.engaged-fields>label{display:flex; flex-direction:column; gap:5px; font-size:.9rem;
  font-weight:600}
.engaged-fields input[type=text]{width:100%; margin:0}
.engaged-check{flex-direction:row !important; align-items:center; gap:8px;
  font-weight:400 !important}
.engaged-check input{width:auto; min-height:0; margin:0}
.status-actions .pause-hint{flex-basis:100%; margin:2px 0 0; font-size:.82rem;
  color:var(--muted)}
.manage-btns{display:flex; flex-direction:column; gap:10px; margin-top:14px}
.manage-btns form{display:flex}
.manage-btns .btn,.manage-btns .btn.ghost{width:100%}
.manage-btns .engaged-reveal{width:100%}
.manage-btns .engaged-reveal>summary.btn{width:100%}
.manage-btns .engaged-fields{max-width:none}

.danger-zone{margin-top:38px; padding-top:18px; border-top:1px solid var(--line)}
.danger-zone .share-h{margin-top:0}

/* ---------------------------------------------------------------- block / report */
.safety-row{display:flex; gap:20px; margin:22px 0 4px; align-items:center}
.safety-row form{display:inline}
.safety-row .link{color:var(--muted)}
.safety-row .link.danger{color:var(--danger)}
.card-foot{margin-top:8px}
.report-toggle{color:var(--muted); font-size:.82rem; min-height:44px; display:inline-flex;
  align-items:center; background:none; border:0; cursor:pointer; padding:0}
.report-toggle:hover{color:var(--danger)}
.card .reportbox{margin:8px 0 0; max-width:none}
.reportbox{display:flex; flex-wrap:wrap; gap:8px; margin:6px 0 10px; max-width:480px}
/* The report form is hidden until the quiet "⚑ Report" link reveals it. The [hidden]
   selector must out-specify the .reportbox display rule above, or it stays open. */
.reportbox[hidden]{display:none}
.report-note{flex-basis:100%; margin:0; font-size:.82rem; color:var(--muted); line-height:1.45}
.reportbox input{margin:0; flex:1 1 180px}
/* Reporting is a rare, secondary action — a quiet red outline, never a filled primary. */
.report-submit{flex:none; background:transparent; color:var(--danger);
  border:1px solid var(--danger); box-shadow:none}
.report-submit:hover{background:var(--danger-bg); color:var(--danger)}

/* ---------------------------------------------------------------- shadchan */
.suggest-head{display:flex; gap:14px; align-items:center; margin:8px 0 20px}
.suggest-head .photo.sm{width:60px; height:60px; border-radius:50%; overflow:hidden; flex:none;
  border:2px solid var(--card); box-shadow:var(--shadow-sm)}
.suggest-head h1{font-size:1.6rem; margin:0}
.suggest-head .sub{margin-top:2px; font-size:.92rem}

.dash-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px;
  flex-wrap:wrap; margin-bottom:6px}
.who{color:var(--muted); font-size:.9rem; padding-top:8px}
.who a{white-space:nowrap}

.redt-row{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  padding:18px; margin-bottom:16px; box-shadow:var(--shadow-sm);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; align-items:flex-start}
.redt-pair{display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; flex:1; min-width:min(100%,340px)}
.mini{display:flex; gap:12px; align-items:flex-start; min-width:0; flex:1 1 240px}
.mini > div:last-child{min-width:0}
.photo.sm{width:54px; height:54px; border-radius:50%; aspect-ratio:1; overflow:hidden; flex:none;
  border:2px solid var(--card); box-shadow:var(--shadow-xs); background:var(--bg-soft)}
.photo.sm .noimg{font-size:1.3rem}
.amp{font-family:'Newsreader',serif; font-size:1.5rem; color:var(--gold); align-self:center}
.mini .meta{font-size:.86rem}
.redt-details{margin-top:8px; font-size:.9rem}
.redt-details summary{cursor:pointer; font-weight:600; color:var(--accent-700);
  min-height:32px; display:inline-flex; align-items:center; border-radius:6px}
.redt-details summary:hover{text-decoration:underline}
.redt-details[open]{background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:10px 14px; margin-top:8px}
.redt-details p{margin:6px 0}
.resume-text pre{white-space:pre-wrap; font-size:.8rem; background:#fff; border:1px solid var(--line);
  border-radius:8px; padding:10px; max-height:280px; overflow:auto}
.redt-right{display:flex; flex-direction:column; gap:10px; align-items:flex-start; width:100%;
  border-top:1px dashed var(--line); padding-top:14px}
@media(min-width:900px){.redt-right{width:auto; align-items:flex-end; border-top:0; padding-top:0;
  max-width:340px}}
.handling{font-size:.88rem; display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.handled{color:var(--ok); font-weight:600}
.handled .hname{font-weight:700}
/* Unclaimed is the work — make it read as "needs attention", not a muted afterthought. */
.unclaimed{color:var(--warn); font-weight:700; display:inline-flex; align-items:center; gap:6px}
.inline{display:inline}
.inline .link{color:var(--accent-700); min-height:44px; display:inline-flex; align-items:center}
/* A claimed pair recedes; an unclaimed one gets a warm left rail so it stands out at a glance. */
.redt-row.is-open{border-color:var(--gold); box-shadow:inset 4px 0 0 var(--gold), var(--shadow-sm)}
.redt-row.is-claimed{opacity:.66}
.redt-row.is-claimed:hover{opacity:1}
/* Taking a pair from another shadchan is deliberate and secondary — a small, quiet link,
   never a button that competes with the real work. */
.takeover-link{background:none; border:0; padding:0; cursor:pointer; color:var(--muted);
  font-size:.8rem; text-decoration:underline; text-underline-offset:2px;
  min-height:40px; display:inline-flex; align-items:center}
.takeover-link:hover{color:var(--danger)}
/* queue sections: yours / open / other shadchanim's (collapsed) */
.queue-h{margin-top:30px}
.queue-empty{margin:4px 0 10px}
.others-wrap{margin-top:26px}
.others-wrap > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px}
.others-wrap > summary::-webkit-details-marker{display:none}
.others-wrap > summary::after{content:""; width:9px; height:9px; border-inline-end:2px solid var(--muted);
  border-bottom:2px solid var(--muted); transform:rotate(45deg) translateY(-2px); transition:transform .15s}
.others-wrap[open] > summary::after{transform:rotate(225deg)}
.others-wrap .redt-row:first-of-type{margin-top:14px}
/* handover request (replaces unilateral takeover) */
.handover{width:100%}
.handover > summary{cursor:pointer; list-style:none; display:inline-flex}
.handover > summary::-webkit-details-marker{display:none}
.handover-form{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:8px}
.handover-form input[name=reason]{flex:1 1 200px; margin:0; min-height:44px}
.handover-form .hint{flex-basis:100%; font-size:.8rem; color:var(--muted)}
.block-hint{display:block; font-size:.8rem; color:var(--muted); margin-top:2px}

/* calm guidance panel atop the shadchan dashboard — an info card, not an alert */
.guide-panel{background:var(--tint); border:1px solid var(--tint-line); border-radius:var(--r-lg);
  padding:16px 20px; margin:6px 0 24px}
.guide-panel h2{font-size:1.02rem; margin:0 0 8px}
.guide-panel.collapsible{padding:0}
.guide-panel.collapsible > summary{cursor:pointer; list-style:none; padding:14px 20px;
  font-weight:700; color:var(--accent-800); display:flex; align-items:center; gap:8px; min-height:48px}
.guide-panel.collapsible > summary::-webkit-details-marker{display:none}
.guide-panel.collapsible > summary::after{content:""; width:8px; height:8px; margin-inline-start:auto;
  border-inline-end:2px solid var(--accent-700); border-bottom:2px solid var(--accent-700);
  transform:rotate(45deg); transition:transform .15s}
.guide-panel.collapsible[open] > summary::after{transform:rotate(225deg)}
.guide-panel.collapsible ul{padding:0 20px 16px 2.2em}
.guide-panel ul{margin:0; padding-inline-start:1.15em; display:grid; gap:6px}
.guide-panel li{color:var(--ink-soft); font-size:.92rem; line-height:1.5}
.guide-panel li strong{color:var(--ink)}
.redt-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.redt-form select,.redt-form input{width:auto; margin:0; min-height:44px; padding:8px 12px}
.redt-form select{padding-inline-end:34px}
.redt-form input[name=note]{min-width:170px; flex:1}
/* The date counter on a dating pair — one quiet row under the status controls. */
.redt-dates{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:6px}
.redt-dates .rd-label{font-size:.88rem; font-weight:600; color:var(--ink-soft)}
.redt-dates input[type=number]{width:76px; margin:0; min-height:44px; padding:8px 12px}

/* ---------------------------------------------------------------- admin */
.stats{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:20px 0 10px}
@media(min-width:640px){.stats{grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:14px}}
/* Rows with only 2–3 tiles: cap tile width and left-align so they don't stretch into
   big sparse boxes next to the denser rows. */
@media(min-width:640px){.stats.compact{grid-template-columns:repeat(auto-fit,minmax(150px,190px)); justify-content:start}}
.stat{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 12px; text-align:center; box-shadow:var(--shadow-xs)}
.stat .n{display:block; font-family:'Newsreader',serif; font-size:1.9rem; font-weight:600;
  color:var(--accent-700); line-height:1.2}
.stat .l{color:var(--muted); font-size:.82rem}

.table-scroll{overflow-x:auto; margin:10px 0 22px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); box-shadow:var(--shadow-xs);
  -webkit-overflow-scrolling:touch}
.atable{width:100%; border-collapse:collapse; font-size:.92rem; min-width:560px}
.table-scroll .atable{margin:0}
.atable th{text-align:start; color:var(--muted); font-weight:700; font-size:.74rem;
  text-transform:uppercase; letter-spacing:.06em; padding:12px 14px;
  border-bottom:1px solid var(--line); background:var(--bg-soft); white-space:nowrap}
.atable td{padding:11px 14px; border-bottom:1px solid var(--line); vertical-align:middle}
.atable tbody tr:last-child td{border-bottom:0}
.atable tbody tr:hover td{background:#fdfcf9}
.atable .contactcol{white-space:nowrap}

/* Week by week: the number leads, its change from the week before sits under it
   in a quieter colour. A dash means unknowable, not zero — see the foot note. */
.atable.growth td.gnum{white-space:nowrap}
.atable.growth td.gnum strong{font-size:1.02rem}
.atable.growth .gwk{white-space:nowrap; color:var(--ink-soft)}
.atable.growth tr.now td{background:var(--gold-bg)}
.gnow{display:inline-block; margin-inline-start:6px; font-size:.7rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--gold-ink)}
.gdelta{display:block; font-size:.74rem; font-weight:700; margin-top:2px}
.gdelta.up{color:#2f6d3f}
.gdelta.down{color:#9a3b2f}
.gdelta.flat{color:var(--muted); font-weight:600}
.gdash{color:var(--muted)}
.gap-note{display:block; margin-top:2px}

/* Growth: the Week / Month / Year / All time switch, and its "show more" */
.gswitch{display:flex; gap:6px; flex-wrap:wrap; margin:12px 18px 0}
.gtab{background:var(--bg); border:1px solid var(--line); border-radius:99px;
  padding:7px 16px; font:inherit; font-size:.85rem; font-weight:600;
  color:var(--ink-soft); cursor:pointer}
.gtab:hover{border-color:var(--line-strong)}
.gtab.on{background:var(--gold-bg); border-color:var(--gold); color:var(--gold-ink);
  font-weight:700}
.gmore-btn{margin:0 18px; background:none; border:0; font:inherit; font-size:.85rem;
  font-weight:700; color:var(--accent-700); cursor:pointer; padding:4px 0}
.gmore-btn:hover{text-decoration:underline}
/* click-to-sort headings on the analytics drill-downs */
.atable.sortable th{cursor:pointer; user-select:none}
.atable.sortable th:hover,.atable.sortable th:focus-visible{color:var(--accent-700)}
.atable th.num{text-align:end}
.atable td.num{text-align:end; font-variant-numeric:tabular-nums}
/* One rogue value (e.g. a resume parsed into a name) must never widen its column so
   far that every number scrolls off-screen: long content wraps inside its cell, and
   name links clamp with an ellipsis — the full name lives on the linked profile. */
.atable.sortable td{max-width:340px; overflow-wrap:anywhere}
.atable.sortable td .link{display:inline-block; max-width:240px; overflow:hidden;
  text-overflow:ellipsis; vertical-align:bottom}
.atable th.rank-h{width:38px; text-align:end}
.atable td.rank{width:38px; text-align:end; color:var(--muted); font-variant-numeric:tabular-nums}
.sort-ctl{display:flex; align-items:center; gap:10px; margin:0 0 10px; flex-wrap:wrap}
.sort-ctl label{display:flex; align-items:center; gap:8px; font-size:.85rem; color:var(--muted); margin:0}
.sort-ctl select{width:auto; min-width:180px; margin:0; padding:8px 34px 8px 12px; min-height:40px}
.sort-ctl .sort-flip{white-space:nowrap}
.atable.sortable th .sort-arrow{margin-inline-start:5px; opacity:.35; font-size:.8em}
.atable.sortable th .sort-arrow::after{content:"↕"}
.atable.sortable th[aria-sort="descending"],.atable.sortable th[aria-sort="ascending"]{color:var(--accent-700)}
.atable.sortable th[aria-sort="descending"] .sort-arrow{opacity:1}
.atable.sortable th[aria-sort="descending"] .sort-arrow::after{content:"↓"}
.atable.sortable th[aria-sort="ascending"] .sort-arrow{opacity:1}
.atable.sortable th[aria-sort="ascending"] .sort-arrow::after{content:"↑"}
.empty-state{color:var(--muted); background:var(--bg-soft); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px; margin:14px 0}
/* each drill-down table gets breathing room and its own heading */
.alist-sec{margin:26px 0 34px}
.alist-sec:first-of-type{margin-top:16px}
.alist-sec .sec-h{margin-bottom:4px}
.alist-sec .sub{margin:0 0 12px; max-width:70ch}
.bar{height:12px; background:linear-gradient(90deg,var(--accent),var(--accent-700));
  border-radius:6px; min-width:3px}
.rowactions{display:flex; gap:14px; align-items:center; flex-wrap:wrap}
.rowactions form{display:inline}
.rowactions .link,.atable .link{color:var(--accent-700); min-height:36px; white-space:nowrap}
.rowactions .link.danger{color:var(--danger)}
/* admin pending-approval queue — scannable cards, fast Approve/Deny */
.count-pill{display:inline-block; font-size:.8rem; font-weight:700; color:#fff;
  background:var(--accent-600); border-radius:var(--r-pill); padding:1px 9px; vertical-align:middle}
.pend-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:12px; margin:6px 0 20px}
.pend-card{display:flex; gap:12px; align-items:center; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:12px; box-shadow:var(--shadow-xs)}
.pend-photo{flex:none; width:56px; height:56px; border-radius:14px; overflow:hidden;
  display:grid; place-items:center; background:var(--tint)}
button.pend-photo{border:0; padding:0; cursor:zoom-in}
/* full-screen image viewer */
.lightbox{position:fixed; inset:0; z-index:1000; background:rgba(20,16,32,.86);
  display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:100%; max-height:100%; border-radius:12px; box-shadow:0 12px 44px rgba(0,0,0,.55)}
.lb-close{position:absolute; top:14px; right:18px; width:42px; height:42px; border-radius:50%;
  border:0; background:rgba(255,255,255,.16); color:#fff; font-size:1.5rem; line-height:1;
  cursor:pointer; display:grid; place-items:center; z-index:2}
.lb-close:hover{background:rgba(255,255,255,.28)}
/* carousel controls inside the viewer */
.lb-stage{margin:0; max-width:100%; max-height:100%; display:flex; align-items:center; justify-content:center}
.lb-missing{color:rgba(255,255,255,.85); font-size:1rem; padding:40px; text-align:center}
.lb-nav{position:absolute; top:50%; transform:translateY(-50%); width:48px; height:48px;
  border-radius:50%; border:0; background:rgba(255,255,255,.16); color:#fff; font-size:2rem;
  line-height:1; cursor:pointer; display:grid; place-items:center; z-index:2}
.lb-nav:hover{background:rgba(255,255,255,.30)}
.lb-prev{left:16px} .lb-next{right:16px}
.lb-dots{position:absolute; bottom:8px; left:0; right:0; display:flex; gap:2px;
  justify-content:center; z-index:2}
/* 10px dot, but a 44px transparent hit area (padding + content-box clip) so it's
   thumb-tappable — the visible dot stays small, the touch target is finger-sized. */
.lb-dot{width:10px; height:10px; padding:17px; box-sizing:content-box; background-clip:content-box;
  border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.4)}
.lb-dot.on{background:#fff; background-clip:content-box}
/* any profile photo is click-to-enlarge */
.pphoto{cursor:zoom-in}
/* resume disclosure — only rendered for admins/shadchanim */
.resume-block{margin:10px 0; padding:10px 12px; border:1px solid var(--line,#e7e0d4);
  border-radius:10px; background:var(--tint,#f7f3ea)}
.resume-lbl{display:block; font-weight:600; font-size:.85rem; color:var(--ink)}
.resume-note{font-weight:400; color:var(--muted); font-size:.8em}
.resume-view{display:inline-flex; align-items:center; gap:6px; margin-top:6px; cursor:pointer}
.resume-text{margin-top:8px}
.resume-text summary{cursor:pointer; font-size:.82rem; color:var(--muted)}
.resume-text pre{white-space:pre-wrap; word-break:break-word; font-size:.8rem;
  max-height:260px; overflow:auto; background:#fff; padding:8px; border-radius:8px; margin-top:6px}
/* in-browser résumé viewer modal */
.rmodal{position:fixed; inset:0; z-index:1100; background:rgba(20,16,32,.72);
  display:flex; align-items:center; justify-content:center; padding:16px}
.rmodal[hidden]{display:none}
.rm-panel{background:var(--bg,#fff); width:min(920px,100%); height:min(90vh,100%);
  border-radius:16px; overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 24px 64px rgba(0,0,0,.4)}
.rm-bar{display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--line,#e7e0d4); background:var(--tint,#f7f3ea)}
.rm-title{font-weight:600; font-size:.95rem; flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.rm-actions{display:flex; align-items:center; gap:14px; flex:none}
.rm-open,.rm-download{font-size:.85rem; cursor:pointer; color:var(--accent-800,#5b3ea8);
  text-decoration:none; white-space:nowrap}
.rm-open:hover,.rm-download:hover{text-decoration:underline}
.rm-close{width:34px; height:34px; border:0; border-radius:50%; cursor:pointer;
  background:rgba(0,0,0,.06); font-size:1.4rem; line-height:1; display:grid; place-items:center}
.rm-close:hover{background:rgba(0,0,0,.12)}
.rm-body{flex:1; min-height:0; background:#f1ece3; display:flex}
/* PDFs can't be framed (proxy CSP frame-ancestors 'none'), so instead of a blocked
   preview we show a clean, intentional card that opens / downloads the file. */
.rm-card{margin:auto; max-width:340px; padding:34px 28px; text-align:center;
  background:#fff; border-radius:var(--r); box-shadow:var(--shadow-sm)}
.rm-card-icon{line-height:0; color:var(--accent-700); display:flex; justify-content:center}
.rm-card-name{margin:14px 0 4px; font-weight:600; word-break:break-word}
.rm-card-sub{margin:0 0 20px; font-size:.86rem; color:var(--muted)}
.rm-card-actions{display:flex; flex-direction:column; gap:10px; align-items:stretch}
.rm-img{margin:auto; max-width:100%; max-height:100%; object-fit:contain; display:block}
.rm-text{width:100%; overflow:auto; padding:18px}
.rm-note{margin:0 0 12px; font-size:.9rem; color:var(--muted)}
.rm-pre{white-space:pre-wrap; word-break:break-word; font-size:.9rem; line-height:1.5;
  background:#fff; padding:16px; border-radius:12px; box-shadow:0 1px 3px rgba(0,0,0,.06)}
@media (max-width:560px){
  .rmodal{padding:0}
  .rm-panel{width:100%; height:100%; border-radius:0}
  .rm-actions{gap:10px}
  .rm-open,.rm-download{font-size:.8rem}
}
/* admin: clickable stat boxes + message composer + message log */
a.stat{text-decoration:none; color:inherit; transition:transform .08s, box-shadow .12s}
a.stat:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08)}
/* analytics: prominent, clickable total-decisions banner */
.decision-banner{display:block; text-decoration:none; color:inherit; margin:14px 0 6px;
  padding:18px 20px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); box-shadow:var(--shadow-xs);
  transition:transform .08s, box-shadow .12s}
.decision-banner:hover{transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.08)}
.decision-banner .big{font-family:'Newsreader',serif; font-size:2.6rem; font-weight:600;
  color:var(--accent-700); line-height:1; vertical-align:middle}
.decision-banner .lead{margin-inline-start:10px; font-weight:700}
.decision-banner .note{display:block; margin-top:6px; color:var(--muted); font-size:.92rem}
.decision-banner.is-zero{border-color:var(--danger); background:#fff7f5}
.decision-banner.is-zero .big{color:var(--danger)}
.msg-box{margin-top:10px; padding:12px; border:1px solid var(--line,#e7e0d4); border-radius:10px;
  background:var(--tint,#f7f3ea)}
.msg-box[hidden]{display:none}
.msg-box input,.msg-box textarea{width:100%; margin:4px 0; padding:8px; border-radius:8px;
  border:1px solid var(--line,#d9d2c4); font:inherit}
.msg-box textarea{min-height:96px; resize:vertical}
.msg-box .hint{display:block; font-size:.78rem; color:var(--muted); margin-top:4px}
.msg-wrap{margin-top:6px}
.msg-wrap > summary{display:inline-block; cursor:pointer; list-style:none; font-size:.85rem}
.msg-wrap > summary::-webkit-details-marker{display:none}
.admin-actions{margin-top:18px; padding-top:14px; border-top:1px solid var(--line,#e7e0d4)}
.admin-actions h4{margin:0 0 6px}
.pend-review{margin:0 0 16px; padding:12px 14px; background:var(--card); border-radius:12px}
.pend-review .sub{margin:0 0 10px}
.pend-photo img{width:100%; height:100%; object-fit:cover; object-position:center top}
.pend-photo .noimg{font-family:'Newsreader',serif; font-size:1.4rem; color:var(--accent-700)}
.pend-body{min-width:0; flex:1}
.pend-name{display:block; font-weight:700; color:var(--ink); line-height:1.2}
.pend-name:hover{color:var(--accent-800)}
.pend-body .meta{margin:2px 0 8px; font-size:.85rem; color:var(--muted)}
.pend-actions{display:flex; gap:12px; align-items:center}
.pend-actions form{display:inline}
.pend-actions .btn-sm{min-height:44px; padding:8px 16px}
.pend-actions .link.danger{color:var(--danger)}
.req-about{margin:6px 0 8px; font-size:.85rem; color:var(--ink-soft); line-height:1.45;
  white-space:pre-wrap}
.add-shadchan{display:flex; gap:8px; flex-wrap:wrap; margin:8px 0 14px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:14px; box-shadow:var(--shadow-xs)}
.add-shadchan input{margin:0; width:100%; flex:1 1 100%}
.add-shadchan .btn-sm{flex:1 1 100%}
@media(min-width:640px){
  .add-shadchan input{flex:1; width:auto; min-width:140px}
  .add-shadchan .btn-sm{flex:none}
}

/* ---------------------------------------------------------------- flashes / footer */
.flashes{margin-bottom:18px}
.flash{background:var(--warn-bg); border:1px solid #f0dcb0; color:var(--warn); padding:13px 16px;
  border-radius:var(--r-sm); margin-bottom:8px; font-weight:500; font-size:.95rem;
  animation:flashIn .3s var(--ease)}
@keyframes flashIn{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

.foot{border-top:1px solid var(--line); background:var(--bg-soft); margin-top:30px}
.foot-inner{max-width:1040px; margin:0 auto; padding:28px 18px;
  display:flex; flex-direction:column; gap:14px}
.foot-brand{font-family:'Newsreader',serif; font-size:1.2rem; font-weight:600; color:var(--ink)}
.foot-brand .dot{color:var(--accent)}
.foot-tag{color:var(--muted); font-size:.88rem; margin:2px 0 0; font-family:'Hanken Grotesk',sans-serif;
  font-weight:400}
.foot-links{display:flex; gap:4px 18px; flex-wrap:wrap; font-size:.88rem}
.foot-links a{color:var(--muted); font-weight:500; min-height:44px; display:inline-flex;
  align-items:center}
.foot-links a:hover{color:var(--accent-700)}
@media(min-width:760px){
  .foot-inner{flex-direction:row; justify-content:space-between; align-items:center}
  .foot-links a{min-height:0}
}
.badge-off{background:var(--danger-bg); color:var(--danger); padding:4px 12px;
  border-radius:var(--r-xs); font-weight:600; font-size:.82rem; align-self:flex-start}

/* ---------------------------------------------------------------- print */
@media print{
  .no-print{display:none !important}
  body{background:#fff}
  .wrap{padding:0}
  .flyer-grid{box-shadow:none; border:1.5px solid #ccc; break-inside:avoid}
  .foot{display:none}
}
.sdot.info{background:var(--accent)}