/* Page- and feature-level styles: home, matches, admin, shadchan desk,
wizard, layout bands. Appended in build order — cascade order matters. */
/* ============================================================ landing page
Scoped to .home (index.html only). Mobile-first at ~390px.
Adds to the design system — nothing here overrides shared components. */
.home{overflow-x:clip}
/* ---- hero ---- */
.home-hero{position:relative; text-align:center; padding:48px 0 10px}
.home-hero > *{animation:homeUp .6s var(--ease) both}
.hh-kicker{display:inline-flex; align-items:center; gap:8px; max-width:100%;
color:var(--gold-ink); font-weight:700; font-size:.72rem; line-height:1.5;
letter-spacing:.16em; text-transform:uppercase; animation-delay:.05s}
.hh-star{color:var(--gold); font-size:.9em; flex:none}
.hh-title{font-size:clamp(2.4rem,8.5vw,3.9rem); font-weight:500; margin:.4em 0 0;
letter-spacing:-.02em; animation-delay:.14s}
.hh-swash{position:relative; display:inline-block; white-space:nowrap}
.hh-underline{position:absolute; left:-2%; bottom:-.1em; width:104%; height:.24em;
color:var(--gold); overflow:visible; pointer-events:none}
.hh-underline path{stroke-dasharray:150; stroke-dashoffset:150;
animation:swashDraw .8s var(--ease) .55s forwards}
.hh-lede{max-width:560px; margin:20px auto 28px; font-size:1.08rem; line-height:1.65;
color:var(--ink-soft); animation-delay:.24s; text-wrap:pretty}
.hh-cta{animation-delay:.36s}
.hh-note{color:var(--muted); font-size:.84rem; margin:14px 0 0; animation-delay:.44s}
.hh-trust{list-style:none; display:flex; flex-wrap:wrap; justify-content:center;
gap:8px 26px; padding:0; margin:26px auto 0; max-width:640px; animation-delay:.52s}
/* Plain text reassurances, not buttons: no card/pill chrome, just the icon + words. */
.hh-chip{display:inline-flex; align-items:center; gap:8px; background:none;
border:0; border-radius:0; padding:0; box-shadow:none;
font-size:.85rem; font-weight:500; color:var(--muted); line-height:1.4}
.hh-chip span{flex:none}
@keyframes homeUp{from{opacity:0; transform:translateY(14px)} to{opacity:1; transform:none}}
@keyframes swashDraw{to{stroke-dashoffset:0}}
/* phones: full-width buttons + a tidy left-aligned trust list (no floating pill stack) */
@media(max-width:639px){
.hh-cta{flex-direction:column; gap:10px}
.hh-cta .btn,.hh-cta .btn.ghost{width:100%; min-width:0}
.hh-trust{flex-direction:column; align-items:center; gap:11px;
max-width:340px; margin-top:22px}
.hh-chip{justify-content:flex-start; font-size:.88rem}
}
@media(min-width:760px){
.home-hero{padding:64px 0 14px}
.hh-lede{font-size:1.16rem; max-width:600px}
}
/* ---- how it works: timeline on mobile, cards on wide ---- */
.hiw{margin-top:54px}
.hiw-head{text-align:center; margin-bottom:30px}
.hiw-eyebrow{color:var(--accent-700); font-weight:700; font-size:.74rem;
text-transform:uppercase; letter-spacing:.14em; margin:0 0 8px}
.hiw-title{font-size:clamp(1.55rem,5.5vw,2.1rem); margin:0}
.hiw-sub{color:var(--muted); margin:8px auto 0; max-width:44ch; font-size:.98rem}
.hiw-list{max-width:560px; margin:0 auto}
.hiw-step{position:relative; display:grid; grid-template-columns:54px 1fr;
column-gap:16px; padding-bottom:32px}
.hiw-step:last-child{padding-bottom:0}
.hiw-step::before{content:""; position:absolute; left:26px; top:62px; bottom:8px;
width:2px; border-radius:2px;
background:linear-gradient(180deg,var(--tint-line),var(--line))}
.hiw-step:last-child::before{display:none}
.hiw-icon{width:54px; height:54px; border-radius:18px; background:var(--tint);
border:1px solid var(--tint-line); display:grid; place-items:center;
color:var(--accent-700); line-height:0; box-shadow:var(--shadow-xs)}
.hiw-kicker{color:var(--accent-700); font-weight:700; font-size:.7rem;
text-transform:uppercase; letter-spacing:.12em; margin:2px 0 2px}
.hiw-body h3{font-size:1.22rem; margin:0}
.hiw-body p{color:var(--muted); font-size:.95rem; margin:.4em 0 0; text-wrap:pretty}
.hiw-body p.hiw-kicker{margin:2px 0 2px; color:var(--accent-700)}
.hiw-step.gold .hiw-icon{background:var(--gold-bg); border-color:#e3d5ae}
.hiw-step.gold .hiw-kicker{color:var(--gold-ink)}
@media(min-width:820px){
.hiw{margin-top:72px}
.hiw-list{display:grid; grid-template-columns:1fr 1fr; gap:18px; max-width:none}
.hiw-step{background:var(--card); border:1px solid var(--line);
border-radius:var(--r-lg); padding:24px 22px; box-shadow:var(--shadow-sm);
align-content:start;
transition:transform .25s var(--ease), box-shadow .25s var(--ease)}
.hiw-step:hover{box-shadow:var(--shadow)}
.hiw-step::before{display:none}
.hiw-step.gold{background:var(--card); border-color:#e3d5ae}
}
/* ---- closing cta ---- */
.home-cta{text-align:center; margin-top:52px}
.home-cta h2{font-size:clamp(1.5rem,5vw,2rem); margin:0 0 18px}
@media(min-width:760px){.home-cta{margin-top:68px}}
/* landing page: honor reduced motion fully (elements land in final state) */
@media (prefers-reduced-motion:reduce){
.home *,.home *::before,.home *::after{animation:none !important}
.home .hh-underline path{stroke-dashoffset:0}
}
/* ---- signup validation: inline errors + persisted state (Fix 1) ---- */
.form-error-summary{background:var(--danger-bg); border:1px solid var(--danger);
color:var(--danger); font-weight:600; padding:12px 16px; border-radius:var(--r-sm); margin:0 0 20px}
.field-err{display:block; color:var(--danger); font-size:.82rem; font-weight:600; margin:5px 0 0}
/* A whole-form problem, said next to the button that was pressed rather than in a status
line up in step one where nobody standing on the last step can see it. */
.submit-err{background:var(--danger-bg); border:1px solid var(--danger);
border-radius:var(--r-sm); padding:10px 14px; margin:0 0 14px; font-size:.9rem}
.input-error, input.input-error, select.input-error, textarea.input-error{
border-color:var(--danger) !important; background:var(--danger-bg)}
.toggle.input-error{color:var(--danger)}
.file-saved{color:var(--ok); font-weight:600; font-size:.88rem; margin:8px 0 0}
.dropzone.is-loaded{border-style:solid; border-color:var(--ok); background:var(--ok-bg)}
/* ---------------------------------------------------------------- confirm dialog */
.cdialog{border:0; border-radius:var(--r-lg); padding:0; max-width:min(92vw,420px);
box-shadow:var(--shadow-lg); background:var(--card)}
.cdialog::backdrop{background:rgba(20,16,32,.45); backdrop-filter:blur(2px)}
.cd-panel{margin:0; padding:24px 22px 20px}
.cd-msg{margin:0 0 16px; font-size:1rem; line-height:1.55; color:var(--ink)}
.cd-input{margin:0 0 14px}
.cd-actions{display:flex; gap:10px; justify-content:flex-end}
.cd-actions .btn-danger{background:var(--danger)}
.cd-actions .btn-danger:hover{background:#8c2b23}
.cd-actions .btn-sm:disabled{opacity:.5}
/* submit buttons show a working state while the form is in flight */
.btn.is-loading,.btn-sm.is-loading{position:relative; color:transparent; pointer-events:none}
.btn.is-loading::after,.btn-sm.is-loading::after{content:""; position:absolute; inset:0;
margin:auto; width:18px; height:18px; border-radius:50%;
border:2.5px solid rgba(255,255,255,.35); border-top-color:#fff;
animation:btnspin .7s linear infinite}
.btn.ghost.is-loading::after,.btn-sm.ghost.is-loading::after{
border-color:rgba(39,75,102,.25); border-top-color:var(--accent-700)}
@keyframes btnspin{to{transform:rotate(360deg)}}
/* passed-on list on /me */
.passed-list{list-style:none; margin:10px 0 0; padding:0; display:grid; gap:8px}
.passed-list li{display:flex; gap:12px; align-items:center; justify-content:space-between;
background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
padding:10px 14px; flex-wrap:wrap}
.passed-list form{margin:0}
.passed-name{font-weight:600}
.passed-name .hint{display:block; font-weight:400}
/* admin tables collapse to labelled cards on phones (needs data-th on each td) */
@media(max-width:639px){
.atable.responsive{min-width:0}
.atable.responsive thead{display:none}
.atable.responsive tr{display:block; padding:12px 14px; border-bottom:1px solid var(--line)}
/* display:block above beats the BROWSER's [hidden]{display:none} (author styles
always outrank UA styles), which broke the People search/filter/chunking on
phones — rows the JS hid stayed visible. Re-assert hidden at higher specificity. */
.atable.responsive tr[hidden]{display:none}
.atable.responsive tr:last-child{border-bottom:0}
.atable.responsive td{display:flex; gap:12px; justify-content:space-between;
align-items:baseline; border:0; padding:3px 0; text-align:end}
.atable.responsive td::before{content:attr(data-th); font-size:.72rem; font-weight:700;
text-transform:uppercase; letter-spacing:.06em; color:var(--muted); text-align:start; flex:none}
.atable.responsive td:not([data-th])::before{display:none}
.atable.responsive td:not([data-th]){justify-content:flex-start; text-align:start}
}
/* ---------------------------------------------------------------- admin inbox */
.inbox{display:grid; gap:12px; margin:14px 0 8px}
.inbox-clear{background:var(--ok-bg); border:1px solid #bfe3cf; color:var(--ok);
border-radius:var(--r); padding:16px 18px; font-weight:600; margin:14px 0 8px}
.inbox-row{display:flex; gap:14px; align-items:flex-start; background:var(--card);
border:1px solid var(--line); border-inline-start:3px solid var(--accent); border-radius:var(--r);
padding:14px 16px; box-shadow:var(--shadow-xs); flex-wrap:wrap}
.ib-photo{flex:none; width:48px; height:48px; border-radius:12px; overflow:hidden;
background:var(--bg-soft); display:grid; place-items:center}
.ib-photo img{width:100%; height:100%; object-fit:cover; object-position:center top}
.ib-photo .noimg{width:100%; height:100%; display:grid; place-items:center;
font-family:'Newsreader',serif; font-size:1.2rem; color:var(--accent-700); background:var(--tint)}
.ib-body{flex:1 1 240px; min-width:0}
.ib-title{font-weight:700; color:var(--ink); display:block}
a.ib-title:hover{color:var(--accent-700)}
.ib-sub{margin:2px 0 0; font-size:.88rem; color:var(--muted)}
.ib-quote{margin:6px 0 0; font-size:.9rem; color:var(--ink-soft); background:var(--bg);
border-inline-start:2px solid var(--line-strong); padding:6px 12px; border-radius:0 8px 8px 0}
.ib-actions{display:flex; gap:4px 12px; align-items:center; flex-wrap:wrap; margin-inline-start:auto}
.ib-actions form{margin:0; display:inline-flex}
/* people search + filter chips */
.people-tools{display:grid; gap:10px; margin:12px 0 14px}
.people-tools input[type=search]{margin:0; max-width:420px}
.chips{display:flex; gap:8px; flex-wrap:wrap}
.chip-f{border:1.5px solid var(--line-strong); background:var(--card); color:var(--ink-soft);
border-radius:var(--r-pill); padding:7px 15px; font-family:inherit; font-size:.86rem;
font-weight:600; cursor:pointer; min-height:38px; transition:all .12s}
.chip-f:hover{border-color:var(--accent); color:var(--accent-700)}
.chip-f.on{background:var(--accent-600); border-color:var(--accent-600); color:#fff}
.messages-wrap{margin-top:30px}
.messages-wrap > summary{cursor:pointer; list-style:none; display:inline-flex}
.messages-wrap > summary::-webkit-details-marker{display:none}
/* ---------------------------------------------------------------- analytics funnel */
.funnel{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
padding:20px; margin:16px 0 8px; box-shadow:var(--shadow-xs); display:grid; gap:10px}
.funnel-row{display:grid; grid-template-columns:150px 1fr 90px; gap:12px; align-items:center;
text-decoration:none; color:var(--ink); border-radius:8px}
.funnel-row:hover{text-decoration:none; background:var(--tint)}
.funnel-row .fl{font-size:.9rem; font-weight:600; color:var(--ink-soft)}
.funnel-row .fb{height:12px; border-radius:999px; background:var(--tint); overflow:hidden}
.funnel-row .fb i{display:block; height:100%; background:var(--accent-600); border-radius:999px}
.funnel-row.drop .fb i{background:var(--danger)}
.funnel-row .fn{font-size:.92rem; text-align:end; font-variant-numeric:tabular-nums}
.funnel-row .fn small{color:var(--muted); margin-inline-start:4px}
.funnel-note{font-size:.88rem; color:var(--muted); margin:2px 0 0}
@media(max-width:560px){
.funnel-row{grid-template-columns:1fr 70px; grid-template-rows:auto auto}
.funnel-row .fl{grid-column:1}
.funnel-row .fn{grid-column:2}
.funnel-row .fb{grid-column:1/-1; grid-row:2}
}
/* pass toast: undo + optional why-chips */
.toast-head{display:flex; gap:14px; align-items:center; justify-content:space-between}
.toast-why{display:flex; gap:6px; align-items:center; flex-wrap:wrap; margin-top:8px;
padding-top:8px; border-top:1px solid rgba(255,255,255,.18)}
.toast-why-lbl{font-size:.78rem; opacity:.75; flex-basis:100%}
.toast-chip{border:1px solid rgba(255,255,255,.35); background:none; color:#fff;
border-radius:var(--r-pill); padding:5px 12px; font-family:inherit; font-size:.8rem;
font-weight:600; cursor:pointer; min-height:32px}
.toast-chip:hover{background:rgba(255,255,255,.14)}
/* ---------------------------------------------------------------- bottom tab bar */
.tabbar{display:none}
@media(max-width:699px){
.tabbar{position:fixed; left:0; right:0; bottom:0; z-index:60;
display:flex; background:rgba(255,253,250,.96); -webkit-backdrop-filter:blur(12px);
backdrop-filter:blur(12px); border-top:1px solid var(--line);
padding-bottom:env(safe-area-inset-bottom)}
.tabbar a{flex:1; display:grid; justify-items:center; gap:2px; padding:8px 0 9px;
font-size:.68rem; font-weight:600; color:var(--muted); text-decoration:none;
min-height:52px}
.tabbar a:hover{text-decoration:none}
.tabbar a.on{color:var(--accent-700)}
.tab-ic{position:relative; display:inline-flex}
.tab-badge{position:absolute; top:-4px; right:-8px; background:var(--accent-600);
color:#fff; font-style:normal; font-size:.6rem; font-weight:700; min-width:16px;
height:16px; line-height:16px; text-align:center; border-radius:var(--r-pill);
padding:0 4px}
/* content and footer must clear the fixed bar */
body:has(.tabbar) .wrap{padding-bottom:86px}
body:has(.tabbar) .foot{padding-bottom:64px}
}
/* ---------------------------------------------------------------- suggestions v2 */
/* Each suggestion is an INTRODUCTION on the paper itself (matches3 mockup):
the name first, then the portrait, a serif about-line, a named link, and a
decision row the person outranks. Unboxed — no card chrome. Introductions
are separated by the rings mark between hairlines. */
.suggest-list{display:grid; margin-top:6px}
.suggest-list .card{position:relative; display:block; background:none; border:0;
box-shadow:none; border-radius:0; overflow:visible; padding:26px 0 8px}
.suggest-list .card + .card{margin-top:28px}
.suggest-list .card + .card::before{content:""; position:absolute; top:-28px;
inset-inline:0; height:28px;
background:
linear-gradient(var(--line),var(--line)) left center/calc(50% - 32px) 1px no-repeat,
linear-gradient(var(--line),var(--line)) right center/calc(50% - 32px) 1px no-repeat,
url('data:image/svg+xml;utf8,') center/26px no-repeat}
.suggest-list .who-head{padding:0 2px 12px}
.suggest-list .who-head h3{margin:0; font-family:'Newsreader',Georgia,serif;
font-weight:500; font-size:1.7rem; line-height:1.15}
.suggest-list .facts{margin:5px 0 0; font-size:.92rem; color:var(--ink-soft)}
.suggest-list .facts b{font-weight:600; color:var(--ink)}
.suggest-list .photo{position:relative; border-radius:16px; overflow:hidden;
aspect-ratio:4/5; background:var(--gold-bg);
box-shadow:0 1px 2px rgba(18,37,54,.08), 0 8px 28px rgba(18,37,54,.07)}
.suggest-list .photo a{display:block; height:100%}
.suggest-list .photo img,.suggest-list .photo .noimg{width:100%; height:100%;
object-fit:cover; object-position:center top; border-radius:0; display:block}
.suggest-list .photo .noimg{display:grid; place-items:center;
font:italic 500 62px/1 'Newsreader',Georgia,serif; color:var(--accent-700);
background:var(--tint)}
.star-pill{position:absolute; z-index:1; top:12px; inset-inline-start:12px;
display:inline-flex; align-items:center; gap:6px; background:rgba(250,249,246,.94);
color:var(--gold-ink); font-size:.72rem; font-weight:700; padding:5px 11px;
border-radius:99px; border:1px solid var(--gold-soft); white-space:nowrap}
.star-pill svg{width:12px; height:12px; flex:none}
.suggest-list .who-rest{padding:14px 2px 0}
.suggest-list .about{margin:0; font-family:'Newsreader',Georgia,serif;
font-size:1.08rem; line-height:1.55; color:var(--ink-soft); max-width:56ch}
.suggest-list .more{display:inline-block; margin-top:10px; font-size:.92rem;
font-weight:600; color:var(--accent-700); text-decoration:none}
.suggest-list .more:hover{text-decoration:underline}
.suggest-list .actions{display:flex; align-items:center; gap:12px; margin-top:18px}
.suggest-list .btn-yes{cursor:pointer; font:inherit; font-weight:700; border-radius:10px;
padding:12px 22px; min-height:46px; background:var(--gold); border:1px solid var(--gold);
color:#171207}
.suggest-list .btn-yes:hover{background:#96771f}
.suggest-list .btn-no{cursor:pointer; font:inherit; font-weight:700; border-radius:10px;
padding:12px 22px; min-height:46px; background:transparent;
border:1px solid var(--line-strong); color:var(--ink-soft)}
.suggest-list .btn-no:hover{border-color:var(--muted)}
.suggest-list .card.acted{opacity:.75}
/* desktop: a reading column — photo joins the text; the page keeps its margins */
@media(min-width:900px){
.suggest-list .card{display:grid; grid-template-columns:280px 1fr;
grid-template-areas:'photo head' 'photo rest'; grid-template-rows:auto 1fr;
column-gap:30px; align-items:start; padding:34px 0 10px}
.suggest-list .photo{grid-area:photo}
.suggest-list .who-head{grid-area:head; padding:4px 0 0}
.suggest-list .who-head h3{font-size:1.95rem}
.suggest-list .who-rest{grid-area:rest; padding:12px 0 0}
}
/* the opener's vow + the foot hint + the caught-up card */
.mt-vow{max-width:46ch}
.mt-foot-hint{margin-top:34px; padding-top:18px; border-top:1px solid var(--line);
font-size:.9rem; color:var(--muted); max-width:52ch}
.empty.mt-caught{text-align:center; padding:40px 24px; border:1px solid var(--line);
border-radius:16px; background:var(--card)}
.empty.mt-caught svg{stroke:var(--gold); margin-bottom:10px}
/* The decline form inside the redt-pause notice: its own quiet block below the
explanation, never styled like an alarm — passing is normal traffic. */
.redt-decline{margin-top:14px; padding-top:12px; border-top:1px solid var(--line)}
.redt-decline p{margin:0 0 10px; color:var(--ink-soft); font-size:.92rem}
.empty.mt-caught strong{display:block; font-family:'Newsreader',Georgia,serif;
font-weight:500; font-size:1.35rem}
.empty.mt-caught p{margin:8px auto 0; color:var(--ink-soft); font-size:.95rem; max-width:44ch}
/* The one specific sentence that says WHY the page is empty — full ink, above the
generic reassurance, so the true reason is what gets read. */
.empty.mt-caught p.empty-why{color:var(--ink); font-weight:500}
/* the never-told note beside the decision (full-profile page) */
.decide-note{font-size:.82rem; color:var(--muted)}
/* free-text reason inside the pass toast */
.toast-other{display:flex; gap:6px; flex:1; margin:0; min-width:0}
.toast-other input{flex:1; margin:0; min-height:36px; padding:6px 12px; font-size:.85rem;
border-radius:var(--r-pill); border:1px solid rgba(255,255,255,.4); background:rgba(255,255,255,.12);
color:#fff; min-width:0}
.toast-other input::placeholder{color:rgba(255,255,255,.55)}
/* mutual matches: a warm status card that says what's happening, not a grid tile */
.mutual-strip{display:grid; gap:16px; margin:6px 0 30px}
.mutual-card{background:var(--card); border:1px solid #e3d5ae;
border-radius:var(--r-lg); padding:20px 22px; box-shadow:var(--shadow-sm);
display:grid; gap:12px}
.mc-head{display:flex; gap:16px; align-items:center}
.mc-photo{flex:none; width:64px; height:64px; border-radius:16px; overflow:hidden;
background:var(--bg-soft)}
.mc-photo img{width:100%; height:100%; object-fit:cover; object-position:center top}
.mc-photo .noimg{width:100%; height:100%; display:grid; place-items:center;
font-family:'Newsreader',serif; font-size:1.5rem; color:var(--gold-ink); background:var(--gold-bg)}
.mc-kicker{margin:0; font-size:.7rem; font-weight:700; letter-spacing:.13em;
text-transform:uppercase; color:var(--gold-ink)}
.mc-head h3{font-size:1.3rem; margin:2px 0 0}
.mc-head .meta{margin:2px 0 0}
.mc-status{margin:0; color:var(--ink-soft); font-size:.95rem; line-height:1.55}
.mc-foot{display:flex; gap:12px; align-items:center; flex-wrap:wrap;
border-top:1px dashed #e3d5ae; padding-top:12px}
.mc-foot .btn-sm{margin-inline-start:auto}
/* ---------------------------------------------------------------- go-live steps */
.golive{display:grid; gap:0; background:var(--card); border:1px solid var(--line);
border-radius:var(--r-lg); box-shadow:var(--shadow-sm); margin:18px 0; overflow:hidden}
.gl-step{display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
border-bottom:1px solid var(--line)}
.gl-step:last-child{border-bottom:0}
.gl-dot{flex:none; width:28px; height:28px; border-radius:50%; display:grid;
place-items:center; font-weight:700; font-family:'Newsreader',serif; font-size:.9rem;
background:var(--bg-soft); color:var(--muted); border:1.5px solid var(--line-strong);
margin-top:1px}
.gl-step.done .gl-dot{background:var(--ok); border-color:var(--ok); color:#fff}
.gl-step.now .gl-dot{background:var(--accent-600); border-color:var(--accent-600); color:#fff}
.gl-step.now{background:var(--tint)}
.gl-body{flex:1; min-width:0; display:grid; gap:6px}
.gl-body .hint{display:block}
.gl-body .code-form{margin-top:2px}
.gl-links{display:flex; gap:4px 18px; align-items:center; flex-wrap:wrap}
.gl-step > .vbadge{margin-top:4px; flex:none}
.golive-meanwhile{background:var(--card); border:1px solid var(--line);
border-radius:var(--r); padding:14px 18px; display:grid; gap:10px}
.gl-actions{display:flex; gap:10px; flex-wrap:wrap}
/* ---------------------------------------------------------------- notifications feed */
.feed{display:grid; gap:12px; margin:16px 0}
.feed-row{display:flex; gap:14px; align-items:center; background:var(--card);
border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
box-shadow:var(--shadow-xs); flex-wrap:wrap}
.feed-ic{flex:none; width:40px; height:40px; border-radius:12px; display:grid;
place-items:center; background:var(--tint); color:var(--accent-700)}
.feed-ic.gold{background:var(--gold-bg); color:var(--gold-ink)}
.feed-ic.ok{background:var(--ok-bg); color:var(--ok)}
.feed-body{flex:1 1 220px; min-width:0}
.feed-sub{margin:2px 0 0; font-size:.9rem; color:var(--muted)}
.feed-privacy{display:flex; gap:8px; align-items:flex-start; font-size:.85rem;
color:var(--muted); background:var(--bg-soft); border-radius:var(--r-sm);
padding:12px 14px; margin-top:20px; line-height:1.5}
.feed-privacy svg{flex:none; margin-top:2px}
/* ---------------------------------------------------------------- auth pages */
/* Every narrow form page (log in, forgot, reset, shadchan/admin login, feedback)
becomes one card component instead of a bare centred form. */
.form-page.narrow{background:var(--card); border:1px solid var(--line);
border-radius:var(--r-lg); padding:30px 26px 26px; box-shadow:var(--shadow-sm);
margin-top:26px}
.form-page.narrow > h1{font-size:1.7rem}
.form-page.narrow > .sub:last-child{margin-bottom:0}
@media(max-width:560px){.form-page.narrow{padding:22px 18px 20px; margin-top:10px}}
/* decide bar on the full profile */
.decide-bar{display:flex; gap:12px; align-items:center; flex-wrap:wrap;
background:var(--card); border:1px solid var(--tint-line); border-radius:var(--r);
padding:14px 18px; margin:4px 0 20px; box-shadow:var(--shadow-sm)}
.decide-q{font-weight:700}
.decide-btns{display:flex; gap:10px; flex-wrap:wrap}
.decide-bar .decide-note{margin-inline-start:auto}
.decide-bar .done{color:var(--ok); font-weight:600}
.decide-bar .passed-note{color:var(--muted); font-weight:600}
@media(max-width:560px){.decide-bar .decide-note{margin-inline-start:0; flex-basis:100%}}
/* the bar becomes the pass panel (Undo + optional "why?") the moment they pass */
.decide-bar.pass-open{display:grid; gap:12px; border-inline-start:3px solid var(--line-strong)}
.decide-bar.pass-open .pp-head .btn-sm{margin-inline-start:0}
/* ---- text roles, normalised: body 1rem / secondary .92rem / caption .85rem ---- */
.sub{font-size:.98rem}
.meta{font-size:.9rem; color:var(--muted)}
.hint{font-size:.85rem; color:var(--muted); font-weight:400}
.muted{font-size:inherit; color:var(--muted)}
/* ---------------------------------------------------------------- form wizard */
.wiz-head{position:sticky; top:64px; z-index:30; background:var(--bg);
padding:14px 0 10px; display:grid; gap:8px}
.wiz-bar{height:7px; border-radius:999px; background:var(--tint); overflow:hidden}
.wiz-bar i{display:block; height:100%; width:0; background:var(--accent-600);
border-radius:999px; transition:width .3s var(--ease)}
.wiz-label{font-size:.85rem; font-weight:600; color:var(--ink-soft)}
.step-nav{display:flex; gap:14px; align-items:center; justify-content:flex-end;
margin-top:22px; padding-top:16px; border-top:1px solid var(--line)}
.step-nav .step-back{margin-inline-end:auto}
.step-nav .step-next{min-width:150px}
@media(max-width:560px){.wiz-head{top:56px}}
/* shadchan note history */
.redt-history{margin-top:6px; font-size:.86rem; width:100%}
.redt-history > summary{cursor:pointer; list-style:none; color:var(--accent-700); font-weight:600;
min-height:32px; display:inline-flex; align-items:center}
.redt-history > summary::-webkit-details-marker{display:none}
.redt-history ul{list-style:none; margin:8px 0 0; padding:10px 14px; display:grid; gap:7px;
background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm)}
.redt-history li{display:flex; gap:10px; flex-wrap:wrap; align-items:baseline}
.rh-when{font-size:.78rem; color:var(--muted); font-variant-numeric:tabular-nums; flex:none}
.rh-what{font-weight:600; color:var(--ink-soft)}
/* Shadchan desk: which side a pair is (Israeli/American/Mixed), the one-time "which
side do you work?" prompt, and the soft side filter. */
.redt-row{position:relative}
.bg-chip{display:inline-block; font-size:.68rem; font-weight:700; letter-spacing:.03em;
text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid var(--line);
background:var(--tint); color:var(--muted)}
.redt-row > .bg-chip{position:absolute; inset-block-start:10px; inset-inline-end:12px}
.bg-chip.israeli{background:#eef4fb; border-color:#cfe0f2; color:#2c5a8c}
.bg-chip.american{background:#f6efe9; border-color:#e6d5c4; color:#8a5a2b}
.bg-chip.mixed{background:#efeef6; border-color:#dcd8ec; color:#5b5480}
.bg-chip.both{background:var(--tint); border-color:var(--line); color:var(--ink-soft)}
.desk-bg-confirm{display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px;
padding:14px 16px; margin:0 0 14px; background:var(--tint); border:1px solid var(--line);
border-radius:var(--r)}
.desk-bg-confirm .dbc-text{flex:1 1 220px}
.desk-bg-confirm .radios{display:flex; gap:6px 14px; flex-wrap:wrap}
.desk-side{display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; margin:0 0 12px;
font-size:.88rem; color:var(--muted)}
.desk-side .ds-now{display:inline-flex; align-items:center; gap:8px}
/* Analytics breadcrumb trail — the path you took in, so Back steps one level at a time. */
.crumbs{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin:0 0 6px;
font-size:.84rem; color:var(--muted)}
.crumbs a{color:var(--accent-700)}
.crumb-sep{color:var(--line-strong, var(--muted)); opacity:.7}
.crumb-here{color:var(--ink-soft); font-weight:600}
.rh-note{color:var(--ink-soft); font-style:italic; flex-basis:100%; padding-inline-start:calc(.78rem * 6)}
/* Automatic (system) history entries read as machine-written, never as a shadchan's
note: muted, no quotes, with a small "Automatic" chip instead of a person's name. */
.rh-sys .rh-note{font-style:normal; color:var(--muted)}
.rh-auto{font-weight:600; font-size:.72rem; letter-spacing:.02em; text-transform:uppercase;
color:var(--muted); background:var(--tint); border:1px solid var(--line);
border-radius:999px; padding:1px 8px}
/* home faq */
.home-faq{margin-top:56px; max-width:640px; margin-inline-start:auto; margin-inline-end:auto}
.home-faq .hiw-title{text-align:center; margin-bottom:22px}
.faq-list{display:grid; gap:10px}
.faq{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
box-shadow:var(--shadow-xs)}
.faq > summary{cursor:pointer; list-style:none; padding:16px 18px; font-weight:700;
display:flex; align-items:center; gap:10px; min-height:52px}
.faq > summary::-webkit-details-marker{display:none}
.faq > summary::after{content:""; width:8px; height:8px; margin-inline-start:auto; flex:none;
border-inline-end:2px solid var(--muted); border-bottom:2px solid var(--muted);
transform:rotate(45deg); transition:transform .15s}
.faq[open] > summary::after{transform:rotate(225deg)}
.faq > p{margin:0; padding:0 18px 16px; color:var(--ink-soft); font-size:.95rem; line-height:1.6}
/* plain-language privacy summary */
.privacy-summary{background:var(--tint); border:1px solid var(--tint-line);
border-radius:var(--r-lg); padding:20px 22px; margin:18px 0 26px}
.privacy-summary h3{margin-top:0; color:var(--accent-800)}
.privacy-summary ul{margin:10px 0 0; padding-inline-start:1.2em; display:grid; gap:9px}
.privacy-summary li{color:var(--ink-soft); line-height:1.55}
/* the one flourish the hero keeps: an italic serif word in brass */
.hh-em{font-style:italic; color:var(--gold-ink); font-weight:500}
/* ============================================================ layout system */
/* Full-bleed bands: escape the .wrap column so grounds can alternate under
whole sections. body{overflow-x:clip} contains the scrollbar-width overhang. */
.band{margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
background:var(--card); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.band+.band{border-top:0}
.band-ink{margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
background:var(--accent-700); color:#e8eef3}
.band-ink a{color:#cfdde8}
/* The one page-header pattern for every signed-in screen: eyebrow, serif title,
sub, actions right — on a white band with a hairline underneath. */
.page-head{margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
background:var(--card); border-bottom:1px solid var(--line);
padding-top:22px; padding-bottom:18px; margin-bottom:26px;
display:flex; gap:16px; align-items:flex-end; justify-content:space-between; flex-wrap:wrap}
.page-head .ph-text{display:grid; gap:4px; min-width:0}
.page-head .eyebrow{font-size:.7rem; font-weight:700; letter-spacing:.17em;
text-transform:uppercase; color:var(--accent-700)}
.page-head h1{font-size:clamp(1.5rem,4vw,2rem); margin:0}
.page-head .ph-sub{color:var(--muted); font-size:.95rem; margin:0; max-width:60ch}
.page-head .ph-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
/* brass eyebrow for marketing sections */
.eyebrow-gold{font-size:.7rem; font-weight:700; letter-spacing:.17em;
text-transform:uppercase; color:var(--gold-ink)}
/* panels: a labelled white card — the unit of the settings page */
.panel{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
padding:20px; box-shadow:var(--shadow-sm); margin:18px 0}
.panel > .eyebrow, .panel-eyebrow{display:block; font-size:.68rem; font-weight:700;
letter-spacing:.17em; text-transform:uppercase; color:var(--accent-700); margin:0 0 12px}
.panel .share-h{margin-top:0}
.panel.danger-panel{border-color:#ecc6c1}
.panel.danger-panel > .panel-eyebrow{color:var(--danger)}
/* active nav link: brass underline */
.nav-links a.on{color:var(--ink); box-shadow:inset 0 -2px 0 var(--gold)}
@media(max-width:839px){.nav-links a.on{box-shadow:inset 3px 0 0 var(--gold)}}
/* navy footer — every page closes with weight */
.foot{background:var(--accent-700); border-top:0; color:#c7d5e0}
.foot-inner{display:grid; gap:26px; padding:38px 18px 30px}
@media(min-width:760px){.foot-inner{grid-template-columns:1.2fr 1fr 1fr; gap:20px}}
.foot-brand{font-family:'Newsreader',serif; font-size:1.45rem; color:#fff; font-weight:500}
.foot-brand .dot{color:var(--gold)}
.foot-tag{color:#8fa6b7; font-size:.88rem; margin:.4em 0 0; font-family:'Hanken Grotesk',sans-serif}
.foot-links{display:grid; gap:8px; align-content:start}
.foot-links a{color:#c7d5e0; font-size:.9rem; text-decoration:none}
.foot-links a:hover{color:#fff; text-decoration:underline; text-underline-offset:2px}
.foot-h{font-size:.68rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
color:#8fa6b7; margin:0 0 4px}
/* ============================================================ home v3 */
.hero2{display:grid; gap:36px; padding:44px 0 40px; align-items:center}
@media(min-width:860px){.hero2{grid-template-columns:1.08fr 1fr; padding:60px 0 56px}}
.hero2-copy{display:grid; gap:18px; justify-items:start; text-align:start}
.hero2-title{font-size:clamp(2.1rem,5.6vw,3.3rem); font-weight:500; line-height:1.12;
letter-spacing:-.015em; margin:0}
.hero2-lede{color:var(--ink-soft); font-size:1.08rem; line-height:1.65; max-width:44ch; margin:0}
.hero2-cta{display:flex; gap:20px; align-items:center; flex-wrap:wrap}
.hero2-note{color:var(--muted); font-size:.85rem; margin:0}
@media(max-width:859px){
.hero2-copy{justify-items:center; text-align:center}
.hero2-cta{justify-content:center}
.hero2-cta .btn{width:100%}
.hero2{gap:28px; padding-top:32px}
}
/* the tilted product card + brass toast — a picture of the interface */
.hero2-visual{position:relative; min-height:352px; max-width:396px;
justify-self:center; width:100%}
.hv-card{position:absolute; inset:4px 30px auto 0; background:var(--card);
border:1px solid var(--line); border-radius:16px; overflow:hidden;
transform:rotate(-1.6deg);
box-shadow:0 1px 2px rgba(30,42,51,.06), 0 12px 32px rgba(30,42,51,.1),
0 32px 64px rgba(30,42,51,.08)}
.hv-photo{height:118px; display:flex; align-items:flex-end; justify-content:center;
background:
radial-gradient(120% 90% at 20% 0%, rgba(39,75,102,.16), transparent 55%),
linear-gradient(150deg,#ddd6c8,#b3a78f)}
.hv-avatar{width:74px; height:74px; border-radius:50%; background:#fff;
color:var(--accent-700); font-family:'Newsreader',serif; font-weight:600; font-size:1.9rem;
display:flex; align-items:center; justify-content:center; margin-bottom:-22px;
box-shadow:0 2px 8px rgba(30,42,51,.14); position:relative; z-index:1}
.hv-body{padding:30px 20px 18px; display:grid; gap:11px}
.hv-id{text-align:center; display:grid; gap:2px}
.hv-name{font-family:'Newsreader',serif; font-size:1.3rem; font-weight:600; margin:0;
letter-spacing:-.01em}
.hv-meta{color:var(--muted); font-size:.86rem; margin:0}
.hv-why{background:var(--tint); border:1px solid var(--tint-line); border-radius:8px;
padding:9px 11px; font-size:.83rem; color:var(--accent-800); line-height:1.5}
.hv-actions{display:flex; gap:9px}
.hv-yes{display:inline-flex; padding:8px 16px; background:var(--accent-600); color:#fff;
border-radius:7px; font-size:.85rem; font-weight:650}
.hv-no{display:inline-flex; padding:8px 14px; border:1px solid var(--line-strong);
color:var(--ink-soft); border-radius:7px; font-size:.85rem; font-weight:650; background:#fff}
/* The toast clips the card's top-right corner — over the photo, where nothing lives —
so the Interested / Not-for-me row underneath stays fully readable. */
.hv-toast{position:absolute; right:0; top:64px; width:186px; transform:rotate(2deg);
background:var(--gold-bg); border:1px solid #e3d5ae; border-radius:11px;
padding:11px 14px; box-shadow:var(--shadow); z-index:2}
.hv-toast-h{font-family:'Newsreader',serif; font-weight:600; color:var(--gold-ink);
font-size:1rem; margin:0}
.hv-toast-s{color:var(--ink-soft); font-size:.82rem; margin:2px 0 0}
.hv-why{text-align:start}
.hv-actions{justify-content:center}
@media(max-width:859px){.hero2-visual{min-height:330px; max-width:330px}
.hv-card{inset:0 22px auto 0}}
/* how it works — ghost serif numerals on a white band */
.hiw2{padding-top:52px; padding-bottom:56px; margin-top:8px}
.hiw2-head{text-align:center; display:grid; gap:8px; margin-bottom:34px}
.hiw2-head .eyebrow-gold{margin:0}
.hiw2-title{font-size:clamp(1.5rem,3.6vw,2rem); margin:0}
.hiw2-grid{display:grid; gap:26px 22px; max-width:1000px; margin:0 auto}
@media(min-width:640px){.hiw2-grid{grid-template-columns:1fr 1fr}}
@media(min-width:960px){.hiw2-grid{grid-template-columns:repeat(4,1fr)}}
.hiw2-step{display:grid; gap:6px; align-content:start}
.hiw2-num{font-family:'Newsreader',serif; font-size:2.6rem; line-height:1;
color:var(--line-strong); font-weight:500}
.hiw2-step h3{font-size:1.05rem; font-family:'Hanken Grotesk',sans-serif; font-weight:700;
margin:0}
.hiw2-step p{color:var(--muted); font-size:.92rem; margin:0; line-height:1.55}
/* trust strip — hairline-separated statements */
.trust2{display:grid; gap:20px; padding:40px 0 8px; max-width:1000px; margin:0 auto}
@media(min-width:720px){.trust2{grid-template-columns:repeat(3,1fr); gap:0}
.trust2-item{padding:0 26px; border-inline-end:1px solid var(--line)}
.trust2-item:last-child{border-inline-end:0}}
.trust2-item h3{font-size:1rem; font-family:'Hanken Grotesk',sans-serif; font-weight:700; margin:0}
.trust2-item p{color:var(--muted); font-size:.9rem; margin:.25em 0 0}
/* closing navy band */
.close2{margin-top:56px; margin-bottom:-48px} /* meets the navy footer seamlessly */
.close2-inner{max-width:1000px; margin:0 auto; padding:44px 0;
display:flex; gap:22px; align-items:center; justify-content:space-between; flex-wrap:wrap}
.close2 h2{color:#fff; font-size:clamp(1.5rem,3.5vw,2rem); margin:0}
.close2 p{color:#a8bccb; margin:.35em 0 0; font-size:.95rem}
.btn-gold{background:var(--gold)}
.btn-gold:hover{background:#93752a}
.btn-gold:active{background:#7d6423}
.home-faq{border:0}
/* the form "stage": a full-bleed white band with a centred column, so signup and
verify read as a place, not fields floating on paper */
.form-page.stage{margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
background:var(--card); border-bottom:1px solid var(--line);
padding-top:8px; padding-bottom:46px; margin-top:-26px; margin-bottom:0; max-width:none}
.form-page.stage > *{max-width:680px; margin-inline-start:auto; margin-inline-end:auto}
.form-page.stage.narrow > *{max-width:520px}
.form-page.stage .form-step{border:0; box-shadow:none; padding-inline-start:0; padding-inline-end:0}
.form-page.stage > h1{margin-top:26px}
.form-page.stage .wiz-head{background:var(--card)}
/* mutual match timeline */
.mc-line{list-style:none; margin:0; padding:12px 0 2px; display:grid; gap:12px;
border-top:1px dashed #e3d5ae}
@media(min-width:640px){.mc-line{grid-template-columns:repeat(4,1fr); gap:8px}}
.mc-line li{display:grid; gap:2px; position:relative; padding-inline-start:20px}
.mc-line li::before{content:""; position:absolute; left:0; top:4px; width:11px; height:11px;
border-radius:50%; border:2px solid var(--line-strong); background:var(--card)}
.mc-line li.done::before{background:var(--ok); border-color:var(--ok)}
.mc-line li.gold::before{background:var(--gold); border-color:var(--gold)}
.mcl-t{font-weight:700; font-size:.82rem}
.mc-line li:not(.done) .mcl-t{color:var(--muted); font-weight:600}
.mcl-d{font-size:.78rem; color:var(--muted)}
/* stage overrides the narrow card treatment cleanly (verify has both classes) */
.form-page.stage{border:0; border-bottom:1px solid var(--line); border-radius:0; box-shadow:none}
/* the rings mark above auth titles — the brand, quietly */
.auth-rings{display:flex; margin-bottom:14px}
.auth-rings i{width:22px; height:22px; border-radius:50%; border:3px solid var(--accent);
display:block}
.auth-rings i+i{margin-inline-start:-9px; border-color:var(--gold)}
/* ---------------------------------------------------------------- search rows */
.srows{display:grid; gap:0; background:var(--card); border:1px solid var(--line);
border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-sm); margin-top:16px}
.srow{display:flex; gap:14px; align-items:center; padding:13px 16px;
border-bottom:1px solid var(--line); flex-wrap:wrap}
.srow:last-child{border-bottom:0}
.srow-photo{flex:none; width:44px; height:44px; border-radius:50%; overflow:hidden;
background:var(--bg-soft)}
.srow-photo img{width:100%; height:100%; object-fit:cover; object-position:center top}
.srow-photo .noimg{width:100%; height:100%; display:grid; place-items:center;
font-family:'Newsreader',serif; color:var(--accent-700); background:var(--tint)}
.srow-main{flex:1 1 200px; min-width:0}
.srow-name{font-weight:700}
.srow-meta{font-size:.85rem; color:var(--muted)}
.srow-contact{flex:1 1 180px; min-width:0; font-size:.85rem}
.srow-contact a{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.srow-actions{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-inline-start:auto}
/* One-time "You're live" share moment (matches page) + Spread-the-word (/me). Brass —
the color the site reserves for the match moment — carries the celebration. */
.live-panel{position:relative; background:var(--gold-bg); border:1px solid #e4d7ae;
border-radius:var(--r-lg); padding:18px 16px 16px; margin:0 0 22px}
.live-x{position:absolute; top:8px; right:12px; border:0; background:none; color:var(--gold-ink);
font-size:1.2rem; line-height:1; cursor:pointer; padding:4px 6px}
.live-tag{display:inline-flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700;
letter-spacing:.1em; text-transform:uppercase; color:var(--gold-ink); margin-bottom:6px}
.live-tag svg{color:var(--gold)}
.live-h{font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:1.34rem; margin:0 0 6px;
color:var(--ink)}
.live-p{font-size:.88rem; margin:0 0 14px; color:var(--ink-soft)}
.share-formats{display:flex; gap:8px; margin:0 0 12px}
.fmt{border:1px solid #d8d2be; background:#fff; color:var(--ink-soft); font-family:inherit;
font-size:.8rem; font-weight:600; padding:7px 14px; border-radius:var(--r-pill); cursor:pointer}
.fmt.on{background:var(--accent-600); border-color:var(--accent-600); color:#fff}
.share-strip{display:flex; gap:14px; align-items:stretch}
.share-preview{flex:none; width:118px; height:auto; align-self:flex-start; border-radius:10px;
border:1px solid #d2cec2; box-shadow:0 6px 18px rgba(30,42,51,.18); background:var(--card);
min-height:180px}
.share-side{display:flex; flex-direction:column; gap:8px; min-width:0; flex:1}
.share-what{font-size:.74rem; color:var(--gold-ink); font-weight:700; margin:0}
.share-btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; width:100%}
.live-later{border:0; background:none; font-size:.78rem; color:var(--gold-ink);
text-decoration:underline; cursor:pointer; padding:5px; width:100%}
.live-privacy{display:flex; gap:6px; align-items:flex-start; font-size:.75rem; color:var(--muted);
margin:12px 0 0}
.live-privacy svg{flex:none; margin-top:2px; color:var(--ok)}
/* "Spread the word" band on /me: preview thumb + purpose-named buttons, one row. */
.promo-panel{display:flex; gap:20px; align-items:center}
.promo-thumb{flex:none; width:96px; height:auto; border-radius:10px; border:1px solid #d2cec2;
box-shadow:0 5px 16px rgba(30,42,51,.16); background:var(--card); min-height:160px;
align-self:flex-start}
.promo-body{min-width:0; flex:1}
.promo-h{font-family:'Newsreader',Georgia,serif; font-weight:600; font-size:1.18rem;
margin:2px 0 4px; color:var(--ink)}
.promo-body .hint{margin:0 0 12px}
.promo-actions{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.promo-actions .share-btn{width:auto}
@media (max-width:560px){
.promo-panel{flex-direction:column; align-items:flex-start}
.promo-thumb{width:112px}
.promo-actions .share-btn{width:100%}
}
@media (min-width:560px){
.live-panel{padding:20px 20px 18px}
.share-preview{width:132px}
}
/* Replace-resume form on /me: one row, no browser-default look. */
.resume-replace{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:6px}
.resume-replace input[type=file]{flex:1 1 240px; min-width:0; border:1px solid var(--line);
border-radius:var(--r); padding:8px 10px; background:#fff; font-family:inherit; font-size:.88rem}
.resume-replace .hint{flex-basis:100%}
/* Two-column search: boys | girls, each panel with its own bar and rows. */
.search-cols{display:grid; grid-template-columns:1fr 1fr; gap:26px; align-items:start;
margin-top:6px}
@media (max-width:900px){.search-cols{grid-template-columns:1fr}}
/* Phones: stacking put the ENTIRE Boys list above the Girls column, which made
Girls look missing. With JS, a segmented Boys|Girls toggle shows one column at
a time; the [data-show] attribute only exists once JS set it, so script-less
browsers keep the plain stacked fallback with everything reachable. */
.scol-toggle{display:none}
@media (max-width:900px){
.scol-toggle:not([hidden]){display:flex; margin-top:12px; border:1px solid var(--line);
border-radius:var(--r); overflow:hidden; background:var(--card)}
.scol-toggle button{flex:1; background:none; border:0; font-family:inherit;
font-size:.94rem; font-weight:600; color:var(--muted); padding:10px 0; cursor:pointer}
.scol-toggle button.on{background:var(--accent-600); color:#fff}
.search-cols[data-show=b] .scol-g{display:none}
.search-cols[data-show=g] .scol-b{display:none}
}
.scol-head{font-family:'Newsreader',serif; font-size:1.3rem; margin:10px 0 0}
/* Inside a half-width column the bar keeps its stacked grid even on desktop —
the wide flex layout would cram six controls into one cramped line. */
.scol .search-bar{display:grid; grid-template-columns:1fr 1fr}
.scol .search-bar input[name$=q]{grid-column:1/-1}
.scol .search-bar select{width:auto}
.scol .search-bar input[name$=location]{max-width:none}
.scol .search-bar input[name$=age_min],.scol .search-bar input[name$=age_max]{max-width:none}
.scol .search-bar .btn-sm{grid-column:1/-1; width:100%}
.srow-picked{background:var(--tint)}
.pick-btn.picked{background:var(--accent-600); border-color:var(--accent-600); color:#fff}
/* Pick-a-pair bar: appears once someone is picked, sticks above the fold-line. */
.suggest-bar{position:sticky; bottom:14px; z-index:30; display:flex; align-items:center;
gap:12px; flex-wrap:wrap; margin-top:20px; padding:12px 16px; background:var(--card);
border:1px solid var(--tint-line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
/* display:flex above beats the BROWSER's [hidden]{display:none} (author styles
outrank UA styles regardless of specificity) — without this line the bar floats
over the search form and results before anyone has picked. */
.suggest-bar[hidden]{display:none}
.suggest-bar .sb-text{font-weight:700; flex:1 1 auto; min-width:0}
/* Photos saved to the signup/add-profile session: thumbnails with a remove ×. */
.pending-photos{display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-top:10px}
.pending-photos .pp-saved{position:relative; display:inline-block}
.pending-photos img{height:72px; width:72px; object-fit:cover; border-radius:var(--r);
border:1px solid var(--line); display:block}
.pending-photos .pp-x{position:absolute; top:-8px; right:-8px; width:22px; height:22px;
border-radius:50%; border:1px solid var(--line-strong); background:var(--card);
color:var(--ink); font-size:.95rem; line-height:1; cursor:pointer; padding:0}
.pending-photos .file-saved{flex-basis:100%; margin:0}
/* Undo-grace bar after an Interested tap: pinned top, 10-second draining line. */
.undo-bar{position:fixed; top:12px; left:50%; transform:translateX(-50%); z-index:120;
display:flex; align-items:center; gap:14px; padding:10px 16px 14px;
max-width:min(92vw, 480px); background:var(--card); border:1px solid var(--tint-line);
border-radius:var(--r-lg); box-shadow:var(--shadow); transition:opacity .3s, transform .3s}
.undo-bar.gone{opacity:0; transform:translateX(-50%) translateY(-8px)}
.undo-bar .ub-text{font-weight:600; min-width:0}
.undo-bar .ub-btn{flex:none}
.undo-bar .ub-track{position:absolute; left:0; right:0; bottom:0; height:3px;
border-radius:0 0 var(--r-lg) var(--r-lg); overflow:hidden; background:var(--tint)}
/* The drain's duration is set from JS (app.UNDO_BAR_SECONDS), not baked in here —
it was a hard 10s while the bar's own timer was a separate 10s, so changing the
window meant changing two numbers in two files and hoping. */
.undo-bar .ub-fill{display:block; height:100%; width:100%; background:var(--gold);
transition-property:width; transition-timing-function:linear}
/* ---------------------------------------------------------------- admin tabs */
.admin-tabs{display:flex; gap:20px; margin:-10px 0 24px; border-bottom:1px solid var(--line);
overflow-x:auto; scrollbar-width:none}
.admin-tabs button{background:none; border:0; font-family:inherit; font-size:.94rem;
font-weight:600; color:var(--muted); padding:0 2px 10px; cursor:pointer; white-space:nowrap}
.admin-tabs button.on{color:var(--ink); box-shadow:inset 0 -2px 0 var(--gold)}
.admin-tabs button:hover{color:var(--accent-700)}
.tabpane[hidden]{display:none}
/* ------------------------------------------------------------- shadchan desk */
@media(min-width:980px){
.desk{display:grid; grid-template-columns:240px minmax(0,1fr); gap:26px; align-items:start}
.desk-rail{position:sticky; top:80px; display:grid; gap:6px}
.desk-rail .queue-h{margin:12px 0 4px; font-size:.72rem; font-weight:700;
letter-spacing:.15em; text-transform:uppercase; color:var(--accent-700);
font-family:'Hanken Grotesk',sans-serif; border:0}
.desk-rail a{display:grid; gap:1px; padding:8px 10px; border-radius:8px;
text-decoration:none; color:var(--ink); border:1px solid transparent}
.desk-rail a:hover{background:var(--card); border-color:var(--line); text-decoration:none}
.desk-rail .dr-name{font-weight:650; font-size:.88rem}
.desk-rail .dr-sub{font-size:.76rem; color:var(--muted)}
.desk-rail a.attn{border-inline-start:3px solid var(--warn)}
/* Each rail bucket folds. A full caseload made the rail long enough to push
everything under it off the screen — which is how the directory below became
invisible unless the board happened to be quiet. */
.dr-group{display:grid; gap:6px}
.dr-group > summary{cursor:pointer; list-style:none; display:flex;
align-items:center; gap:6px}
.dr-group > summary::-webkit-details-marker{display:none}
.dr-group > summary::after{content:""; width:7px; height:7px; margin-inline-start:auto;
border-inline-end:1.6px solid currentColor; border-block-end:1.6px solid currentColor;
transform:rotate(45deg) translate(-2px,-2px); transition:transform .15s ease;
opacity:.75}
.dr-group[open] > summary::after{transform:rotate(225deg) translate(-1px,-1px)}
.dr-group > summary:hover{color:var(--ink)}
}
.desk-rail{display:none}
@media(min-width:980px){.desk-rail{display:grid}}
/* suggest page: dossier rows + likes-you brass rail */
.suggest-pro .card.likes-rail{border-inline-start:3px solid var(--gold)}
.score-pill{display:inline-flex; align-items:center; font-size:.78rem; font-weight:700;
background:var(--tint); color:var(--accent-800); border:1px solid var(--tint-line);
border-radius:6px; padding:3px 9px; font-variant-numeric:tabular-nums}
/* send-back-with-reason disclosure (admin) */
.sendback{width:100%}
.sendback > summary{cursor:pointer; list-style:none; display:inline-flex; min-height:36px;
align-items:center}
.sendback > summary::-webkit-details-marker{display:none}
.sendback-form{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:8px}
.sendback-form input[name=reason]{flex:1 1 240px; margin:0; min-height:44px}
.sendback-form .hint{flex-basis:100%}
/* THE MEETING (approved profile3 mockup): the portrait keeps them company while
you read; the decision waits in a FIXED bar at the bottom — after the person,
always one thumb away. */
.pv-meet{margin-top:14px}
/* one LEAD portrait, the rest as thumbnails (tap any for the full viewer) */
.pv-gallery{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:0}
.pv-gallery .pphoto,.pv-gallery .noimg{cursor:pointer}
.pv-gallery .pphoto:first-child,.pv-gallery .noimg:first-child{flex:1 1 100%;
width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; object-position:center top;
border-radius:16px; box-shadow:0 1px 2px rgba(18,37,54,.08), 0 8px 28px rgba(18,37,54,.07)}
.pv-gallery .noimg:first-child{display:grid; place-items:center;
font:italic 500 62px/1 'Newsreader',Georgia,serif; color:var(--accent-700); background:var(--tint)}
.pv-gallery .pphoto:not(:first-child){width:64px; height:64px; object-fit:cover;
object-position:center top; border-radius:10px}
.pv-who{margin-top:18px}
.pv-who h1{margin:0; font-family:'Newsreader',Georgia,serif; font-weight:500;
font-size:2rem; line-height:1.1}
.pv-who .meta{margin:5px 0 0; color:var(--ink-soft); font-size:.95rem}
.pv-sec{margin-top:26px}
.pv-eb{display:flex; align-items:center; gap:12px; margin:0; font-size:.66rem;
font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.pv-eb::before{content:""; width:30px; height:1px; background:var(--gold)}
[dir=rtl] .pv-eb{letter-spacing:.05em}
.pv-prose{margin:10px 0 0; font-family:'Newsreader',Georgia,serif; font-size:1.12rem;
line-height:1.6; color:var(--ink-soft); max-width:58ch}
.pv-dl{margin:10px 0 0; display:grid; gap:12px}
.pv-dl dt{font-size:.78rem; font-weight:700; color:var(--muted)}
.pv-dl dd{margin:2px 0 0; font-size:1rem; color:var(--ink)}
.pv-pills{margin-top:10px; display:flex; flex-wrap:wrap; gap:8px}
.pv-pills span{background:var(--card); border:1px solid var(--line); border-radius:99px;
padding:7px 14px; font-size:.88rem; color:var(--ink-soft)}
.pv-pills b{color:var(--ink); font-weight:600}
@media(min-width:900px){
.pv-meet{display:grid; grid-template-columns:380px 1fr; column-gap:44px; align-items:start}
.pv-gallery{position:sticky; top:76px}
.pv-who{margin-top:4px}
.pv-who h1{font-size:2.5rem}
}
/* the fixed decision bar: above the phone tab bar, flush at the bottom on desktop */
.decide-bar.pv-decide{position:fixed; inset-inline:0; bottom:0; z-index:55;
margin:0; border:0; border-top:1px solid var(--line); border-radius:0;
background:rgba(250,249,246,.97); backdrop-filter:blur(8px); box-shadow:none;
display:block; padding:12px max(20px, calc(50vw - 500px))
calc(12px + env(safe-area-inset-bottom))}
@media(max-width:899px){
.decide-bar.pv-decide{bottom:calc(57px + env(safe-area-inset-bottom))}
}
.pv-decide .decide-note{display:block; margin:0 0 8px; text-align:center; font-size:.8rem}
.pv-decide .decide-btns{display:flex; gap:10px}
.pv-decide .btn-yes{flex:1; cursor:pointer; font:inherit; font-weight:700;
border-radius:10px; padding:13px 22px; min-height:48px; background:var(--gold);
border:1px solid var(--gold); color:#171207}
.pv-decide .btn-yes:hover{background:#96771f}
.pv-decide .btn-no{flex:1; cursor:pointer; font:inherit; font-weight:700;
border-radius:10px; padding:13px 22px; min-height:48px; background:transparent;
border:1px solid var(--line-strong); color:var(--ink-soft)}
.pv-decide .btn-no:hover{border-color:var(--muted)}
.pv-decide .done,.pv-decide .passed-note{display:inline-block; margin-inline-end:12px}
@media(min-width:900px){
.pv-decide .decide-note{text-align:end}
.pv-decide .decide-btns{justify-content:flex-end}
.pv-decide .btn-yes,.pv-decide .btn-no{flex:none; min-width:170px}
}
/* room for the fixed bar (and the tab bar under it on phones) */
.profile-view{padding-bottom:150px}
@media(min-width:900px){ .profile-view{padding-bottom:120px} }
/* A desk row filtered out by the stage board. Its own class rather than an inline
display, so the name search can set display independently without the two
clobbering each other. */
.redt-row.stage-off{display:none !important}
/* admin review bar: pinned to the viewport bottom while reading a pending profile,
so Approve / Deny / Back never scroll out of reach on a long resume */
.review-bar{position:sticky; bottom:14px; z-index:30; display:flex; align-items:center;
gap:12px; flex-wrap:wrap; margin-top:24px; padding:12px 16px; background:var(--card);
border:1px solid var(--tint-line); border-radius:var(--r-lg); box-shadow:var(--shadow)}
.review-bar .rb-note{color:var(--muted); font-weight:600; margin-inline-end:auto}
.review-bar .sendback{width:auto}
.review-bar .sendback[open]{flex-basis:100%}
@media(max-width:560px){body:has(.tabbar) .review-bar{bottom:66px}} /* clear the mobile tab bar */
.bottom-back{margin:26px 0 8px}
/* Deny & send feedback: a real button that discloses the reason form */
.sendback-btn{background:var(--card); color:var(--danger); border:1px solid #e5b8b2;
cursor:pointer; list-style:none}
.sendback-btn::-webkit-details-marker{display:none}
.sendback-btn:hover{background:var(--danger-bg); border-color:var(--danger)}
.sendback[open] .sendback-btn{background:var(--danger-bg); border-color:var(--danger)}
/* the in-place pass panel: stays until dismissed, never a racing toast */
.pass-panel{background:var(--card); border:1px solid var(--line); border-inline-start:3px solid var(--line-strong);
border-radius:var(--r-lg); padding:16px 18px; display:grid; gap:12px; box-shadow:var(--shadow-sm)}
.pp-head{display:flex; gap:12px; align-items:center}
.pp-title{font-weight:700; flex:1; min-width:0}
.pp-close{background:none; border:0; cursor:pointer; font-size:1.5rem; line-height:1;
color:var(--muted); width:40px; height:40px; border-radius:8px; flex:none;
display:grid; place-items:center}
.pp-close:hover{background:var(--bg-soft); color:var(--ink)}
.pp-why{display:grid; gap:9px; border-top:1px solid var(--line); padding-top:12px}
.pp-lbl{margin:0; font-size:.88rem; color:var(--muted)}
.pp-chips{display:flex; gap:8px; flex-wrap:wrap}
.pp-chip{border:1px solid var(--line-strong); background:var(--card); color:var(--ink-soft);
border-radius:var(--r); padding:8px 15px; font-family:inherit; font-size:.88rem;
font-weight:600; cursor:pointer; min-height:40px}
.pp-chip:hover{border-color:var(--accent); color:var(--accent-700); background:var(--tint)}
.pp-other{display:flex; gap:8px; flex-wrap:wrap}
.pp-other input{flex:1 1 220px; margin:0; min-height:44px}
.pp-noted{margin:0; color:var(--ok); font-weight:600}
/* photo reordering */
.photo-edit-item{position:relative; cursor:grab}
.photo-edit-item.dragging{opacity:.45; cursor:grabbing}
.photo-edit-item.is-first img{outline:2px solid var(--gold); outline-offset:2px}
.photo-first-badge{position:absolute; top:6px; left:50%; transform:translateX(-50%);
z-index:2; background:var(--gold-bg); color:var(--gold-ink); border:1px solid #e3d5ae;
font-size:.66rem; font-weight:700; padding:2px 9px; border-radius:5px; white-space:nowrap}
.photo-item-actions{display:grid; gap:5px; justify-items:center}
.photo-item-actions form{margin:0}
/* pair checker */
.pair-form{display:flex; gap:14px; align-items:flex-end; flex-wrap:wrap;
background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
padding:18px 20px; box-shadow:var(--shadow-sm); margin-bottom:22px}
.pair-form label{flex:1 1 220px; margin:0}
.pair-form input{margin-top:6px}
.pair-amp{font-family:'Newsreader',serif; font-size:1.5rem; color:var(--gold);
padding-bottom:10px}
.pair-form .btn{flex:none}
.pair-result{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
padding:22px; box-shadow:var(--shadow-sm); display:grid; gap:14px}
.pair-result.problem ul{margin:6px 0 0; padding-inline-start:1.2em; color:var(--danger)}
.pair-people{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
.pair-person{display:flex; gap:12px; align-items:center; flex:1 1 220px}
.pp-photo{flex:none; width:56px; height:56px; border-radius:50%; overflow:hidden; background:var(--bg-soft)}
.pp-photo img{width:100%; height:100%; object-fit:cover; object-position:center top}
.pp-photo .noimg{width:100%; height:100%; display:grid; place-items:center;
font-family:'Newsreader',serif; color:var(--accent-700); background:var(--tint)}
.pair-score{text-align:center; flex:none; padding:0 8px}
.pair-n{font-family:'Newsreader',serif; font-size:2.2rem; font-weight:600;
color:var(--accent-700); line-height:1; display:block; font-variant-numeric:tabular-nums}
.pair-l{font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted)}
.pair-note{background:var(--tint); border:1px solid var(--tint-line); border-radius:var(--r-sm);
padding:12px 14px; font-size:.93rem; color:var(--ink-soft)}
.pair-note.warn{background:var(--warn-bg); border-color:#e6d2a8}
.pair-note.bad{background:var(--danger-bg); border-color:#ecc6c1}
.pair-note .hint{display:block; margin-top:4px}
.pair-redt{display:flex; gap:14px; align-items:center; flex-wrap:wrap;
border-top:1px solid var(--line); padding-top:14px}
.pair-redt .hint{flex:1; min-width:220px}
.gold-badge{background:var(--gold-bg); color:var(--gold-ink); border-color:#e3d5ae}
/* Admin <-> shadchan conversation. INLINE in the page (no fixed/overlay sheet), so
a phone's on-screen keyboard scrolls the composer into view instead of covering
it — the failure mode a floating compose sheet kept hitting. */
.admin-thread{border:1px solid var(--tint-line); border-radius:var(--r-lg);
background:var(--card); margin:0 0 24px; padding:4px 16px}
.admin-thread > summary{cursor:pointer; padding:12px 4px; list-style:none}
.admin-thread > summary::-webkit-details-marker{display:none}
.chat{padding:4px 0 14px}
.chat-log{display:flex; flex-direction:column; gap:10px; max-height:min(52vh,420px);
overflow-y:auto; padding:6px 2px 12px}
.chat-empty{color:var(--muted); font-size:.92rem; margin:6px 2px}
.chat-msg{max-width:82%; padding:9px 13px; border-radius:var(--r-lg); font-size:.94rem;
line-height:1.5}
.chat-msg .cm-who{font-size:.72rem; font-weight:700; text-transform:uppercase;
letter-spacing:.05em; color:var(--muted); margin-bottom:3px}
.chat-msg .cm-body{white-space:pre-wrap; word-wrap:break-word}
.chat-msg .cm-when{font-size:.72rem; color:var(--muted); margin-top:4px}
.chat-msg.theirs{align-self:flex-start; background:var(--tint); border:1px solid var(--tint-line)}
.chat-msg.mine{align-self:flex-end; background:var(--accent-600); color:#fff}
.chat-msg.mine .cm-who,.chat-msg.mine .cm-when{color:rgba(255,255,255,.75)}
.chat-compose{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-top:4px}
.chat-compose textarea{flex:1; min-width:0; resize:vertical; min-height:44px;
font-family:inherit; font-size:.95rem; padding:10px 12px; border:1px solid var(--line);
border-radius:var(--r); background:#fff}
.chat-compose .btn-sm{flex:none}
/* With a résumé/photo riding along, the compose box is three parts, not two: the note
on its own line, then the attach controls and Send sharing the line beneath it. The
attach block shipped as a third item in the plain [textarea][Send] row, where it took
its width out of the textarea — squeezing the message box to a sliver on a desktop and
off the line entirely on a phone, which read as "the box is in the wrong spot / I
can't write back". */
.chat-compose.has-att textarea{flex:1 0 100%}
.chat-compose.has-att .att-row{flex:1 1 auto}
.chat-compose.has-att .btn-sm{margin-inline-start:auto}
/* Small count pill, reused for the admin tab + per-row unread and the desk summary. */
.tab-dot{display:inline-grid; place-items:center; min-width:18px; height:18px;
padding:0 5px; border-radius:9px; background:var(--gold); color:#fff; font-size:.72rem;
font-weight:700; vertical-align:middle}
/* WhatsApp-style message center: conversation list + open thread, two panes. */
.msgs{display:grid; grid-template-columns:300px minmax(0,1fr); gap:0; margin-top:8px;
border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; min-height:60vh;
background:var(--card)}
.msgs-list{border-inline-end:1px solid var(--line); overflow-y:auto; max-height:74vh}
.msg-row{display:grid; grid-template-columns:1fr auto; gap:2px 8px; align-items:baseline;
padding:12px 14px; border-bottom:1px solid var(--line); text-decoration:none; color:var(--ink)}
a.msg-row:hover{background:var(--tint); text-decoration:none}
.msg-row.on{background:var(--tint)}
.msg-row.inactive{opacity:.6}
.mr-top{grid-column:1; display:flex; justify-content:space-between; gap:8px; align-items:baseline}
.mr-name{font-weight:700}
.mr-time{font-size:.72rem; color:var(--muted); flex:none}
.mr-preview{grid-column:1; font-size:.86rem; color:var(--muted); overflow:hidden;
text-overflow:ellipsis; white-space:nowrap}
.mr-you{color:var(--ink-soft); font-weight:600}
.mr-unread{grid-column:2; grid-row:1/3; align-self:center}
.msgs-thread{display:flex; flex-direction:column; min-width:0}
.mt-head{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line)}
.mt-back{display:none; font-size:1.5rem; line-height:1; color:var(--accent-700); text-decoration:none}
.mt-name{font-family:'Newsreader',serif; font-size:1.15rem; font-weight:600}
.mt-cc{margin-inline-start:auto; white-space:nowrap}
.msgs-thread .chat{flex:1; display:flex; flex-direction:column; padding:8px 16px 14px}
.msgs-thread .chat-log{flex:1; max-height:60vh}
.mt-empty{display:grid; place-items:center; padding:40px}
@media(max-width:719px){
/* One pane at a time, like a phone chat app: list by default, thread when one's open. */
.msgs{grid-template-columns:1fr}
.msgs-thread{display:none}
.msgs.thread-open .msgs-list{display:none}
.msgs.thread-open .msgs-thread{display:flex}
.mt-back{display:inline}
}
.guide-bottom{margin-top:34px}
/* inbox group labels: the decision types read as separate sections */
.sec-count{font-family:inherit; font-size:.85rem; font-weight:600; color:var(--muted);
margin-inline-start:10px; letter-spacing:0}
.dupe-notify{display:flex; gap:7px; align-items:flex-start; font-weight:500;
font-size:.78rem; color:var(--muted); margin:8px 0 6px; cursor:pointer}
.dupe-notify input{width:16px; height:16px; min-height:0; margin-top:1px}
/* Each inbox group folds shut — the count in its heading still tells the story. */
.inbox-sec > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px}
.inbox-sec > summary::-webkit-details-marker{display:none}
.inbox-sec > summary::after{content:""; width:7px; height:7px; flex:none;
border-inline-end:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted);
transform:rotate(-45deg); transition:transform .15s; margin-bottom:2px}
.inbox-sec[open] > summary::after{transform:rotate(45deg); margin-bottom:4px}
.inbox-group{font-size:.68rem; font-weight:700; letter-spacing:.17em; text-transform:uppercase;
color:var(--accent-700); margin:14px 0 0; padding-top:6px}
.inbox-group:first-child{margin-top:0; padding-top:0}
.inbox-group + .inbox-row{margin-top:2px}
/* ---- big lists: only lay out what's on screen -----------------------------
/admin renders all four panes in one document — the inbox, the whole command
centre and the entire people list — so the browser builds and lays out ~18,000
nodes before it can paint anything, on a phone, for a page where you are looking
at one pane. (Gzip means the download is only ~64 KB; the cost is all in parse,
layout and paint on the device.)
content-visibility:auto lets the browser skip layout and paint for any of these
blocks that isn't near the viewport, and do the work when you scroll to it.
contain-intrinsic-size supplies a placeholder height so the scrollbar and the
page height stay honest instead of collapsing and jumping as you go.
Nothing is hidden by this — everything stays in the DOM, findable by search and
by the browser's own find-in-page. */
.cc-card, .inbox-row, .dupe-row{content-visibility:auto; contain-intrinsic-size:auto 320px}
.redt-row{content-visibility:auto; contain-intrinsic-size:auto 360px}
/* The people table only gets it on phones, where its rows are display:block — on a
real table row (display:table-row) containment fights the table layout algorithm. */
@media(max-width:639px){
.atable.responsive tr{content-visibility:auto; contain-intrinsic-size:auto 180px}
}
/* duplicate clusters: the copies side by side, each deletable */
.dupe-row{border-inline-start-color:var(--warn)}
.dupe-set{display:flex; gap:12px; flex-wrap:wrap; margin-top:10px}
.dupe-card{display:flex; gap:10px; align-items:flex-start; background:var(--bg);
border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px;
flex:1 1 240px; min-width:0; max-width:100%; flex-wrap:wrap;
/* Belt and braces: whatever a future child does, the card itself is the boundary.
A visible spill on the admin's phone is worse than a clipped edge. */
overflow:hidden}
.dupe-photo{flex:none; width:40px; height:40px; border-radius:50%; overflow:hidden;
background:var(--bg-soft)}
.dupe-photo img{width:100%; height:100%; object-fit:cover; object-position:center top}
.dupe-photo .noimg{width:100%; height:100%; display:grid; place-items:center;
font-family:'Newsreader',serif; color:var(--accent-700); background:var(--tint)}
/* WHY THIS CARD KEPT SPILLING. Capping the badge pills treated one symptom; the
overflow had three independent sources, and fixing any one of them still left the
other two. All three are the same mistake — a box whose MINIMUM width is its
content, sitting inside a container that assumed it could shrink:
1. the facts column is a grid, and a grid's implicit column is `auto`, which
resolves to max-content. `max-width:100%` on the children then measures 100%
OF THAT over-wide column, so it capped nothing. minmax(0,1fr) is what actually
binds the column to the card.
2. the "Keep this one — …" tag is a flex ITEM of the card with no min-width:0, so
a long reason set the card's own minimum width and pushed the whole card past
its container.
3. the email line was `white-space:nowrap` with an ellipsis. It didn't overflow,
but it truncated the one field the admin is there to compare — so it hid the
answer instead of spilling it. Every line wraps now; nothing is clipped away.
Nothing here relies on a width query: the rules make the card unable to exceed its
container at ANY width, which is the only version that stays fixed. */
.dupe-facts{display:grid; grid-template-columns:minmax(0, 1fr); gap:1px;
min-width:0; flex:1 1 100%}
.dupe-facts > *{min-width:0; max-width:100%; overflow-wrap:anywhere}
/* An email or a URL has no break opportunities — it must be allowed to break
mid-string or it sets the column's minimum width on its own. */
.dupe-facts a, .dupe-facts .dupe-mail{overflow-wrap:anywhere; word-break:break-word}
/* A badge pill is an ATOMIC inline-flex box: it cannot line-break, so a busy one
("6 decided · 4 interested in them") set the facts column wider than the card.
The row wraps between pills, and each pill may wrap inside itself. */
.dupe-badges{display:flex; flex-wrap:wrap; gap:4px; min-width:0}
.dupe-facts .vbadge{max-width:100%; white-space:normal; overflow-wrap:anywhere;
text-align:start}
/* The delete form gets its own full row at the foot of the card — squeezed into the
flex row beside the facts, the notify checkbox overflowed onto the text above. */
.dupe-card form{margin:0; flex:1 1 100%; display:flex; gap:12px; align-items:center;
justify-content:space-between; flex-wrap:wrap;
border-top:1px solid var(--line); padding-top:8px}
.dupe-card form .dupe-notify{margin:0; flex:1 1 160px; min-width:0}
.dupe-card form .dupe-notify span{min-width:0; overflow-wrap:anywhere}
.dupe-card form button{flex:none}
/* ---- shadchan tools: clarity pass ------------------------------------------ */
/* "Just looking" tag: quiet navy-wash pill above exploration page titles. */
.mode-tag{display:inline-block; background:var(--tint); border:1px solid var(--tint-line);
color:var(--accent-700); font-size:.78rem; font-weight:700; padding:3px 10px;
border-radius:999px; margin-bottom:8px}
/* Desk header: greeting on the left, utility links on the right — the tool
buttons moved into the .desk-tools bar below, so nothing is said twice. */
.desk-head{margin-bottom:12px}
/* The two shadchan tools, once, as a compact action bar (replaced the old
three-doors panel that repeated the header buttons). */
.desk-tools{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0 0 22px}
.tool{display:flex; flex-direction:column; gap:5px; background:var(--card);
border:1px solid var(--line); border-radius:var(--r); padding:14px 16px;
text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm)}
a.tool, a.tool:hover{text-decoration:none}
a.tool:hover{border-color:var(--accent); box-shadow:var(--shadow)}
.tool-name{font-family:'Newsreader',serif; font-size:1.12rem; font-weight:600;
color:var(--accent-700)}
.tool-what{font-size:.88rem; color:var(--ink-soft); line-height:1.45; flex:1}
.tool-mode{align-self:flex-start; font-size:.72rem; font-weight:700; padding:2px 9px;
border-radius:999px; border:1px solid; margin-top:2px}
.tool-mode.acts{color:var(--gold-ink); background:var(--gold-bg); border-color:var(--gold-bg)}
.tool-mode.looks{color:var(--ok); background:var(--ok-bg); border-color:var(--ok-bg)}
@media(max-width:560px){.desk-tools{grid-template-columns:1fr}}
/* Shadchan control center: one card per shadchan, caseload at a glance. */
.cc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
gap:12px; margin:2px 0 22px}
.cc-card{display:flex; flex-direction:column; gap:10px; background:var(--card);
border:1px solid var(--line); border-radius:var(--r); padding:15px 17px;
text-decoration:none; color:var(--ink); box-shadow:var(--shadow-sm)}
a.cc-card, a.cc-card:hover{text-decoration:none}
a.cc-card:hover{border-color:var(--accent); box-shadow:var(--shadow)}
.cc-card.inactive{opacity:.6}
.cc-top{display:flex; align-items:center; justify-content:space-between; gap:8px}
.cc-name{font-family:'Newsreader',serif; font-size:1.15rem; font-weight:600; color:var(--accent-700)}
.cc-figs{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:.86rem; color:var(--ink-soft)}
.cc-figs strong{color:var(--ink); font-size:1.02rem}
.cc-open{font-size:.8rem; font-weight:600; color:var(--accent-700)}
.cc-stats{margin-bottom:20px}
/* "Your suggestions" tracker on the desk. */
.sugg-track{display:grid; gap:8px; margin:0 0 26px}
.st-remove{margin-inline-start:auto}
.st-remove form,.st-row form{margin:0}
.st-row{display:flex; gap:10px 14px; align-items:baseline; flex-wrap:wrap;
background:var(--card); border:1px solid var(--line); border-radius:var(--r);
padding:11px 16px}
.st-pair{font-weight:700}
.st-when{font-size:.8rem; color:var(--muted)}
.st-note{font-size:.85rem; color:var(--ink-soft); flex-basis:100%}
@media(min-width:760px){.st-note{flex-basis:auto; margin-inline-start:auto; text-align:end;
max-width:46%}}
/* Suggest-bar consequence note + per-card action hints. */
.sb-note{font-size:.8rem; color:var(--muted); flex-basis:100%}
.act-hint{margin:6px 0 0; font-size:.82rem}
.quiet-redt{margin-top:10px; font-size:.88rem}
.quiet-redt summary{cursor:pointer; color:var(--muted)}
.quiet-redt form{margin:8px 0 4px}
.quiet-redt .hint{display:block; margin-top:6px}
/* The act-on-it box under a pair-compare result. */
.pair-actions{display:grid; gap:14px; border-top:1px solid var(--line);
margin-top:16px; padding-top:14px}
.pa-head{margin:0; font-weight:700}
.pair-actions .pair-redt{margin:0}
/* Sharing choice at signup + honest sharing-off states. */
.share-choice{margin-top:14px}
.share-off{color:var(--muted); font-size:.82rem; cursor:help}
.share-off-card .share-label{margin:0 0 4px}
.notfound-page{margin:60px auto; max-width:480px}
.notfound-page p:last-child{display:flex; gap:10px; justify-content:center; margin-top:14px}
/* Generated résumé view: a clean document, not a form dump. */
.rview{max-width:640px; margin:0 auto}
.rview-note{color:var(--muted); font-size:.85rem; margin:0 0 12px}
.rview-doc{background:var(--card); border:1px solid var(--line); border-radius:var(--r);
padding:34px 38px; box-shadow:var(--shadow-sm)}
.rview-head{border-bottom:2px solid var(--line-strong); padding-bottom:16px; margin-bottom:20px}
.rview-head h1{font-family:'Newsreader',serif; font-size:1.9rem; margin:0}
.rview-meta{color:var(--ink-soft); margin:6px 0 0; font-size:.95rem}
.rview-sec{margin:0 0 18px}
.rview-sec h2{font-family:'Hanken Grotesk',sans-serif; font-size:.74rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase; color:var(--accent-700); margin:0 0 4px}
.rview-sec p{margin:0; line-height:1.6}
.rview-foot{border-top:1px solid var(--line); margin-top:24px; padding-top:12px;
color:var(--muted); font-size:.78rem}
.rview .back{display:inline-block; margin-top:14px}
@media(max-width:560px){.rview-doc{padding:24px 20px}}
/* Guided "write my resume": sectioned, breathable, mobile-first. */
.guided .g-sec{font-family:'Hanken Grotesk',sans-serif; font-size:.74rem; font-weight:700;
letter-spacing:.14em; text-transform:uppercase; color:var(--accent-700);
margin:22px 0 8px; padding-top:14px; border-top:1px solid var(--line)}
.guided .g-sec:first-of-type{border-top:0; padding-top:0; margin-top:14px}
.guided .g-sec .hint{text-transform:none; letter-spacing:0; font-weight:400}
.guided .g-sub{margin:0 0 10px; font-size:.85rem; color:var(--muted)}
.ref-row{display:grid; grid-template-columns:1fr; gap:8px; margin:0 0 10px}
@media(min-width:640px){.ref-row{grid-template-columns:1.1fr 1.3fr 1fr}}
#gfAddRef{margin:2px 0 4px}
/* Public/private choice at signup: two equal options, no pressure. */
.share-choice{margin-top:14px; display:grid; gap:8px}
.share-choice .sc-q{margin:0; font-weight:700}
.share-choice .sc-opt{display:flex; gap:8px; align-items:baseline}
.share-choice .sc-note{margin:0}
/* Control-center header row: heading + "Open messages" button. */
.cc-head{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
/* Search box over the Recently-deleted list. */
.del-search{width:100%; max-width:340px; margin:4px 0 12px; padding:9px 12px;
border:1px solid var(--line-strong); border-radius:var(--r); font-family:inherit; font-size:.95rem; background:#fff}
.del-row[hidden]{display:none}
/* ------------------------------------------- analytics rebuild: KPI strip + folds */
/* The five-second row: the handful of numbers the admin decides on. Bigger type
than ordinary .stat tiles, with a one-line plain-words explanation under each. */
.kpis{display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin:18px 0 6px}
@media(min-width:640px){.kpis{grid-template-columns:repeat(3,1fr); gap:14px}}
@media(min-width:980px){.kpis{grid-template-columns:repeat(6,1fr)}}
.kpis .stat{padding:18px 12px}
.kpis .stat .n{font-size:2.4rem}
.kpis .stat .l{color:var(--ink-soft); font-weight:600; font-size:.86rem; display:block}
.stat .s{display:block; color:var(--muted); font-size:.76rem; margin-top:4px; line-height:1.35}
.kpi-note{margin-top:10px}
/* Folded sections: everything that isn't a decision number lives behind one tap. */
.an-sec{background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
box-shadow:var(--shadow-xs); margin:14px 0; overflow:hidden}
.an-sec>summary{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
cursor:pointer; list-style:none; padding:16px 18px; user-select:none}
.an-sec>summary::-webkit-details-marker{display:none}
.an-sec>summary::before{content:"▸"; color:var(--muted); font-size:.85em}
.an-sec[open]>summary::before{content:"▾"}
.an-sec>summary:hover{background:var(--tint)}
.an-sec .an-t{font-family:'Newsreader',serif; font-weight:600; font-size:1.15rem}
.an-sec .an-peek{color:var(--muted); font-size:.85rem}
.an-sec>*:not(summary){margin-inline:18px}
.an-sec>*:last-child{margin-bottom:16px}
.an-sec .stats{margin-top:8px}
/* Drill-down pages: the way back is a real button, long lists arrive folded. */
.back-analytics{display:inline-block; margin:4px 0 0}
.show-all-rows{display:block; margin:-14px 0 22px}
.sort-ctl{display:flex; gap:16px; align-items:center; flex-wrap:wrap; margin:0 0 10px}
.sort-ctl label{display:flex; gap:8px; align-items:center; font-size:.9rem; color:var(--ink-soft)}
.sort-ctl select{padding:6px 8px; border:1px solid var(--line-strong); border-radius:var(--r);
font-family:inherit; font-size:.9rem; background:#fff}
/* The closing questions inside a desk status form — compact, two lines. */
.close-q{display:flex; flex-direction:column; gap:8px; width:100%;
background:var(--tint); border:1px solid var(--line); border-radius:var(--r);
padding:10px 12px; margin:6px 0}
.close-q[hidden]{display:none}
.close-q .cq-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.close-q .cq-label{font-size:.88rem; font-weight:600; color:var(--ink-soft)}
.close-q input[type=number]{width:110px}
.close-q select, .close-q input{padding:6px 8px; border:1px solid var(--line-strong);
border-radius:var(--r); font-family:inherit; font-size:.9rem; background:#fff}
/* Parking a pair asks the same shape of question as closing one, so it wears the same
panel — a shadchan learns one pattern, not two. */
.hold-q{display:flex; flex-direction:column; gap:8px; width:100%;
background:var(--tint); border:1px solid var(--line); border-radius:var(--r);
padding:10px 12px; margin:6px 0}
.hold-q[hidden]{display:none}
.hold-q .cq-row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.hold-q .cq-label{font-size:.88rem; font-weight:600; color:var(--ink-soft)}
.hold-q select, .hold-q input[type=text], .hold-q input:not([type]){padding:6px 8px;
border:1px solid var(--line-strong); border-radius:var(--r); font-family:inherit;
font-size:.9rem; background:#fff}
.hold-q .hold-who-hint{flex-basis:100%; font-size:.8rem}
/* Which side is parked, and why — on the card, next to the status pill. */
.hold-note{flex-basis:100%; color:var(--ink-soft); font-size:.82rem}
/* A filter that is ON must say so. Both of these are remembered for the whole browser
session, so without a banner the counts on screen silently describe a subset. */
.cc-filter-banner,.desk-filter-banner{display:flex; flex-wrap:wrap; gap:6px 10px;
align-items:center; margin:0 0 16px; padding:11px 14px; border-radius:var(--r);
background:var(--warn-bg); border:1px solid var(--gold); font-size:.9rem;
color:var(--ink)}
.cc-filter-banner[hidden],.desk-filter-banner[hidden]{display:none}
.cc-filter-banner span,.desk-filter-banner span{color:var(--ink-soft)}
.cc-filter-clear,.desk-filter-clear{margin-inline-start:auto; flex:none; cursor:pointer;
padding:5px 12px; border-radius:var(--r-sm); border:1px solid var(--line-strong);
background:#fff; font-family:inherit; font-size:.85rem; font-weight:600}
.cc-filter-clear:hover,.desk-filter-clear:hover{border-color:var(--accent); color:var(--accent-700)}
/* "How match suggestions work" — a reading page, so give it a comfortable measure and
let the headings breathe. Deliberately plain: it's an honest explanation, not a pitch. */
.how-matching h3{margin:26px 0 8px; font-size:1.02rem}
.how-matching p,.how-matching li{line-height:1.65; color:var(--ink-soft)}
.how-matching ul{margin:8px 0 0; padding-inline-start:20px}
.how-matching li{margin:4px 0}
.how-matching .hm-foot{margin-top:26px; padding-top:16px; border-top:1px solid var(--line)}
/* Add-photos, sitting with the gallery it adds to. Its own row so the picker and the
Add button read as one action rather than as leftovers of the form below. */
.photo-add-form{display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:14px}
.photo-add-form .file-field{flex:1 1 240px; min-width:0; margin:0}
.photo-add-form .btn-sm{flex:none}
/* Gentle photo-appropriateness note under the audience card / photos panel. */
.photo-appropriate{margin:10px 0 0; font-size:.85rem; color:var(--ink-soft);
background:var(--tint); border-radius:var(--r); padding:8px 12px; line-height:1.4}
/* Homepage member-count line. */
.hero2-members{margin:8px 0 0; font-weight:600; color:var(--accent-700); font-size:.95rem}
/* Visibility hint under the desk note box. */
.note-vis{display:block; margin:4px 0 0; color:var(--muted); font-size:.8rem}
/* ============================================================================
HOME v3 — "the invitation" (Aug 2026 redesign)
Dark ceremonial opening with the nav on it, the suggestion card straddling
into the paper, engraved numerals, and an invitation-bordered close.
========================================================================== */
/* the old home clipped horizontal overflow, which would clip the full-bleed
dark band; html/body already guard overflow-x, so release it here */
.home{overflow-x:visible}
/* the global chrome joins the dark opening on this page only */
body.dark-top .nav{background:var(--dark); border-bottom:1px solid var(--dark-line)}
body.dark-top .nav .brand{color:var(--dark-ink)}
body.dark-top .nav .brand .dot{color:var(--gold)}
body.dark-top .nav-links a{color:var(--dark-muted)}
body.dark-top .nav-links a:hover{color:var(--dark-ink)}
body.dark-top .beta-tag{color:var(--gold-soft); border-color:var(--dark-line)}
body.dark-top .lang-toggle{color:var(--dark-muted); border-color:var(--dark-line)}
body.dark-top .lang-toggle:hover{color:var(--dark-ink)}
body.dark-top .mdy-logo{background:#fff; border-radius:6px; padding:2px}
body.dark-top .nav-toggle .bars,
body.dark-top .nav-toggle .bars::before,
body.dark-top .nav-toggle .bars::after{background:var(--dark-ink)}
@media(max-width:859px){
body.dark-top .nav-links{background:var(--dark); border-color:var(--dark-line)}
}
body.dark-top main.wrap{padding-top:0}
.nhero{position:relative; margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
background:var(--dark); color:var(--dark-ink); text-align:center; overflow:visible}
.nh-mark{position:absolute; inset-inline-start:50%; inset-block-start:90px;
translate:-50% 0; inline-size:min(660px,80vw); opacity:.045; pointer-events:none}
[dir=rtl] .nh-mark{translate:50% 0}
.nh-mark svg{inline-size:100%; block-size:auto; stroke:var(--dark-ink)}
/* v3 "landing3" hero: phone one centered column; ≥960px a two-page spread —
words start-aligned left, the proof card right, straddling into the paper. */
/* span the mockup's true 1120px even though .wrap caps content at 1040 —
the same centered-bleed arithmetic the band itself uses */
.nh-grid{inline-size:min(1120px, 100vw - 44px);
margin-inline:calc(50% - min(1120px, 100vw - 44px)/2); padding:40px 0 0}
.nh-inner{position:relative; z-index:1; text-align:center}
@media(min-width:960px){
.nh-grid{display:grid; grid-template-columns:1.15fr .85fr; align-items:center;
column-gap:60px; padding:64px 18px 0}
.nh-inner{text-align:start}
.nh-grid .nh-eyebrow{justify-content:flex-start}
.nh-grid .nh-eyebrow::after{display:none}
.nh-grid .nh-lede{margin-inline:0}
}
.nh-eyebrow{display:flex; align-items:center; justify-content:center; gap:14px;
margin:0; font-size:.72rem; font-weight:600; text-transform:uppercase;
letter-spacing:.18em; color:var(--gold-soft)}
.nh-eyebrow::before,.nh-eyebrow::after{content:""; flex:0 1 28px; block-size:1px;
background:var(--gold); opacity:.7}
[dir=rtl] .nh-eyebrow{letter-spacing:.06em}
@media(max-width:480px){.nh-eyebrow{font-size:.66rem; letter-spacing:.14em; gap:10px}}
.nh-title{margin:18px 0 0; font-family:'Newsreader',Georgia,serif; font-weight:500;
font-optical-sizing:auto; font-size:clamp(2.35rem,10.5vw,5.4rem);
line-height:1.04; letter-spacing:-.02em; color:var(--dark-ink); text-wrap:balance}
@media(min-width:960px){ .nh-title{font-size:clamp(3.2rem,5.6vw,5.2rem)} }
[dir=rtl] .nh-title{letter-spacing:0}
.nh-title em{font-style:italic; color:var(--gold-soft)}
[dir=rtl] .nh-title em{font-style:normal}
.nh-lede{margin:26px auto 0; max-inline-size:46ch; font-size:clamp(1.02rem,2vw,1.16rem);
line-height:1.65; color:var(--dark-muted)}
.nh-cta{margin-block-start:38px}
.nh-btn{min-height:56px; padding-inline:40px; font-size:1.02rem}
.nh-note{margin:15px 0 0; font-size:.85rem; color:var(--dark-muted)}
.nh-login{margin:8px 0 0; font-size:.85rem; color:var(--dark-muted)}
.nh-login a{color:var(--dark-ink); text-decoration-color:var(--dark-line)}
/* the proof: a suggestion card with a face, bridging dark into paper. The one
beat of motion: .play presses Interested and raises the toast BENEATH the
card — clear of the buttons it demonstrates. */
.nh-proof{position:relative; z-index:2; width:min(320px,78vw);
margin:46px auto -120px; rotate:-1.6deg; text-align:start; color:var(--ink)}
@media(min-width:960px){ .nh-proof{margin:0 auto -150px; width:340px; rotate:2deg} }
.nh-card{background:var(--card); border:1px solid var(--line); border-radius:16px;
overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.38)}
.nh-photo{aspect-ratio:4/3; background:#DECEBA}
.nh-photo svg{inline-size:100%; block-size:100%; display:block}
.nh-body{padding:14px 16px 16px}
.nh-name{margin:0; font:500 1.3rem/1.2 'Newsreader',Georgia,serif}
.nh-meta{margin:2px 0 0; font-size:.84rem; color:var(--muted)}
.nh-actions{display:flex; gap:8px; margin-block-start:12px}
.nh-actions span{flex:1; display:grid; place-items:center; padding:9px 0;
border-radius:8px; font-size:.9rem; font-weight:600}
.nh-yes{background:var(--accent); color:#fff; font-weight:700;
transition:transform .25s, box-shadow .25s}
.nh-no{background:var(--card); color:var(--ink-soft); border:1px solid var(--line-strong)}
.nh-proof.play .nh-yes{transform:scale(.96); box-shadow:0 0 0 3px var(--gold-bg)}
.nh-toast{position:absolute; inset-inline-end:-14px; inset-block-end:-74px;
inline-size:200px; padding:11px 14px; rotate:1.8deg; color:var(--ink);
background:var(--gold-bg); border:1px solid var(--gold-soft); border-radius:12px;
box-shadow:0 14px 34px rgba(18,37,54,.25);
opacity:0; translate:0 10px; transition:opacity .5s .45s, translate .5s .45s}
@media(min-width:960px){ .nh-toast{inset-inline-end:auto; inset-inline-start:-26px} }
.nh-proof.play .nh-toast{opacity:1; translate:0 0}
/* no JS at all: the settled final frame */
html:not(.js) .nh-toast{opacity:1; translate:0 0}
.nh-toast-h{margin:0; font-size:.62rem; font-weight:700; text-transform:uppercase;
letter-spacing:.13em; color:var(--gold-ink)}
[dir=rtl] .nh-toast-h{letter-spacing:.05em}
.nh-toast-s{margin:3px 0 0; font:400 .95rem/1.35 'Newsreader',Georgia,serif}
/* process: engraved numerals in a book column */
.nh-process{padding-block:170px clamp(48px,7vw,72px) !important}
@media(min-width:960px){ .nh-process{padding-block-start:210px !important} }
.nh-pcol{max-width:760px; margin-inline:auto}
.nh-phead{text-align:center; margin-block-end:clamp(34px,6vw,52px)}
.nh-peyebrow{display:flex; align-items:center; justify-content:center; gap:14px; margin:0;
font-size:.72rem; font-weight:600; text-transform:uppercase;
letter-spacing:.18em; color:var(--gold-ink)}
.nh-peyebrow::before,.nh-peyebrow::after{content:""; flex:0 1 28px; block-size:1px;
background:var(--gold); opacity:.7}
[dir=rtl] .nh-peyebrow{letter-spacing:.06em}
.nh-ptitle{margin:14px 0 0; font-family:'Newsreader',Georgia,serif; font-weight:500;
font-size:clamp(1.8rem,4.4vw,2.6rem); line-height:1.12; letter-spacing:-.01em;
text-wrap:balance}
[dir=rtl] .nh-ptitle{letter-spacing:0}
.nh-psub{margin:12px 0 0; color:var(--muted); font-size:.98rem}
.nh-step{display:grid; grid-template-columns:86px minmax(0,1fr);
column-gap:18px; align-items:start;
padding-block:26px; border-top:1px solid var(--line)}
@media(min-width:960px){
.nh-step{grid-template-columns:120px minmax(0,1fr); column-gap:30px; padding-block:34px}
}
/* engraved numerals — stroke with paint-order so every digit renders alike
(the old rule left "1" filled while 2 and 3 were outlined) */
.nh-num{font:italic 400 4.4rem/.9 'Newsreader',Georgia,serif;
color:var(--gold-soft); text-align:center}
@media(min-width:960px){ .nh-num{font-size:5.6rem} }
@supports (-webkit-text-stroke:1px red){
.nh-num{-webkit-text-stroke:1.3px var(--gold); color:transparent; paint-order:stroke}
}
.nh-stag{display:inline-block; margin-block-end:7px; font-size:.66rem; font-weight:600;
text-transform:uppercase; letter-spacing:.16em; color:var(--gold-ink)}
[dir=rtl] .nh-stag{letter-spacing:.05em}
.nh-step h3{margin:0; font:500 clamp(1.3rem,3vw,1.6rem)/1.25 'Newsreader',Georgia,serif}
.nh-step p{margin:9px 0 0; color:var(--ink-soft); max-inline-size:48ch; font-size:.98rem;
line-height:1.6}
/* faq gets the section ornament + serif title */
.nh-faqsec{margin-top:clamp(44px,7vw,72px)}
.nh-orn{display:flex; justify-content:center; margin-block-end:22px}
.nh-orn svg{inline-size:44px; block-size:auto; stroke:var(--gold); opacity:.85}
.nh-faqtitle{text-align:center; margin-bottom:26px}
/* closing: the invitation panel */
.nh-invitesec{padding-block:clamp(40px,6vw,64px) clamp(24px,4vw,48px)}
.nh-invite{position:relative; max-inline-size:720px; margin-inline:auto;
background:var(--card); border:1px solid var(--gold-soft); border-radius:4px;
padding:44px 26px 40px; text-align:center}
.nh-invite::after{content:""; position:absolute; inset:7px; border-radius:2px;
border:1px solid var(--gold-soft); opacity:.55; pointer-events:none}
.nh-invite h2{margin:0; font:500 clamp(1.8rem,4.2vw,2.5rem)/1.12 'Newsreader',Georgia,serif;
letter-spacing:-.01em; text-wrap:balance}
/* the checks: a start-aligned list, centered as a block — at every width */
.nh-trust{display:grid; gap:10px; margin:20px auto 0; max-inline-size:46ch;
justify-content:start; text-align:start}
.nh-trust span{display:flex; align-items:flex-start; gap:10px;
font-size:.95rem; line-height:1.5; color:var(--ink-soft)}
.nh-trust svg{inline-size:14px; block-size:auto; stroke:var(--gold); flex:none;
margin-block-start:4px}
.nh-invite .btn{margin-block-start:26px}
.nh-micro{margin:13px 0 0; font-size:.85rem; color:var(--muted)}
/* gentle entrance, once, on the hero only */
@media (prefers-reduced-motion:no-preference){
.nh-inner>*, .nh-proof{animation:nhRise .7s var(--ease) both}
.nh-inner>:nth-child(2){animation-delay:.07s}
.nh-inner>:nth-child(3){animation-delay:.14s}
.nh-inner>:nth-child(4){animation-delay:.21s}
.nh-inner>:nth-child(5){animation-delay:.26s}
.nh-inner>:nth-child(6){animation-delay:.3s}
.nh-proof{animation-delay:.28s}
@keyframes nhRise{from{opacity:0; translate:0 16px} to{opacity:1; translate:0 0}}
}
/* ============================================================================
MATCHES v2 — the match moment as a gold invitation; introduction cards
========================================================================== */
.mutual-card{background:var(--gold-bg); border:1px solid var(--gold-soft);
border-radius:0; position:relative; text-align:center;
padding:26px 22px 24px}
.mutual-card::after{content:""; position:absolute; inset:6px;
border:1px solid var(--gold-soft); opacity:.55; pointer-events:none}
.mc-orn{display:flex; justify-content:center; margin-bottom:10px; color:var(--gold)}
.mutual-card .mc-kicker{color:var(--gold-ink); letter-spacing:.18em}
[dir=rtl] .mutual-card .mc-kicker{letter-spacing:.06em}
.mutual-card h3{margin:8px 0 0; font:500 1.45rem/1.25 'Newsreader',Georgia,serif}
.mutual-card .meta{margin:8px auto 0; max-inline-size:44ch}
/* (card chrome retired — introductions are unboxed; see the suggest-list block) */
/* ============================================================================
SHADCHAN DESK v2 — dark page-head band, queue first, pair rows as the object
========================================================================== */
.dhead2{margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%);
background:var(--dark); color:var(--dark-ink);
padding-block:20px 26px; margin-bottom:18px}
.dh-row{display:flex; align-items:flex-end; justify-content:space-between;
gap:16px; flex-wrap:wrap}
.dh-eyebrow{display:flex; align-items:center; gap:12px; margin:0;
font-size:.7rem; font-weight:600; text-transform:uppercase;
letter-spacing:.16em; color:var(--gold-soft)}
.dh-eyebrow::before{content:""; flex:0 1 26px; block-size:1px;
background:var(--gold); opacity:.7}
[dir=rtl] .dh-eyebrow{letter-spacing:.05em}
.dh-title{margin:10px 0 0; font:500 clamp(1.6rem,5vw,2.2rem)/1.12
'Newsreader',Georgia,serif; color:var(--dark-ink); letter-spacing:-.01em}
.dh-links{display:flex; gap:18px; padding-bottom:6px}
.dh-links a{color:var(--dark-muted); font-size:.88rem; text-decoration:underline;
text-underline-offset:3px; text-decoration-color:var(--dark-line)}
.dh-links a:hover{color:var(--dark-ink)}
.dh-actions{display:flex; align-items:center; gap:12px; flex-wrap:wrap;
margin-top:18px}
.dh-gold{background:var(--gold); color:#161009; border:0; min-height:44px}
.dh-gold:hover{background:var(--gold-hover); color:#161009}
.dh-chip{display:inline-flex; align-items:center; justify-content:center;
min-height:44px; padding-inline:18px; border-radius:9px;
border:1px solid var(--dark-line); color:var(--dark-ink);
font-size:.9rem; font-weight:600; text-decoration:none;
transition:border-color .15s var(--ease)}
.dh-chip:hover{border-color:var(--gold)}
.dh-micro{margin:11px 0 0; font-size:.8rem; color:var(--dark-muted)}
@media(max-width:859px){
.dh-actions,.dh-micro{display:none}
.dhead2{padding-block:14px 20px}
}
body.dark-top .verify-banner{margin-top:14px}
/* pair rows: the shidduch as a card of two people joined by the rings */
.redt-row{border-radius:14px;
box-shadow:0 1px 3px rgba(0,0,0,.04), 0 12px 30px -18px rgba(0,0,0,.1)}
.redt-row.is-mine{border-inline-start:3px solid var(--gold)}
.redt-pair .amp{color:var(--gold); opacity:.85; align-self:center; font-size:0}
/* ============================================================================
ADMIN v2 — tabs in the dark band; shadchanim as conversations + roster
========================================================================== */
.dhead-admin{margin-bottom:0; padding-block-end:0}
.dhead-admin .admin-tabs{margin-top:16px}
.admin-tabs.dtabs{display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
border:0; background:none; padding:0}
.admin-tabs.dtabs::-webkit-scrollbar{display:none}
.admin-tabs.dtabs button{appearance:none; border:0; background:none; cursor:pointer;
flex:none; padding:11px 15px 13px; font-size:.92rem; font-weight:600;
color:var(--dark-muted); border-bottom:2px solid transparent; border-radius:0;
display:inline-flex; align-items:center; gap:8px}
.admin-tabs.dtabs button:hover{color:var(--dark-ink)}
.admin-tabs.dtabs button.on{color:var(--dark-ink); border-bottom-color:var(--gold);
background:none}
.admin-tabs.dtabs .tab-dot{background:var(--gold); color:#161009}
@media(max-width:480px){
.admin-tabs.dtabs button{padding:9px 9px 11px; font-size:.84rem; gap:6px}
}
.tabpane{padding-top:20px}
.shpane{display:grid; gap:16px; align-items:start}
@media(min-width:900px){.shpane{grid-template-columns:340px minmax(0,1fr)}}
.shcol{background:var(--card); border:1px solid var(--line); border-radius:14px;
overflow:hidden}
.shcol-h{margin:0; padding:15px 18px 12px; border-bottom:1px solid var(--line);
font:500 1.2rem/1.2 'Newsreader',Georgia,serif}
.mrow,.shrow{display:flex; align-items:center; gap:12px; padding:13px 16px;
text-decoration:none; border-bottom:1px solid var(--line)}
.mrow:last-child,.shrow:last-child{border-bottom:0}
.mrow:hover,.shrow:hover{background:var(--bg)}
.mrow-av{width:42px; height:42px; border-radius:9px; flex:none;
background:var(--tint); border:1px solid var(--line);
display:grid; place-items:center;
font:italic 500 1.1rem/1 'Newsreader',Georgia,serif; color:var(--accent)}
.mrow-mid{flex:1; min-width:0}
.mrow-name{display:block; font:500 1rem/1.25 'Newsreader',Georgia,serif; color:var(--ink)}
.mrow-prev{display:block; margin-top:3px; font-size:.83rem; color:var(--muted);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.mrow-side{display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:none}
.mrow-when{font-size:.74rem; color:var(--muted)}
.shrow-figs{display:block; margin-top:3px; font-size:.82rem; color:var(--muted)}
.shrow-figs b{font-weight:600; color:var(--ink-soft)}
.shrow-go{flex:none; font:400 1.3rem/1 'Newsreader',Georgia,serif; color:var(--line-strong)}
.shrow:hover .shrow-go{color:var(--gold)}
.shrow.inactive .mrow-name{color:var(--muted)}
/* ============================================================================
ANALYTICS v2 — the whole picture on one calm page
Units named, slices reconcile, every number drills, back pops one level,
filters are server-fresh (cleared) on every entry.
========================================================================== */
.dhead-an .dh-links{align-items:baseline}
.dh-when{color:var(--dark-muted); font-size:.8rem}
.analytics .kpis{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:20px}
@media(min-width:900px){.analytics .kpis{grid-template-columns:repeat(3,1fr)}}
.analytics .stat{background:var(--card); border:1px solid var(--line);
border-radius:14px; padding:16px 18px; text-decoration:none;
display:block; transition:border-color .15s var(--ease)}
.analytics a.stat:hover{border-color:var(--gold)}
.analytics .stat .n{display:block; font:500 clamp(2rem,4vw,2.6rem)/1
'Newsreader',Georgia,serif; letter-spacing:-.01em;
color:var(--ink); font-variant-numeric:tabular-nums}
.analytics .stat .l{display:block; margin-top:8px; font-size:.68rem; font-weight:600;
text-transform:uppercase; letter-spacing:.1em; color:var(--gold-ink)}
.analytics .stat .s{display:block; margin-top:5px; font-size:.8rem; color:var(--muted)}
.an-sec{background:var(--card); border:1px solid var(--line); border-radius:14px;
margin-top:16px; padding:0 18px 16px; overflow:hidden}
.an-sec>summary{list-style:none; cursor:pointer; display:flex; align-items:baseline;
gap:12px; flex-wrap:wrap; padding:16px 0 12px}
.an-sec>summary::-webkit-details-marker{display:none}
.an-sec .an-t{font:500 1.25rem/1.25 'Newsreader',Georgia,serif; color:var(--ink)}
.an-sec .an-peek{font-size:.85rem; color:var(--muted)}
.an-sec[open]>summary{border-bottom:1px solid var(--line); margin-bottom:14px}
.funnel-row{display:grid; grid-template-columns:minmax(140px,210px) minmax(0,1fr) 84px;
gap:14px; align-items:center; padding:8px 0; text-decoration:none}
.funnel-row .fl{font-size:.9rem; color:var(--ink-soft)}
.funnel-row:hover .fl{color:var(--accent-700)}
.funnel-row .fb{height:24px; border-radius:5px; background:var(--bg-soft);
position:relative; overflow:hidden}
.funnel-row .fb i{position:absolute; inset-block:0; inset-inline-start:0;
background:var(--accent); border-radius:5px; min-width:5px}
.funnel-row.drop .fb i{background:var(--gold)}
.funnel-row.drop .fl{color:var(--gold-ink); font-weight:600}
.funnel-row .fn{text-align:end; font:500 1.15rem/1 'Newsreader',Georgia,serif;
font-variant-numeric:tabular-nums}
.funnel-row .fn small{margin-inline-start:6px; font:400 .72rem/1
'Hanken Grotesk',sans-serif; color:var(--muted)}
.funnel-note{border-top:1px solid var(--line); padding-top:10px; font-size:.88rem}
.funnel-note strong{color:var(--gold-ink)}
@media(max-width:560px){
.funnel-row{grid-template-columns:minmax(0,1fr) 74px;
grid-template-areas:"l n" "b b"}
.funnel-row .fl{grid-area:l}.funnel-row .fb{grid-area:b}.funnel-row .fn{grid-area:n}
}
.alist-search{margin:14px 0 4px}
.alist-search input{width:100%; max-width:520px; border:1px solid var(--line-strong);
border-radius:10px; padding:12px 15px; background:var(--card);
font-size:1rem; color:var(--ink)}
.alist-search input:focus{outline:2px solid var(--gold); outline-offset:1px}
/* ============================================================================
MOCKUP-PARITY PASS (Aug 2026)
Nav chrome = the mockup's: rings brand, primary links only, hamburger menu,
correct hover contrast on both light and dark grounds.
========================================================================== */
.brand{display:inline-flex; align-items:center; gap:9px;
font-size:1.3rem; font-weight:600; letter-spacing:.01em}
.brand-rings{width:27px; height:auto; stroke:var(--gold); flex:none}
.nav .nav-links{position:static; background:none; border:0; box-shadow:none;
padding:0; margin-inline-start:auto}
/* hover: never a light wash the text can vanish into */
.nav-links a:hover{background:none; color:var(--accent-700);
text-decoration:underline; text-decoration-color:var(--gold);
text-underline-offset:6px; text-decoration-thickness:2px}
.nav-links a.on{color:var(--ink);
text-decoration:underline; text-decoration-color:var(--gold);
text-underline-offset:6px; text-decoration-thickness:2px}
/* guests: only Log in — visible at every width; no hamburger (footer has the rest) */
.nav-guest .nav-toggle,.nav-guest .nav-menu{display:none !important}
@media(max-width:859px){
.nav-guest .nav-links{display:flex; flex-direction:row; align-items:center}
.nav-guest .nav-links a{padding:8px 10px}
}
/* signed-in: primary links desktop-only; the hamburger exists at EVERY width */
@media(min-width:860px){
.nav:not(.nav-guest) .nav-toggle{display:grid}
.nav-menu .m-primary{display:none}
}
.nav-menu{border-top:1px solid var(--line); background:var(--card)}
.nav-menu a{display:block; padding:14px clamp(16px,4vw,28px);
border-bottom:1px solid var(--line); font-weight:600;
color:var(--ink-soft); text-decoration:none}
.nav-menu a:last-child{border-bottom:0}
.nav-menu a:hover{color:var(--accent-700); background:var(--bg)}
.nav-menu-row{padding:12px clamp(16px,4vw,28px); border-bottom:1px solid var(--line)}
/* dark ground (home, desk, admin, analytics): everything legible, hover stays dark */
body.dark-top .nav{background:var(--dark); border-bottom:1px solid var(--dark-line)}
body.dark-top .brand{color:var(--dark-ink)}
body.dark-top .brand:hover{color:var(--dark-ink)}
body.dark-top .nav-links a{color:var(--dark-muted)}
body.dark-top .nav-links a:hover{color:var(--dark-ink); background:none;
text-decoration-color:var(--gold)}
body.dark-top .nav-links a.on{color:var(--dark-ink)}
body.dark-top .lang-toggle{background:transparent; color:var(--dark-muted);
border-color:var(--dark-line)}
body.dark-top .lang-toggle:hover{background:rgba(255,255,255,.08);
color:var(--dark-ink); border-color:var(--gold)}
body.dark-top .nav-toggle:hover{background:rgba(255,255,255,.08)}
body.dark-top .nav-toggle .bars,
body.dark-top .nav-toggle .bars::before,
body.dark-top .nav-toggle .bars::after{background:var(--dark-ink)}
body.dark-top.nav-open .nav-toggle .bars{background:transparent}
body.dark-top .bell{color:var(--dark-muted)}
body.dark-top .bell:hover{background:rgba(255,255,255,.08); color:var(--dark-ink)}
body.dark-top .nav-menu{background:var(--dark); border-color:var(--dark-line)}
body.dark-top .nav-menu a{color:var(--dark-ink); border-color:var(--dark-line)}
body.dark-top .nav-menu a:hover{background:rgba(255,255,255,.06); color:var(--dark-ink)}
/* the photo placeholder finally joins the navy identity — the purple is retired */
.noimg{color:var(--accent); background:var(--tint);
font-style:italic; font-weight:500; opacity:.9}
/* scroll-reveal (mockup behavior): sections rise in as you reach them */
@media (prefers-reduced-motion:no-preference){
html.js .rv{opacity:0; translate:0 18px;
transition:opacity .7s var(--ease), translate .7s var(--ease)}
html.js .rv.in{opacity:1; translate:0 0}
}
/* home FAQ, mockup-style: hairline rows, serif questions, drawn plus marker */
.nh-faqsec .faq-list{gap:0; max-width:680px; margin-inline:auto}
.nh-faqsec .faq{background:none; border:0; border-radius:0;
border-top:1px solid var(--line)}
.nh-faqsec .faq:last-child{border-bottom:1px solid var(--line)}
.nh-faqsec .faq>summary{display:flex; align-items:center; justify-content:space-between;
gap:18px; padding:20px 2px; font:500 1.1rem/1.35 'Newsreader',Georgia,serif;
font-weight:500}
.nh-faqsec .faq>summary:hover{color:var(--accent-700)}
.nh-faqsec .faq>summary::after{content:none}
.nh-faqsec .fx{position:relative; flex:none; width:14px; height:14px;
transition:transform .25s var(--ease)}
.nh-faqsec .fx::before,.nh-faqsec .fx::after{content:""; position:absolute;
background:var(--gold-ink)}
.nh-faqsec .fx::before{inset-inline-start:0; top:6px; width:14px; height:2px}
.nh-faqsec .fx::after{inset-inline-start:6px; top:0; width:2px; height:14px}
.nh-faqsec .faq[open] .fx{transform:rotate(45deg)}
.nh-faqsec .faq>p{padding:0 2px 20px; max-width:56ch}
/* matches page joins the mockup: quiet head on paper, introduction cards */
body.pg-matches .page-head{background:none; border-bottom:0;
margin-inline:0; padding-inline:0; padding-top:26px; margin-bottom:8px}
body.pg-matches .page-head .eyebrow{display:flex; align-items:center; gap:12px;
font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
color:var(--gold-ink)}
body.pg-matches .page-head .eyebrow::before{content:""; flex:0 1 26px; height:1px;
background:var(--gold); opacity:.7}
[dir=rtl] body.pg-matches .page-head .eyebrow{letter-spacing:.05em}
.sugg-eyebrow{display:flex; align-items:center; gap:12px; margin:32px 0 12px;
font-size:.7rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase;
color:var(--gold-ink)}
.sugg-eyebrow::before{content:""; flex:0 1 26px; height:1px;
background:var(--gold); opacity:.7}
[dir=rtl] .sugg-eyebrow{letter-spacing:.05em}
/* (the boxed-card spec retired — introductions are unboxed on the paper;
the star-pill on the photo replaced .shadchan-star) */
/* admin: shadchanim search box */
.shsearch{margin:0 0 14px}
.shsearch input{width:100%; max-width:460px; border:1px solid var(--line-strong);
border-radius:10px; padding:12px 15px; background:var(--card);
font-size:1rem; color:var(--ink)}
.shsearch input:focus{outline:2px solid var(--gold); outline-offset:1px}
.foot-service{margin-top:2px; opacity:.85}
/* language toggle inside the hamburger menu — styled as a menu row */
.nav-menu .menu-lang{margin:0}
.nav-menu .menu-lang button{display:block; width:100%; text-align:start;
padding:14px clamp(16px,4vw,28px); border:0; background:none; cursor:pointer;
font:600 1rem/1.4 'Hanken Grotesk',sans-serif; color:var(--ink-soft)}
.nav-menu .menu-lang button:hover{color:var(--accent-700); background:var(--bg)}
body.dark-top .nav-menu .menu-lang button{color:var(--dark-ink)}
body.dark-top .nav-menu .menu-lang button:hover{background:rgba(255,255,255,.06)}
/* admin: correct-profile-details form */
.admin-edit-form{display:grid; gap:12px; padding:10px 0 4px}
.aef-grid{display:grid; gap:10px}
@media(min-width:700px){.aef-grid{grid-template-columns:1fr 1fr}}
.aef-grid label{display:grid; gap:4px; font-size:.85rem; color:var(--ink-soft); font-weight:600}
.aef-grid input,.aef-grid select{border:1px solid var(--line-strong); border-radius:8px;
padding:10px 12px; font-size:1rem; background:var(--card); color:var(--ink)}
.admin-edit-form .btn-sm{justify-self:start}
/* duplicate resolution: comparison cards + recommendation */
.dupe-warn{margin:6px 0 2px; padding:9px 12px; border-radius:8px; font-size:.86rem;
background:var(--warn-bg); color:var(--warn); border:1px solid #ecd9b4}
.dupe-card{position:relative}
.dupe-card.dupe-rec{border:2px solid var(--gold); border-radius:12px; padding:10px;
background:var(--gold-bg)}
/* Its own full-width row at the top of the card. As an ordinary flex item with no
min-width:0, a long "Keep this one — …" reason set the CARD's minimum width, and
the card then pushed past its container however the children behaved. */
.dupe-rec-tag{display:block; flex:1 1 100%; min-width:0; margin-bottom:8px;
padding:4px 9px; border-radius:6px; background:var(--gold); color:#161009;
font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
overflow-wrap:anywhere}
.dupe-facts b{color:var(--ink)}
/* delete-one-keep-one: the loud signals */
.never-signin{color:var(--danger); letter-spacing:.02em}
/* matches: resting-while-dating note */
.dating-rest{display:flex; align-items:flex-start; gap:12px; margin:26px 0 6px;
padding:16px 18px; background:var(--gold-bg); border:1px solid var(--gold-soft);
border-radius:12px; color:var(--gold-ink)}
.dating-rest svg{flex:none; margin-top:2px; color:var(--gold)}
.dating-rest p{margin:0; font-size:.95rem; line-height:1.55; color:var(--ink-soft)}
/* shadchan desk: find-a-shidduch search */
.desk-search{margin:16px 0 4px}
.desk-search input{width:100%; max-width:440px; border:1px solid var(--line-strong);
border-radius:10px; padding:12px 15px; background:var(--card);
font-size:1rem; color:var(--ink)}
.desk-search input:focus{outline:2px solid var(--gold); outline-offset:1px}
.desk-search .muted{margin:8px 0 0; font-size:.9rem}
/* Feedback search — the same box as the desk's, above both bands. Wider than the
desk's because what is typed here is often a phrase from a conversation rather
than a name. */
.fb-search{margin:4px 0 14px}
.fb-search input{width:100%; max-width:560px; border:1px solid var(--line-strong);
border-radius:10px; padding:12px 15px; background:var(--card);
font-size:1rem; color:var(--ink)}
.fb-search input:focus{outline:2px solid var(--gold); outline-offset:1px}
.fb-search .muted{margin:8px 0 0; font-size:.9rem}
/* person tabs: unmissable profile switching for multi-child accounts */
.ptab-wrap{margin:14px 0 6px}
.ptabs{display:flex; gap:8px; flex-wrap:wrap}
.ptab{display:inline-flex; align-items:center; min-height:44px; padding:0 20px;
border-radius:10px; border:1px solid var(--line-strong); background:var(--card);
font-weight:600; font-size:.95rem; color:var(--ink-soft); text-decoration:none}
.ptab:hover{border-color:var(--gold); text-decoration:none}
.ptab.on{background:var(--accent); border-color:var(--accent); color:#fff}
.ptab-line{margin:9px 0 0; font-size:.9rem; color:var(--gold-ink); font-weight:600}
.switcher-label{display:block; margin-bottom:4px; font-size:.78rem; font-weight:700;
text-transform:uppercase; letter-spacing:.08em; color:var(--muted)}
/* redt pair: the calm truth about the automatic pause */
.autopause-note{flex-basis:100%; color:var(--gold-ink); font-size:.82rem}
/* ---- shadchan contact actions: one row, one tap to reach either side ---- */
/* ---- one Contact control, opening a list of ways to reach somebody --------------
These arrived as a row of up to six pills — message, email, call, text, WhatsApp,
WhatsApp call — which is a wall to read before you have decided who you are even
contacting, and on a phone wrapped to two or three lines of buttons per person.
One button, then a list: pick the person, then pick the way. */
.caf{margin:8px 0 4px}
.caf > summary{list-style:none; cursor:pointer; display:inline-flex}
.caf > summary::-webkit-details-marker{display:none}
.caf-btn{flex:none; display:inline-flex; align-items:center; gap:5px; min-height:34px;
padding:0 12px; border:1px solid var(--line); border-radius:999px;
background:var(--card); color:var(--ink); font-size:.82rem; font-weight:600}
.caf > summary:hover .caf-btn{border-color:var(--ink)}
.caf-chev{transition:transform .15s ease}
.caf[open] .caf-chev, .shdir-row[open] .caf-chev{transform:rotate(180deg)}
.cai-list{list-style:none; margin:10px 0 0; padding:0; border:1px solid var(--tint-line);
border-radius:var(--r-lg); overflow:hidden; background:var(--card)}
.cai-list li + li{border-top:1px solid var(--tint-line)}
.cai{display:flex; align-items:center; gap:11px; padding:11px 14px; min-height:46px;
color:var(--ink); text-decoration:none}
.cai:hover{background:var(--tint); text-decoration:none}
.cai svg{flex:none; color:var(--ink-soft)}
.cai-label{font-weight:600; font-size:.9rem}
/* The number or address itself, quiet at the end of its own row — readable and
copyable without opening anything, which is what .ca-raw used to be for. */
.cai-detail{margin-inline-start:auto; color:var(--muted); font-size:.78rem;
overflow-wrap:anywhere; text-align:end}
/* ---- the shadchan directory -----------------------------------------------------
Mounted twice from one macro, because .desk-rail is desktop-only: in the rail
under Yours / Reserved / Open, and as a folder under the chips on phones. Each is
hidden at the width the other owns, so only ever one is on screen. */
.shdir{display:grid; gap:6px; margin-top:14px}
.shdir-h{margin:12px 0 4px !important}
.shdir-find{width:100%; padding:7px 10px; font-size:.84rem; border-radius:8px;
border:1px solid var(--line); background:var(--card); color:var(--ink)}
.shdir-scroll{display:grid; gap:4px; max-height:320px; overflow-y:auto;
padding-inline-end:2px}
.shdir-row > summary{display:flex; align-items:center; gap:8px; cursor:pointer;
list-style:none; padding:8px 10px; border-radius:8px; border:1px solid transparent}
.shdir-row > summary::-webkit-details-marker{display:none}
.shdir-row > summary:hover{background:var(--card); border-color:var(--line)}
.shdir-row[open] > summary{background:var(--card); border-color:var(--gold)}
.shdir-name{font-weight:650; font-size:.88rem; color:var(--ink);
margin-inline-end:auto; min-width:0; overflow:hidden; text-overflow:ellipsis;
white-space:nowrap}
/* Which side she works, small enough to live in a 240px column. */
.shdir-side{flex:none; font-size:.62rem; font-weight:700; letter-spacing:.04em;
padding:2px 6px; border-radius:999px; border:1px solid}
.shdir-side.israeli{background:#eef4fb; border-color:#cfe0f2; color:#2c5a8c}
.shdir-side.american{background:#f6efe9; border-color:#e6d5c4; color:#8a5a2b}
.shdir-side.both{background:var(--tint); border-color:var(--line); color:var(--ink-soft)}
.shdir-row .cai-list{margin:4px 0 6px}
.shdir-row .cai{padding:9px 11px; min-height:40px; gap:9px}
.shdir-row .cai-label{font-size:.84rem}
.shdir-row .cai-detail{font-size:.72rem}
.shdir-none{margin:4px 0 8px 10px; font-size:.78rem; color:var(--muted)}
.shdir-empty{margin:6px 0 0 10px; font-size:.8rem; color:var(--muted)}
.shdir[data-mount="rail"]{display:none}
@media(min-width:980px){
.shdir[data-mount="rail"]{display:grid}
.shdir-phone{display:none}
/* …unless there is no rail to defer to: an empty desk draws no rail, and that is
exactly when a shadchan needs her colleagues most. */
.shdir-phone.shdir-always{display:block}
}
.shdir-phone{margin:0 0 20px}
.shdir-phone > summary{cursor:pointer}
.shdir-phone .shdir{margin-top:8px}
.shdir-phone .shdir-h{display:none} /* the folder's own summary says it */
.shdir-phone .shdir-scroll{max-height:380px}
@media(max-width:560px){.shdir-row .cai-detail{font-size:.7rem}}
.contact-actions{margin:8px 0 4px}
.ca-via{font-size:.82rem; color:var(--muted); margin:0 0 6px}
.ca-row{display:flex; flex-wrap:wrap; gap:8px}
.ca-btn{display:inline-flex; align-items:center; gap:7px; min-height:40px;
padding:7px 12px; background:var(--card); border:1px solid var(--line);
border-radius:999px; font-size:.88rem; font-weight:600; color:var(--ink);
text-decoration:none; white-space:nowrap}
.ca-btn:hover{border-color:var(--ink)}
.ca-btn svg{flex:none}
.ca-raw{font-size:.82rem; color:var(--muted); margin:6px 0 0; overflow-wrap:anywhere}
/* pair checker: the two sides' rows, side by side on wide screens */
.pair-contact{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:10px}
.pair-contact .pc-name{font-weight:700; margin:0 0 2px}
@media (max-width:700px){ .pair-contact{grid-template-columns:1fr} }
/* ==================== Shidduchim command center (admin) ==================== */
/* The pipeline strip: total + every stage, honest sum, one tap to a stage list.
Phone-first: a horizontally scrollable row of tiles. */
.cc-pipe{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none;
margin:16px 0 6px; padding-bottom:6px; -webkit-overflow-scrolling:touch}
.cc-pipe::-webkit-scrollbar{display:none}
.cc-st{flex:0 0 auto; min-width:104px; padding:10px 12px; text-decoration:none;
background:var(--card); border:1px solid var(--line); border-radius:var(--r);
color:inherit; position:relative}
.cc-st .n{display:block; font-family:'Newsreader',serif; font-size:1.5rem;
font-weight:600; line-height:1.1}
.cc-st .l{display:block; color:var(--muted); font-size:.74rem; line-height:1.25;
margin-top:2px}
.cc-st:hover{border-color:var(--gold); text-decoration:none}
.cc-st.on{border-color:var(--gold); box-shadow:inset 0 -3px 0 var(--gold)}
.cc-st.empty .n{color:var(--muted)}
.cc-st.cc-total{background:var(--tint); border-color:var(--tint-line)}
/* The Active grouping tile (claimed+redt+dating) and its three member stages:
the group leads with a brass edge, the members sit slightly recessed under it,
so "moving" vs "on hold" reads at a glance. */
.cc-st.cc-active{border-color:var(--gold); background:var(--gold-bg, var(--tint))}
.cc-st.cc-sub{border-style:dashed}
.cc-st.cc-sub .l::before{content:"· "; color:var(--gold)}
/* the flow arrows between stages */
.cc-st + .cc-st::before{content:"›"; position:absolute; inset-inline-start:-8px;
top:50%; transform:translateY(-50%); color:var(--muted); font-size:.9rem}
/* Shadchan filter: a compact type-to-search box beside each stage heading (one
shared datalist, copies synced by JS; hidden until the JS that powers them
runs). The heading and box share a row; on a narrow phone the box wraps to its
own full-width line under the heading, still above the stage's sub text. */
.sec-row{display:flex; align-items:baseline; justify-content:space-between;
gap:4px 16px; flex-wrap:wrap}
.sec-row .sec-h{margin-bottom:0}
.sec-row-fold{margin-top:8px}
.cc-filter{position:relative; flex:0 1 220px; min-width:170px}
.cc-filter-in{width:100%; min-height:40px; padding:7px 34px 7px 11px;
border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card);
color:inherit; font:inherit; font-size:.88rem}
.cc-filter-in:focus{border-color:var(--gold); outline:none}
.cc-filter-in::placeholder{color:var(--muted)}
.cc-filter-x{position:absolute; inset-inline-end:2px; top:50%;
transform:translateY(-50%); border:0; background:none; color:var(--muted);
font-size:1.2rem; line-height:1; padding:8px 10px; cursor:pointer}
.cc-filter-x:hover{color:var(--ink)}
@media (max-width:700px){ .cc-filter{flex-basis:100%} }
/* Our own suggestion panel (not the native datalist): names in the server's
alphabetical order, 44px rows for a thumb, scrolls past ~5 names. */
.cc-filter-dd{position:absolute; top:100%; inset-inline:0; margin-top:4px;
background:var(--card); border:1px solid var(--line); border-radius:var(--r-sm);
box-shadow:var(--shadow-sm); max-height:264px; overflow-y:auto; z-index:40}
.cc-dd-it{display:block; width:100%; min-height:44px; padding:11px 12px;
border:0; background:none; text-align:start; font:inherit; font-size:.9rem;
color:inherit; cursor:pointer}
.cc-dd-it:hover,.cc-dd-it:focus{background:var(--tint)}
.cc-dd-it + .cc-dd-it{border-top:1px solid var(--line)}
/* The filter hides cards via the hidden attribute — which these must not defeat:
.cc-card and .cc-attn-row carry author display rules (flex/block), and ANY
author display outranks the UA's [hidden]{display:none}. Without this line the
counts changed but every card stayed visible. */
.cc-card[hidden],.cc-attn-row[hidden]{display:none}
/* One text-chain of the human notes on a pair — the office's comments gold-edged
(same accent as everywhere the office speaks), the shadchan's own words plain;
oldest first, so it reads like the conversation it is. */
.note-chain{display:grid; gap:7px; margin:0 0 12px; padding:10px 12px;
background:var(--bg); border:1px solid var(--line); border-radius:var(--r-sm)}
.nc-h{font-size:.7rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
color:var(--muted)}
.nc-msg{font-size:.9rem}
.nc-msg .nc-text{display:block}
.nc-who{color:var(--muted); font-size:.78rem}
.nc-office{padding:6px 10px; background:var(--gold-bg);
border-inline-start:3px solid var(--gold); border-radius:8px}
/* The desk's stage folders — the SAME tile strip as the admin's shidduchim
control page (.cc-pipe/.cc-st reused wholesale), so both surfaces read as one
system. Buttons, not links: reset the UA button font; no flow arrows (the
folder order is the shadchan's priority order, not the pipeline). */
.desk-folders{margin:16px 0 2px}
.desk-folders .cc-st{font:inherit; text-align:start; cursor:pointer}
.desk-folders .cc-st + .cc-st::before{content:none}
/* What a folder hides, stays hidden — independent of the desk search's inline
display toggles, and immune to the author-display-beats-[hidden] trap. */
.df-hide{display:none !important}
/* Needs attention: the 5 oldest stalled shidduchim, above everything. */
.cc-attn{margin-top:16px; padding:4px 14px 12px; background:var(--warn-bg);
border:1px solid var(--warn); border-radius:var(--r-lg)}
.cc-attn .sec-h{margin-top:10px}
.cc-attn-row{display:flex; align-items:center; gap:10px; padding:9px 2px;
border-top:1px solid rgba(138,90,22,.18); text-decoration:none; color:inherit}
.cc-attn-row:first-of-type{border-top:0}
.cc-attn-row:hover .cc-attn-names{text-decoration:underline}
.cc-attn-names{font-weight:700; white-space:nowrap}
.cc-attn-what{color:var(--warn); font-size:.85rem; min-width:0}
.cc-attn-row .shrow-go{margin-inline-start:auto; color:var(--muted)}
/* Cards: the desk's card language, plus the manager's lines. */
.cc-card{display:block}
.cc-top{display:flex; flex-wrap:wrap; gap:8px 12px; align-items:center;
margin-bottom:10px}
.cc-age{font-weight:700; font-size:.92rem}
.cc-card.cc-stalled{border-color:var(--warn);
box-shadow:inset 4px 0 0 var(--warn), var(--shadow-sm)}
.stall-badge{display:inline-flex; align-items:center; padding:2px 10px;
border-radius:999px; background:var(--warn-bg); color:var(--warn);
font-size:.76rem; font-weight:700}
.cc-resp{margin:10px 0 0; font-size:.92rem}
.cc-note{margin:8px 0 0; font-size:.9rem; color:var(--ink-soft)}
.cc-note-office{padding:8px 12px; background:var(--gold-bg);
border-inline-start:3px solid var(--gold); border-radius:8px}
.cc-note-who{color:var(--muted); font-size:.82rem}
.cc-notes-all{margin-top:6px; font-size:.88rem}
.cc-notes-all summary{cursor:pointer; color:var(--muted)}
.cc-notes-all ul{list-style:none; margin:8px 0 0; padding:0}
.cc-notes-all li{padding:5px 0; border-top:1px solid var(--line)}
.cc-actions{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-start;
margin-top:12px; padding-top:10px; border-top:1px solid var(--line)}
.cc-tool{position:relative}
.cc-tool-btn{cursor:pointer; list-style:none; display:inline-flex}
.cc-tool-btn::-webkit-details-marker{display:none}
.cc-tool[open] .cc-tool-btn{border-color:var(--gold)}
.cc-tool-form{margin-top:8px; display:grid; gap:8px; min-width:min(320px, 78vw)}
.cc-tool-form textarea, .cc-tool-form select{width:100%}
.cc-fold{margin-top:18px}
/* Office note on the shadchan's desk card. */
.office-note{margin:0 0 10px; padding:9px 12px; background:var(--gold-bg);
border-inline-start:3px solid var(--gold); border-radius:8px; font-size:.9rem}
.office-note .on-when{color:var(--muted); font-size:.8rem}
/* People tab: the find-one-person line under a name. */
.pp-shid{margin-top:3px; font-size:.84rem}
.pp-shid a{color:var(--gold-ink); font-weight:600}
/* The Shidduchim door in the admin tab bar — a link among the pane buttons. */
.admin-tabs.dtabs a.tab-go{display:inline-flex; align-items:center; gap:8px;
padding:11px 13px 13px; font-weight:600; font-size:.92rem; text-decoration:none;
color:var(--dark-muted); border-bottom:2px solid transparent}
.admin-tabs.dtabs a.tab-go:hover{color:var(--dark-ink)}
.admin-tabs.dtabs a.tab-go .tab-dot{background:var(--warn-bg); color:var(--warn)}
@media (max-width:640px){
.admin-tabs.dtabs a.tab-go{padding:9px 9px 11px; font-size:.84rem; gap:6px}
}
/* ---- Desk lands short (Chani): every section is a folder with its count on the
summary; only "Waiting for a shadchan" starts open. Same chevron language as
.others-wrap so the whole desk reads as one system. */
.desk-sec-d{margin-top:26px}
.desk-sec-d > summary{cursor:pointer; list-style:none; display:flex; align-items:center; gap:8px}
.desk-sec-d > summary::-webkit-details-marker{display:none}
.desk-sec-d > summary::after{content:""; width:9px; height:9px; border-inline-end:2px solid var(--muted);
border-bottom:2px solid var(--muted); transform:rotate(45deg); transition:transform .15s; margin-top:-4px}
.desk-sec-d[open] > summary::after{transform:rotate(225deg)}
.desk-sec-d > summary.queue-h{margin-top:0}
.desk-sec-d .redt-row:first-of-type{margin-top:14px}
/* Singles who wrote and are waiting for an answer — named at the very top. */
.desk-msgs{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px;
border:1px solid var(--line); border-inline-start:3px solid var(--gold);
background:var(--panel, #fff); padding:12px 16px; margin:18px 0 0; border-radius:8px}
.desk-msgs .dm-h{font-weight:700}
.desk-msgs .dm-one{display:inline-flex; align-items:center; gap:6px; text-decoration:none}
.desk-msgs .dm-one:hover{text-decoration:underline}
.desk-msgs .tab-dot{background:var(--gold); color:#161009}
/* Attachments on shadchan<->single messages: a chip inside the bubble. */
.msg-att{display:inline-flex; align-items:center; gap:7px; margin-top:6px;
padding:6px 10px; border:1px solid var(--line); border-radius:8px;
background:rgba(0,0,0,.03); text-decoration:none; font-size:.88rem; width:fit-content}
.msg-att:hover{text-decoration:underline}
.msg-att-photo{padding:6px}
.msg-att-photo img{width:76px; height:76px; object-fit:cover; border-radius:6px; display:block}
.chat-msg .msg-att{display:flex}
/* The attach controls under the composer. */
.att-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; font-size:.9rem}
.att-row .att-h{color:var(--muted)}
/* ---- "my" space: the three-room tabs (Your profile / account / status) ---- */
.me-tabs{display:flex; gap:8px; flex-wrap:nowrap; overflow-x:auto;
scrollbar-width:none; margin:14px 0 4px}
.me-tab{flex:none}
.me-tab{display:inline-flex; align-items:center; min-height:40px; padding:0 16px;
border-radius:10px; border:1px solid var(--line-strong); background:var(--card);
font-weight:600; font-size:.92rem; color:var(--ink-soft); text-decoration:none}
.me-tab:hover{border-color:var(--gold); text-decoration:none}
.me-tab.on{background:var(--accent); border-color:var(--accent); color:#fff}
/* photo gallery: × to remove, riding the photo like any photo app */
.photo-x-form{position:absolute; top:4px; inset-inline-end:4px; margin:0}
.photo-x{width:26px; height:26px; border-radius:50%; border:0; cursor:pointer;
background:rgba(20,16,10,.62); color:#fff; font-size:17px; line-height:1;
display:flex; align-items:center; justify-content:center}
.photo-x:hover{background:rgba(20,16,10,.85)}
/* The photos must own the touch gesture completely, or dragging one on a phone is
impossible. This said `pan-y` — "let the browser keep vertical scrolling, the JS
hold-drag takes over" — but that is not a thing a page can take back. Once
touch-action hands vertical panning to the browser, the browser starts scrolling on
the first downward movement and fires pointercancel at the drag; preventDefault in a
touchmove listener cannot override touch-action, so the drag died the moment the
finger moved anywhere but sideways. `none` keeps the gesture, which is what makes the
hold-then-drag work at all.
The cost is that a swipe STARTING on a photo no longer scrolls the page — the same
trade every phone photo app makes in reorder mode, over a grid a few tiles tall with
the rest of the page scrollable either side of it. */
.photo-edit-item{touch-action:none;
/* iOS steals a long press over an image: at about half a second it raises the
Save Image / Copy callout, and raising it cancels the pointer stream — which
is the drag, on a gesture that must be held to begin at all. touch-action
alone does not stop that; this does. The same rules stop a desktop browser
starting a text selection or its own image drag under the pointer. */
-webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
.photo-edit-item img{-webkit-touch-callout:none; -webkit-user-drag:none;
-webkit-user-select:none; user-select:none}
.photo-add-btn{display:inline-flex; align-items:center; cursor:pointer}
/* delete page */
.del-back{margin-inline-start:14px}
.btn.btn-danger{background:var(--danger)}
.btn.btn-danger:hover{background:#8c2b23}
/* ---- the one needs-card + the always-on status line ---- */
.needs-card{background:var(--warn-bg, #fdf6e3); border:1px solid #f0dcb0; border-radius:10px;
padding:14px 18px; margin:14px 0 4px; font-size:.92rem}
.needs-card .needs-h{margin:0 0 6px; font-weight:700; color:var(--warn)}
.needs-card .needs-list{margin:0; padding-inline-start:18px; display:grid; gap:6px}
.needs-card .needs-list a{color:var(--accent-700); font-weight:700; white-space:nowrap}
.status-line{display:flex; align-items:center; gap:8px; margin:10px 0 0;
font-size:.88rem; color:var(--ink-soft)}
.status-line a{color:inherit; text-decoration:none}
.status-line a:hover{text-decoration:underline}
/* people pane on the inbox model + the person detail view */
.inbox-row[hidden]{display:none}
.person-head .ib-title{font-size:1.3rem; margin:0}
.person-actions .rowactions{display:flex; flex-wrap:wrap; gap:8px 18px; align-items:flex-start}
/* analytics: open sections get a header row styled like the old summaries */
.an-sec .an-head{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;
padding:14px 18px 4px; margin:0}
/* ============================================================================
SIGNUP v3 — "the interview" (approved signup3 mockup). The dark band asks
each step's question; the brass hairline is the progress; the paper answers.
========================================================================== */
/* the section is the old white "stage" — hand the top of it to the dark band and
let the answers sit on paper, as the mockup has them */
.form-page.stage.sg-page{background:var(--bg); border-bottom:0; padding-top:0}
.form-page.stage.sg-page > *{max-width:600px}
.form-page.stage.sg-page > .sg-band{max-width:none;
margin-inline:calc(50% - 50vw); padding-inline:calc(50vw - 50%)}
.sg-band{position:relative; background:var(--dark); color:var(--dark-ink);
text-align:center; padding-block:30px 40px}
.sg-progress{position:absolute; top:0; inset-inline-start:0; height:3px;
background:var(--gold); width:12.5%; transition:width .5s var(--ease)}
.sg-k{margin:0; font-size:.68rem; font-weight:700; letter-spacing:.15em;
text-transform:uppercase; color:var(--gold-soft)}
.sg-q{margin:10px auto 0; max-width:680px; font-family:'Newsreader',Georgia,serif;
font-weight:500; font-size:clamp(1.75rem,6vw,2.6rem); line-height:1.15; text-wrap:balance}
.sg-why{margin:10px auto 0; font-size:.92rem; color:var(--dark-muted); max-width:46ch}
@media(min-width:900px){ .sg-band{padding-block:38px 52px} }
/* the sheet: one centered 600px column of answers */
.sg-page{max-width:600px; margin-inline:auto}
.sg-page .form-error-summary{margin-top:18px}
body.sg-wizarded .sg-page .step-head,
body.sg-wizarded .sg-page .form-step > .step-sub{display:none} /* the band already asked */
/* answers → Continue → the trust line, in the mockup's order (the nav is
JS-appended after the kept-line, so flex order restores the sequence) */
.sg-page .form-step{background:none; border:0; box-shadow:none; padding:30px 0 0;
display:flex; flex-direction:column}
.sg-page .form-step > .step-nav{order:1; border-top:0; padding-top:0}
.sg-page .form-step > .sg-kept{order:2}
/* step 1's answers as choice cards */
.sg-page .forwhom .radios{display:grid; gap:10px}
@media(min-width:640px){ .sg-page .forwhom .radios{grid-template-columns:1fr 1fr}
.sg-page .forwhom .radios .radio:first-child{grid-column:1/-1} }
.sg-page .forwhom .radios .radio{display:flex; align-items:center; gap:12px;
background:var(--card); border:1px solid var(--line-strong); border-radius:12px;
padding:16px 18px; font-weight:600; font-size:1rem; margin:0}
.sg-page .forwhom .radios .radio:has(input:checked){border-color:var(--accent);
box-shadow:0 0 0 1px var(--accent); background:var(--tint)}
/* the consent, in brass — a real promise, not a checkbox row */
.sg-page .submitter .toggle{background:var(--gold-bg); border:1px solid var(--gold-soft);
border-radius:12px; padding:15px 16px}
/* the walk: brass Continue (full-width on phones), quiet Back */
.sg-page .step-nav{display:flex; align-items:center; gap:14px; margin-top:30px}
.sg-page .step-next{margin-inline-start:auto; background:var(--gold); border:1px solid var(--gold);
color:#171207; border-radius:10px; padding:14px 36px; min-height:50px;
font-weight:700; font-size:1rem}
.sg-page .step-next:hover{background:var(--gold-hover, #96771f)}
.sg-page .step-back{color:var(--muted); font-weight:600}
@media(max-width:639px){
.sg-page .step-nav{flex-direction:column-reverse; align-items:stretch}
.sg-page .step-next{width:100%}
.sg-page .step-back{align-self:center}
}
.sg-page .form-foot{display:flex; justify-content:flex-end; margin-top:30px}
.sg-page .form-foot .btn{background:var(--gold); border-color:var(--gold); color:#171207}
@media(max-width:639px){ .sg-page .form-foot .btn{width:100%} }
/* the per-step trust line */
.sg-kept{display:flex; gap:8px; justify-content:center; align-items:flex-start;
margin-top:22px; font-size:.85rem; color:var(--muted); text-align:center}
.sg-kept svg{flex:none; margin-top:2px; stroke:var(--gold)}
/* the résumé invitation on the meeting page: the mockup's brass wash */
.pv-story .resume-block{background:var(--gold-bg); border:1px solid var(--gold-soft);
border-radius:14px; padding:18px 20px; margin-top:30px}
.pv-story .resume-block .resume-lbl{font-family:'Newsreader',Georgia,serif;
font-weight:500; font-size:1.1rem}
.pv-story .resume-block .resume-note{color:var(--gold-ink); font-size:.88rem}
.pv-story .resume-block .btn-sm{background:var(--accent); color:#fff;
border-color:var(--accent); padding:11px 22px}
/* ============================================================================
/ME v3 — "the mirror" (approved me3 mockup): identity strip + settled rooms
========================================================================== */
.me-page{max-width:760px}
.idrow{display:flex; align-items:center; gap:16px; margin-top:18px}
.idrow .face{width:64px; height:64px; border-radius:50%; overflow:hidden; flex:none;
border:2px solid var(--gold-soft); display:block}
.idrow .face img{width:100%; height:100%; object-fit:cover; object-position:center top; display:block}
.idrow .face .noimg{width:100%; height:100%; display:grid; place-items:center;
font:italic 500 1.6rem/1 'Newsreader',Georgia,serif; color:var(--accent-700); background:var(--tint)}
.idrow h1{margin:0; font-family:'Newsreader',Georgia,serif; font-weight:500;
font-size:1.65rem; line-height:1.1}
.idrow .sub{margin:2px 0 0; font-size:.88rem; color:var(--muted)}
.idrow .see{margin-inline-start:auto; flex:none; display:inline-flex; align-items:center;
border:1px solid var(--line-strong); border-radius:10px; padding:10px 16px;
font-weight:700; font-size:.9rem; color:var(--ink-soft); text-decoration:none;
background:var(--card)}
.idrow .see:hover{border-color:var(--gold); text-decoration:none}
@media(max-width:560px){ .idrow{flex-wrap:wrap} .idrow .see{margin-inline-start:80px} }
.room{background:var(--card); border:1px solid var(--line); border-radius:14px;
margin-top:16px; padding:20px 20px 18px}
.room .rhead{display:flex; align-items:baseline; gap:12px}
.room .reb{display:flex; align-items:center; gap:12px; margin:0; font-size:.66rem;
font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-ink)}
.room .reb::before{content:""; width:26px; height:1px; background:var(--gold)}
[dir=rtl] .room .reb{letter-spacing:.05em}
.redit{margin-inline-start:auto; background:none; border:0; font:inherit; font-weight:700;
font-size:.88rem; color:var(--accent-700); cursor:pointer; padding:2px 4px}
.redit:hover{text-decoration:underline}
.room .rprose{margin:12px 0 0; font-family:'Newsreader',Georgia,serif; font-size:1.08rem;
line-height:1.6; color:var(--ink-soft)}
.room .rlook em{font-style:normal; font-family:'Hanken Grotesk',sans-serif;
font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
color:var(--gold-ink)}
.room .rdl{margin:12px 0 0; display:grid; gap:10px}
.room .rdl dt{font-size:.78rem; font-weight:700; color:var(--muted)}
.room .rdl dd{margin:2px 0 0}
.rpills{margin-top:12px; display:flex; flex-wrap:wrap; gap:8px}
.rpills span{background:var(--bg); border:1px solid var(--line); border-radius:99px;
padding:7px 14px; font-size:.88rem; color:var(--ink-soft)}
.rpills b{color:var(--ink); font-weight:600}
/* "Show more" on a room: the rest of what the form holds, readable without opening
the form. A , so it needs no JavaScript and no event binding — the label
swaps on [open] in CSS alone. Styled as the Edit control is, because it sits
beside it in the same role. */
.room .rmore{margin-top:12px}
.room .rmore>summary{list-style:none; cursor:pointer; display:inline-block;
font-weight:700; font-size:.88rem; color:var(--accent-700); padding:2px 4px}
.room .rmore>summary::-webkit-details-marker{display:none}
.room .rmore>summary::after{content:"▸"; margin-inline-start:6px; font-size:.8em;
color:var(--muted)}
.room .rmore[open]>summary::after{content:"▾"}
.room .rmore>summary:hover{text-decoration:underline}
.room .rmore .more-open{display:none}
.room .rmore[open] .more-open{display:inline}
.room .rmore[open] .more-closed{display:none}
.room .rmore .rdl{margin-top:10px; padding-top:12px; border-top:1px solid var(--line)}
.room .rnote{margin:12px 0 0; font-size:.85rem; color:var(--muted)}
.room .rfields{margin-top:14px; display:grid; gap:12px}
.room .rfields textarea,.room .rfields input[type=text],.room .rfields input:not([type]){
background:var(--bg)}
/* the question you were sent here to answer — lit until it's answered */
.jump-hit{position:relative; border-radius:12px; padding:12px 14px; margin:-4px -6px;
background:var(--warn-bg, #fdf6e3); box-shadow:0 0 0 2px var(--gold)}
.jump-hit .hint{color:var(--ink-soft)}
@media(prefers-reduced-motion:no-preference){
.jump-hit{animation:jumphit .9s ease-out}
@keyframes jumphit{from{box-shadow:0 0 0 6px transparent} to{box-shadow:0 0 0 2px var(--gold)}}
}
.rrow{display:flex; gap:10px; margin-top:6px}
.rsave{background:var(--accent); color:#fff; border:1px solid var(--accent); border-radius:10px;
padding:10px 22px; font:inherit; font-weight:700; cursor:pointer}
.rcancel{background:none; border:1px solid var(--line-strong); border-radius:10px;
padding:10px 18px; font:inherit; font-weight:600; color:var(--ink-soft); cursor:pointer}
/* photos room: the + Add tile lives IN the grid */
.photo-add-form{margin:0}
.addp{display:grid; place-items:center; width:104px; height:130px;
border:1.5px dashed var(--gold); border-radius:12px; cursor:pointer;
color:var(--gold-ink); font-size:.85rem; font-weight:600; text-align:center}
.addp-lone{margin-top:10px}
/* spread the word, last, in brass — QR folded inside */
.room.spread{background:var(--gold-bg); border-color:var(--gold-soft)}
.room.spread .reb{color:var(--gold-ink)}
.sbtns{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.sbtns .share-btn{background:var(--card); border:1px solid var(--gold-soft); border-radius:10px;
padding:10px 16px; font:inherit; font-weight:600; color:var(--gold-ink); cursor:pointer}
.sbtns .share-btn:hover{background:#f1e7cb}
.qrfold{margin-top:12px}
.qrfold summary{cursor:pointer; font-size:.88rem; font-weight:600; color:var(--gold-ink)}
/* ============ desk v3 "the workbench" (approved desk3 v2 mockup) ============ */
.navdot{display:inline-block; width:7px; height:7px; border-radius:50%;
background:var(--gold); vertical-align:super}
.unread-strip{display:block; background:var(--gold-bg); border-bottom:1px solid var(--gold-soft);
color:var(--gold-ink); font-weight:600; font-size:.9rem; text-decoration:none;
text-align:center; padding:10px 22px; margin-inline:calc(50% - 50vw)}
.unread-strip:hover{background:#f1e7cb; text-decoration:none}
.desk-chips{display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:16px 0 0}
.desk-chips a{flex:none; border:1px solid var(--line-strong); background:var(--card);
border-radius:99px; padding:8px 15px; font-size:.88rem; font-weight:600;
color:var(--ink-soft); text-decoration:none}
.desk-chips a b{color:var(--gold-ink)}
@media(min-width:960px){ .desk-chips{display:none} } /* the rail is the desktop map */
/* the why-reserved pill says its whole sentence */
.redt-row .gold-badge{white-space:normal; line-height:1.35; text-align:start}
/* ============ admin command center: the pipeline in boxes and arrows ============ */
.cc-board-line{display:flex; gap:14px; align-items:center; flex-wrap:wrap; margin-top:6px}
.cc-sum{margin:0; font-family:'Newsreader',Georgia,serif; font-size:1.15rem}
.cc-sum b{font-weight:600}
.cc-sum .cc-all{font-family:'Hanken Grotesk',sans-serif; font-size:.85rem; font-weight:700;
color:var(--accent-700); text-decoration:none; border-bottom:1px solid var(--gold-soft)}
.cc-board-line .cc-filter{margin-inline-start:auto}
.cc-pipe.cc-flow{display:flex; align-items:stretch; gap:0; overflow-x:auto;
scrollbar-width:none; margin-top:12px; padding-bottom:4px}
.cc-flow .cc-fbox{flex:none; width:112px; background:var(--card);
border:1px solid var(--line-strong); border-radius:12px; padding:12px 10px 10px;
text-align:center; text-decoration:none; color:inherit}
.cc-flow .cc-fbox .n{display:block; font-family:'Newsreader',Georgia,serif;
font-size:1.7rem; line-height:1; color:var(--ink)}
.cc-flow .cc-fbox .l{display:block; margin-top:5px; font-size:.7rem; font-weight:700;
color:var(--ink-soft); line-height:1.25}
.cc-flow .cc-fbox.hot{background:var(--gold-bg); border-color:var(--gold-soft)}
.cc-flow .cc-fbox.hot .n{color:var(--gold-ink)}
.cc-flow .cc-fbox.empty{border-style:dashed}
.cc-flow .cc-fbox.empty .n,.cc-flow .cc-fbox.empty .l{color:var(--muted)}
.cc-flow .cc-fbox.on{outline:2px solid var(--accent); outline-offset:1px}
.cc-farrow{flex:none; display:flex; align-items:center; padding:0 4px; color:var(--gold)}
.cc-fend{flex:none; display:flex; align-items:center; padding:0 10px; color:var(--line-strong)}
.cc-flow .cc-offpath + .cc-offpath{margin-inline-start:8px}
.cc-quiet{margin-top:22px; padding:14px 18px; background:var(--card);
border:1px dashed var(--line-strong); border-radius:12px; font-size:.92rem; color:var(--muted)}
.cc-quiet b{color:var(--ink-soft)}
.dh-sum{display:block; font-family:'Hanken Grotesk',sans-serif; font-size:1rem;
color:var(--dark-muted); font-weight:400; margin-top:4px}
@media(min-width:960px){ .dh-sum{display:inline; margin-inline-start:14px; font-size:1.05rem} }
/* "show the whole board" is a phrase in the sentence, not a tile */
.cc-sum .cc-st.cc-all{display:inline; width:auto; background:none; border:0;
padding:0; margin:0; text-align:start; box-shadow:none; border-radius:0;
font-family:'Hanken Grotesk',sans-serif; font-size:.9rem; font-weight:700;
color:var(--accent-700); border-bottom:1px solid var(--gold-soft)}
.cc-sum .cc-st.cc-all .n,.cc-sum .cc-st.cc-all .l{display:inline; font:inherit; color:inherit}
/* ============ analytics v3 "the ledger": sentences + one object per section ============ */
.an-lede{margin:12px 18px 0; font-family:'Newsreader',Georgia,serif; font-size:1.22rem;
line-height:1.55; max-width:62ch}
.an-lede2{margin-top:24px; font-size:1.08rem}
.an-drill{color:var(--accent-700); text-decoration:none;
border-bottom:1px solid var(--gold-soft); font-weight:500}
.an-drill:hover{background:var(--gold-bg); text-decoration:none}
.an-note{margin:10px 18px 0; font-size:.85rem; color:var(--muted); max-width:70ch}
.an-split{margin:14px 18px 0; max-width:560px}
.an-split .bar{display:flex; height:14px; border-radius:99px; overflow:hidden}
.an-split .bar i{display:block}
.an-split .m{background:var(--accent)}
.an-split .w{background:var(--gold)}
.an-split .legend{display:flex; gap:18px; margin-top:7px; font-size:.85rem}
.an-split .legend a{color:var(--ink-soft); text-decoration:none}
.an-split .legend a:hover{text-decoration:underline}
.an-split .dotm{display:inline-block; width:9px; height:9px; border-radius:50%;
background:var(--accent); margin-inline-end:5px}
.an-split .dotw{display:inline-block; width:9px; height:9px; border-radius:50%;
background:var(--gold); margin-inline-end:5px}
/* A three-way split of one whole (redt pairs: went out / still waiting / closed
without a date; open pairs by side). Siblings dividing a total, so it is ONE bar
cut three ways — never three bars each measured against the whole, which is what
made the old dating funnel read as four sequential stages. Flexbox, so it lays
itself out right-to-left in Hebrew with no extra rule. */
.an-split3 .bar i.went{background:var(--accent)}
.an-split3 .bar i.open{background:var(--gold)}
.an-split3 .bar i.over{background:var(--line-strong)}
.an-split .legend-wrap{flex-wrap:wrap; gap:8px 18px}
.an-split .legend span{color:var(--ink-soft)}
.an-split .legend .dot{display:inline-block; width:9px; height:9px; border-radius:50%;
margin-inline-end:5px; vertical-align:middle}
.an-split .legend .dot.went{background:var(--accent)}
.an-split .legend .dot.open{background:var(--gold)}
.an-split .legend .dot.over{background:var(--line-strong)}
/* ── The growth chart ──────────────────────────────────────────────────────────
One drawing, the size of the question. The SVG holds ONLY geometry and is
stretched to the page width (preserveAspectRatio="none"); every label is HTML
sitting around it, so text never distorts, stays readable on a phone, and lays
itself out right-to-left in Hebrew without being told. Strokes carry
vector-effect:non-scaling-stroke, so the stretch cannot fatten the line. */
.gpick{display:flex; flex-wrap:wrap; gap:6px; margin:14px 18px 0}
.gpick-b{padding:6px 13px; border:1px solid var(--line-strong); border-radius:99px;
background:var(--card); color:var(--ink-soft); font-size:.85rem; font-weight:600;
text-decoration:none; line-height:1.5}
.gpick-b:hover{border-color:var(--gold); color:var(--accent-700); text-decoration:none}
.gpick-b.on{background:var(--accent-700); border-color:var(--accent-700); color:#fff}
.gchart{margin:12px 18px 0; padding:14px 16px 10px; border:1px solid var(--line);
border-radius:var(--r-lg,14px); background:var(--card)}
.gchart-cap{display:flex; align-items:baseline; justify-content:space-between;
gap:14px; margin:0 0 10px}
.gchart-cap .gc-metric{font:600 1.05rem/1.2 'Newsreader',Georgia,serif; color:var(--ink)}
.gchart-cap .gc-last{font:500 1.5rem/1 'Newsreader',Georgia,serif; color:var(--accent-700);
font-variant-numeric:tabular-nums; text-align:end}
.gchart-cap .gc-last small{display:block; margin-top:3px; font:400 .72rem/1
'Hanken Grotesk',sans-serif; color:var(--muted)}
/* Grid: [y labels][plot] on the first row, [gap][dates] on the second. */
.gchart-body{display:grid; grid-template-columns:auto minmax(0,1fr);
grid-template-rows:auto auto; column-gap:10px}
.gc-y{grid-column:1; grid-row:1; display:flex; flex-direction:column;
justify-content:space-between; align-items:flex-end; height:210px;
font-size:.72rem; color:var(--muted); font-variant-numeric:tabular-nums}
/* The numbers sit ON their gridlines, so each is nudged up by half its own line. */
.gc-y span{transform:translateY(-.42em)}
.gc-plot{grid-column:2; grid-row:1; height:210px; position:relative}
/* overflow:visible so a point sitting exactly ON the axis top keeps its whole
stroke instead of being sliced in half by the viewBox edge. */
.gc-plot svg{display:block; width:100%; height:100%; overflow:visible}
.gc-grid{stroke:var(--line); stroke-width:1}
.gc-area{fill:var(--accent-600); opacity:.13}
.gc-line{fill:none; stroke:var(--accent-600); stroke-width:2.5;
stroke-linecap:round; stroke-linejoin:round}
/* Point markers are HTML, not SVG circles — see the template. A inside a
preserveAspectRatio="none" plot is drawn as an ellipse, wider the wider the page. */
.gc-pt{position:absolute; width:7px; height:7px; border-radius:50%;
background:var(--accent-600); transform:translate(-50%,-50%); pointer-events:none}
[dir=rtl] .gc-pt{transform:translate(50%,-50%)}
.gc-pt-last{width:11px; height:11px; background:var(--card);
border:2.5px solid var(--accent-600)}
.gc-x{grid-column:2; grid-row:2; position:relative; height:1.4em; margin-top:7px;
font-size:.72rem; color:var(--muted)}
/* Each date is anchored to its own point and centred on it, so a label cannot
drift away from the place on the line it describes. */
.gc-x span{position:absolute; transform:translateX(-50%); white-space:nowrap}
[dir=rtl] .gc-x span{transform:translateX(50%)}
/* The two end labels sit ON the plot's edges, so centring them hangs half of each
one outside it — visible as an overhang on a wide screen and clipped on a narrow
one. The ends tuck inward instead; only they, so every label in between still
points exactly at its own week. */
.gc-x span:first-child{transform:translateX(0)}
.gc-x span:last-child{transform:translateX(-100%)}
[dir=rtl] .gc-x span:first-child{transform:translateX(0)}
[dir=rtl] .gc-x span:last-child{transform:translateX(100%)}
/* The plot carries no text, so Hebrew mirrors the whole drawing — time still runs
from where the reader starts, and the newest point stays under their thumb. The
labels are HTML and have already flipped themselves. */
[dir=rtl] .gc-plot svg{transform:scaleX(-1)}
@media(max-width:560px){
.gchart{margin-inline:10px; padding:12px 12px 8px}
.gc-y,.gc-plot{height:168px}
.gchart-cap .gc-last{font-size:1.25rem}
/* On a phone the dates crowd into each other; keep the ends and every other one
between them rather than letting them overlap into nonsense. */
.gc-x span:nth-child(even):not(:last-child){display:none}
}
/* Ranked bars: the answer to "which segment does best" as a shape, best first.
Logical properties throughout, so the bars grow from the reading start in both
directions. */
.an-rank{margin:10px 18px 0; max-width:640px; display:grid; gap:6px}
.an-rank .rk{display:grid; grid-template-columns:minmax(120px,190px) minmax(0,1fr) 92px;
gap:12px; align-items:center}
.an-rank .rk-l{font-size:.9rem; color:var(--ink-soft)}
.an-rank .rk-b{height:18px; border-radius:5px; background:var(--bg-soft);
position:relative; overflow:hidden}
.an-rank .rk-b i{position:absolute; inset-block:0; inset-inline-start:0;
background:var(--accent-600); border-radius:5px}
.an-rank .rk-n{text-align:end; font-variant-numeric:tabular-nums}
.an-rank .rk-n b{font:500 1.02rem/1 'Newsreader',Georgia,serif}
.an-rank .rk-n small{display:block; font-size:.7rem; color:var(--muted)}
@media(max-width:560px){
.an-rank .rk{grid-template-columns:minmax(0,1fr) 86px; grid-template-areas:"l n" "b b"}
.an-rank .rk-l{grid-area:l}.an-rank .rk-b{grid-area:b}.an-rank .rk-n{grid-area:n}
}
.an-flow{margin:16px 18px 0}
.an-flow .cc-fbox .u{display:block; font-size:.66rem; color:var(--muted); font-weight:400}
.an-funnel{margin:12px 18px 0; max-width:640px; display:grid; gap:7px}
.an-funnel .frow{display:grid; grid-template-columns:172px 1fr 86px; gap:12px; align-items:center}
.an-funnel .fl{font-size:.9rem; font-weight:600; color:var(--ink-soft)}
.an-funnel .fb{height:12px; border-radius:99px; background:var(--bg);
border:1px solid var(--line); overflow:hidden}
.an-funnel .fb i{display:block; height:100%; background:var(--accent)}
.an-funnel .fn{font-size:.9rem; text-align:end}
.an-funnel .fn small{color:var(--muted)}
.an-funnel-note{margin:8px 18px 0; font-size:.85rem; color:var(--gold-ink); max-width:60ch}
.an-figs{margin:16px 18px 0; max-width:640px}
.an-figs .fig{display:flex; gap:14px; align-items:baseline; padding:10px 2px;
border-top:1px solid var(--line); font-size:.95rem; flex-wrap:wrap}
.an-figs .fig:first-child{border-top:0}
.an-figs .fig .v{font-family:'Newsreader',Georgia,serif; font-size:1.15rem; min-width:74px}
.an-figs .fig .b{color:var(--muted); font-size:.85rem; margin-inline-start:auto; text-align:end}
.an-fold-sm{margin:16px 18px 0}
.an-fold-sm summary{cursor:pointer; font-size:.9rem; font-weight:600; color:var(--accent-700)}
/* ---------- admin: feedback pane (Gmail-shaped rows) ---------- */
.fb-digest{margin:0 0 20px; border:1px solid var(--line); border-radius:var(--r-lg);
padding:11px 16px; background:var(--card)}
.fb-digest summary{cursor:pointer; font-weight:600; font-size:.92rem}
.fb-digest-text{white-space:pre-wrap; font:inherit; font-size:.9rem; color:var(--ink-soft); margin:10px 0 0}
.fbl-h{display:flex; align-items:center; gap:8px; margin:22px 0 8px}
.fbl-clear{color:var(--ok); font-size:.95rem; margin:18px 0}
.fblist{border:1px solid var(--line); border-radius:var(--r-lg);
background:var(--card); overflow:hidden}
/* one conversation = one scannable line */
.fbrow{border-bottom:1px solid var(--line)}
.fbrow:last-child{border-bottom:0}
.fbrow > summary{
display:flex; align-items:center; gap:10px;
padding:11px 14px; cursor:pointer; list-style:none; min-width:0;
}
.fbrow > summary::-webkit-details-marker{display:none}
.fbrow > summary:hover{background:var(--bg-soft)}
.fbrow[open] > summary{background:var(--bg-soft); border-bottom:1px dashed var(--line)}
.fbr-dot{flex:none; width:8px; height:8px; border-radius:50%; background:var(--line-strong)}
.fbrow-needs_human .fbr-dot{background:var(--gold)}
.fbrow-new .fbr-dot{background:var(--accent)}
.fbr-name{flex:none; width:150px; font-weight:600; font-size:.92rem;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fbr-snip{flex:1; min-width:0; color:var(--muted); font-size:.9rem;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fbr-pill{flex:none; font-size:.7rem; border:1px solid var(--line);
border-radius:999px; padding:1px 8px; color:var(--ink-soft); background:var(--bg)}
.fbr-st{flex:none; font-size:.78rem; color:var(--ink-soft);
max-width:200px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.fbrow-needs_human .fbr-st{color:var(--gold-ink); font-weight:600}
.fbr-when{flex:none; font-size:.78rem; color:var(--muted); min-width:64px;
text-align:end}
.fbrow-dim > summary{opacity:.72}
.fbrow-dim[open] > summary{opacity:1}
@media (max-width:640px){
.fbr-name{width:auto; max-width:110px}
.fbr-st{display:none}
}
.fbr-open{padding:14px 16px 16px; background:var(--card)}
.fb-state{font-size:.88rem; color:var(--ink-soft); margin:0 0 10px;
background:var(--tint); border:1px solid var(--tint-line);
border-radius:var(--r); padding:7px 11px}
.fb-thread{margin:8px 0 12px; display:flex; flex-direction:column; gap:10px}
.fb-msg{border-inline-start:3px solid var(--line); padding-inline-start:11px}
.fb-msg.fb-from-user{border-inline-start-color:var(--accent)}
.fb-msg.fb-from-admin{border-inline-start-color:var(--gold)}
.fb-msg p{margin:2px 0 0; white-space:pre-wrap; font-size:.93rem}
.fb-who{font-size:.78rem; font-weight:600; color:var(--ink-soft)}
.fb-msg-when{font-weight:400; color:var(--muted); margin-inline-start:6px}
.fb-from-auto .fb-who{font-style:italic}
.fb-reply textarea{width:100%; box-sizing:border-box; margin:6px 0}
.fb-actions{display:flex; gap:10px; align-items:center}
.fb-dismiss{margin-top:6px}
.fb-rest{margin-top:26px}
.fb-rest > summary{cursor:pointer; list-style:none}
.fb-rest > summary::-webkit-details-marker{display:none}
.fb-rest > summary:before{content:"▸ "; color:var(--muted)}
.fb-rest[open] > summary:before{content:"▾ "}
/* Your feedback conversations, on the Send feedback page */
.fb-mine{list-style:none; padding:0; margin:10px 0 0}
.fb-mine li{margin:0 0 8px}
.fb-mine .muted{font-size:.88rem}
/* ================= live help chat =================
The corner conversation. Same visual language as the site: warm paper,
navy ink, the dark ceremonial ground for the header, serif for the title.
Logical properties throughout so Hebrew (RTL) mirrors itself. */
.help-panel{
position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:901;
display:flex; flex-direction:column;
width:min(380px, calc(100vw - 24px));
height:min(600px, calc(100dvh - 48px));
background:var(--bg); border:1px solid var(--line-strong);
border-radius:14px; overflow:hidden;
box-shadow:0 18px 60px rgba(18,37,54,.30);
}
@media (max-width:480px){
.help-panel{inset-inline-end:12px; inset-block-end:12px}
}
.help-head{
display:flex; align-items:flex-start; gap:12px;
background:var(--dark); color:var(--dark-ink);
padding:14px 18px 13px; border-bottom:1px solid var(--dark-line);
}
.hh-text{display:flex; flex-direction:column; gap:2px; min-width:0}
.hh-text strong{
font-family:'Newsreader','Frank Ruhl Libre',Georgia,'Noto Serif Hebrew',serif;
font-weight:600; font-size:1.15rem; letter-spacing:.01em;
}
.hh-text span{font-size:.8rem; color:var(--dark-muted); line-height:1.45}
.help-close{
margin-inline-start:auto; flex:none;
background:none; border:0; color:var(--dark-muted);
font-size:1.5rem; line-height:1; cursor:pointer; padding:2px 4px;
}
.help-close:hover{color:var(--dark-ink)}
.help-log{
flex:1; overflow-y:auto; padding:16px 14px 8px;
display:flex; flex-direction:column; gap:10px;
background:
radial-gradient(140% 60% at 50% 0%, rgba(18,37,54,.045), transparent 60%),
var(--bg);
}
.hm{display:flex; flex-direction:column; max-width:82%}
.hm-user{align-self:flex-end; align-items:flex-end}
.hm-bot{align-self:flex-start; align-items:flex-start}
.hm-bubble{
padding:9px 13px; font-size:.93rem; line-height:1.55;
white-space:pre-wrap; overflow-wrap:break-word;
}
.hm-user .hm-bubble{
background:var(--accent-700); color:#fff;
border-radius:14px; border-end-end-radius:4px;
}
.hm-bot .hm-bubble{
background:var(--card); color:var(--ink);
border:1px solid var(--line); border-radius:14px; border-end-start-radius:4px;
box-shadow:0 1px 2px rgba(18,37,54,.05);
}
.hm-tag{font-size:.68rem; color:var(--muted); margin-top:3px; padding-inline:4px;
letter-spacing:.02em}
.hm-sys{
text-align:center; font-size:.8rem; color:var(--gold-ink);
background:var(--gold-bg); border:1px solid var(--gold-soft);
border-radius:8px; padding:7px 12px; margin:4px 8px; line-height:1.5;
}
/* the three thinking dots */
.hm-typing .hm-bubble{display:inline-flex; gap:5px; align-items:center; padding:12px 14px}
.hm-typing .dot{
width:7px; height:7px; border-radius:50%; background:var(--muted);
animation:help-dot 1.2s infinite ease-in-out;
}
.hm-typing .dot:nth-child(2){animation-delay:.18s}
.hm-typing .dot:nth-child(3){animation-delay:.36s}
@keyframes help-dot{
0%,60%,100%{opacity:.35; transform:translateY(0)}
30%{opacity:1; transform:translateY(-3px)}
}
.help-compose{
display:flex; align-items:flex-end; gap:8px;
padding:10px 12px 6px; border-top:1px solid var(--line); background:var(--card);
}
.help-compose textarea{
flex:1; resize:none; border:1px solid var(--line-strong); border-radius:10px;
padding:9px 12px; font:inherit; font-size:.93rem; line-height:1.5;
background:var(--bg); color:var(--ink); max-height:96px;
}
.help-compose textarea:focus{outline:none; border-color:var(--accent);
box-shadow:0 0 0 3px rgba(39,75,102,.12)}
.help-send{
flex:none; display:grid; place-items:center;
width:38px; height:38px; border-radius:10px; border:0; cursor:pointer;
background:var(--accent-700); color:#fff;
transition:background .15s ease;
}
.help-send:hover{background:var(--accent-800)}
[dir="rtl"] .help-send svg{transform:scaleX(-1)}
.help-note{
margin:0; padding:5px 14px 9px; background:var(--card);
font-size:.72rem; color:var(--muted); text-align:center;
}
/* The /feedback page IS the chat for signed-in users — same panel, in the page
flow instead of the corner. */
.help-page{display:flex; justify-content:center}
.help-panel.help-embed{
position:static; inset:auto;
width:min(660px, 100%);
height:min(72dvh, 680px);
box-shadow:0 10px 40px rgba(18,37,54,.14);
}
/* Person search on the shidduchim board */
.cc-psearch{display:flex; align-items:center; gap:8px; margin:14px 0 4px; flex-wrap:wrap}
.cc-psearch input[type="search"]{flex:1; min-width:240px; max-width:460px;
border:1px solid var(--line-strong); border-radius:var(--r);
padding:8px 12px; font:inherit; font-size:.92rem; background:var(--card)}
.cc-psearch input[type="search"]:focus{outline:none; border-color:var(--accent);
box-shadow:0 0 0 3px rgba(39,75,102,.12)}
.cc-psearch-note{font-size:.92rem; color:var(--ink-soft); margin:6px 0 2px}
/* ============================================================================
ADMIN · PERSON VIEW — the single place the admin checks up on anyone.
Ported 1:1 from the approved mockup (scratchpad admin-person/person.css);
ap- prefixed to keep clear of profile-view (pv-) and pane classes.
========================================================================== */
/* .pname / .shname mark person- and shadchan-name links across admin (the
universal every-name-is-a-door rule; qa/test_admin_person.py enforces the
hrefs). Deliberately UNSTYLED: names look exactly like the surface they sit
on always styled them — the admin didn't want a decorated line under every
name — and clickability shows the way it does everywhere else on the site. */
/* ------------------------------------------------------------- band */
.ap-band .ap-crumb{display:inline-flex; align-items:center; gap:7px;
color:var(--dark-muted); text-decoration:none; font-size:.84rem}
.ap-band .ap-crumb:hover{color:var(--dark-ink)}
.ap-band .ap-crumb::before{content:"‹"; font-size:1.05rem; line-height:1}
.ap-band .dh-eyebrow{margin-top:14px}
.ap-name{margin:4px 0 0; font-family:'Newsreader',Georgia,serif; font-weight:500;
font-size:clamp(1.7rem, 6vw, 2.15rem); line-height:1.12; letter-spacing:-.01em}
.ap-name small{font-family:'Hanken Grotesk',system-ui,sans-serif; font-weight:400;
font-size:.55em; color:var(--dark-muted); letter-spacing:0; margin-inline-start:.35em}
.ap-band-pills{margin-top:10px; display:flex; flex-wrap:wrap; gap:6px}
.ap-band-open{margin:12px 0 0; font-size:.84rem}
.ap-band-open a{color:var(--dark-muted); text-decoration:none;
border-bottom:1px solid var(--dark-line); padding-bottom:1px}
.ap-band-open a:hover{color:var(--dark-ink); border-bottom-color:var(--dark-muted)}
/* ------------------------------------------------------------ pills */
.ppill{display:inline-flex; align-items:center; gap:5px; padding:3px 9px;
border-radius:var(--r-xs); font-size:.72rem; font-weight:600;
letter-spacing:.02em; border:1px solid transparent; white-space:nowrap}
.ppill.ok{background:var(--ok-bg); color:var(--ok); border-color:#cfe2d5}
.ppill.warn{background:var(--warn-bg); color:var(--warn); border-color:#ecd9b4}
.ppill.gold{background:var(--gold-bg); color:var(--gold-ink); border-color:var(--gold-soft)}
.ppill.mut{background:var(--bg-soft); color:var(--muted); border-color:var(--line)}
.ppill.danger{background:var(--danger-bg); color:var(--danger); border-color:#eccfcb}
.ap-band .ppill.ok{background:rgba(47,107,74,.28); color:#cfe6d8; border-color:rgba(207,230,216,.25)}
.ap-band .ppill.gold{background:rgba(168,134,46,.22); color:var(--gold-soft); border-color:rgba(220,201,143,.4)}
.ap-band .ppill.warn{background:rgba(138,90,22,.3); color:#ecd9b4; border-color:rgba(236,217,180,.35)}
.ap-band .ppill.mut{background:rgba(255,255,255,.07); color:var(--dark-muted); border-color:var(--dark-line)}
/* ----------------------------------------------------------- layout */
.ap-main{max-width:860px; margin:0 auto}
.ap-main .room{margin-bottom:14px}
.ap-main .reb .rn{margin-inline-start:auto; letter-spacing:.02em; text-transform:none;
font-weight:500; color:var(--muted)}
.ap-main .reb{display:flex}
/* ------------------------------------------------------- who she is */
.ap-who{display:grid; grid-template-columns:104px 1fr; gap:16px}
.ap-who .pphoto,.ap-who .noimg{width:104px; height:128px; border-radius:var(--r);
object-fit:cover; border:1px solid var(--tint-line); cursor:pointer}
.ap-who .noimg{background:var(--tint); display:flex; align-items:center;
justify-content:center; font-family:'Newsreader',Georgia,serif; font-style:italic;
font-weight:500; font-size:2rem; color:var(--accent); margin:0}
.ap-facts{margin:0; display:grid; grid-template-columns:auto 1fr; gap:3px 14px;
font-size:.9rem; align-content:start}
.ap-facts dt{color:var(--muted); font-size:.78rem; font-weight:600;
letter-spacing:.04em; text-transform:uppercase; padding-top:2px}
.ap-facts dd{margin:0}
.ap-contact{grid-column:1 / -1; margin-top:2px; padding-top:13px;
border-top:1px solid var(--line);
display:flex; flex-wrap:wrap; gap:8px 22px; font-size:.92rem}
.ap-contact a{text-decoration:none; border-bottom:1px solid var(--tint-line);
padding-bottom:1px; color:var(--accent-700)}
.ap-contact a:hover{border-bottom-color:var(--accent-700)}
.ap-via{grid-column:1 / -1; background:var(--bg-soft);
border:1px solid var(--line); border-radius:var(--r); padding:10px 14px;
font-size:.88rem}
.ap-via .k{color:var(--muted); font-size:.76rem; font-weight:600;
letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:2px}
/* -------------------------------------------------------- right now */
.ap-state p{margin:0 0 10px; font-size:.95rem}
.ap-state p:last-child{margin-bottom:0}
.ap-state .quiet{color:var(--muted); font-size:.88rem}
.ap-cause{background:var(--warn-bg); border:1px solid #ecd9b4; border-radius:var(--r);
padding:13px 14px; margin:0 0 12px}
.ap-cause .cline{margin:0 0 10px; font-size:.95rem; line-height:1.5}
.ap-cause .cact{display:flex; align-items:center; flex-wrap:wrap; gap:10px}
.ap-cause .cact form{margin:0}
.ap-cause .note{font-size:.8rem; color:var(--warn); margin:0}
.ap-cause.calm{background:var(--ok-bg); border-color:#cfe2d5}
.ap-cause.calm .note{color:var(--ok)}
/* ---------------------------------------------------------- buttons */
.ap-btn{appearance:none; display:inline-flex; align-items:center; justify-content:center;
gap:8px; min-height:34px; padding:5px 12px; border-radius:var(--r-sm);
border:1px solid var(--accent-700); background:var(--accent);
color:#fff; font-weight:600; font-size:.82rem; cursor:pointer; text-decoration:none;
transition:background .15s var(--ease)}
.ap-btn:hover{background:var(--accent-700)}
.ap-btn.gold{background:var(--gold); border-color:#93752a}
.ap-btn.gold:hover{background:var(--gold-hover)}
.ap-btn.ghost{background:var(--card); color:var(--accent-700); border-color:var(--line-strong)}
.ap-btn.ghost:hover{background:var(--tint)}
.ap-btn.dangr{background:var(--card); color:var(--danger); border-color:#dcb6b1}
.ap-btn.dangr:hover{background:var(--danger-bg)}
/* ------------------------------------------------------- shidduchim */
.ap-shid{border:1px solid var(--line); border-radius:var(--r-lg); margin:0 0 12px;
overflow:hidden; background:var(--card)}
.ap-shid.live{border-color:var(--gold-soft)}
.ap-shid-head{padding:13px 14px 12px; display:flex; align-items:flex-start; gap:10px;
flex-wrap:wrap}
.ap-shid.live .ap-shid-head{background:var(--gold-bg)}
.ap-shid-pair{font-family:'Newsreader',Georgia,serif; font-weight:500; font-size:1.02rem;
margin:0; line-height:1.3}
.ap-shid-pair .amp{color:var(--gold); font-style:italic; padding:0 2px}
.ap-shid-sub{flex-basis:100%; margin:2px 0 0; font-size:.84rem; color:var(--ink-soft)}
.ap-shid-sub .dot{color:var(--line-strong); padding:0 4px}
.ap-shid-head .ppill{margin-inline-start:auto}
.ap-shid-hist{border-top:1px solid var(--line)}
.ap-shid-hist summary{list-style:none; cursor:pointer; padding:10px 14px;
font-size:.82rem; font-weight:600; color:var(--muted); display:flex;
align-items:center; gap:8px}
.ap-shid-hist summary::-webkit-details-marker{display:none}
.ap-shid-hist summary::after{content:"+"; margin-inline-start:auto; font-size:1rem;
color:var(--line-strong)}
.ap-shid-hist[open] summary::after{content:"–"}
.ap-shid-hist summary:hover{color:var(--ink-soft)}
.ap-hist{margin:0; padding:2px 14px 14px; display:grid; gap:9px}
.ap-hl{display:grid; grid-template-columns:74px 1fr; gap:10px; font-size:.86rem}
.ap-hl time{color:var(--muted); font-size:.78rem; padding-top:2px; white-space:nowrap}
.ap-hl.auto p{margin:0; color:var(--muted)}
.ap-hl.note p{margin:0; font-family:'Newsreader',Georgia,serif; font-style:italic;
font-size:.95rem; color:var(--ink-soft)}
.ap-hl.note .by{display:block; font-family:'Hanken Grotesk',system-ui,sans-serif;
font-style:normal; font-size:.76rem; color:var(--muted); margin-top:2px}
.ap-shid-acts{border-top:1px solid var(--line); padding:10px 14px;
display:flex; flex-wrap:wrap; gap:8px; align-items:center; background:var(--card)}
.ap-shid-acts form{margin:0; display:flex; gap:8px; align-items:center; flex-wrap:wrap}
.ap-shid-acts select{min-height:34px; border:1px solid var(--line-strong);
border-radius:var(--r-sm); background:var(--card); font-size:16px; padding:4px 8px;
color:var(--ink)}
.ap-close-fold{flex-basis:100%}
.ap-close-fold summary{list-style:none; cursor:pointer; display:inline-flex}
.ap-close-fold summary::-webkit-details-marker{display:none}
.ap-close-fold form{margin-top:8px}
.ap-close-fold input[type=text]{min-height:34px; border:1px solid var(--line-strong);
border-radius:var(--r-sm); padding:4px 10px; font-size:16px; flex:1 1 220px}
.ap-fold{border:1px solid var(--line); border-radius:var(--r-lg); background:var(--bg-soft)}
.ap-fold > summary{list-style:none; cursor:pointer; padding:12px 14px;
font-size:.86rem; font-weight:600; color:var(--ink-soft); display:flex; gap:8px}
.ap-fold > summary::-webkit-details-marker{display:none}
.ap-fold > summary::after{content:"+"; margin-inline-start:auto; color:var(--muted)}
.ap-fold[open] > summary::after{content:"–"}
.ap-fold .ap-shid{margin:0 12px 12px}
/* --------------------------------------------------------- activity */
.ap-act{margin:0; padding:0; display:grid; gap:11px; font-size:.93rem}
.ap-act li{list-style:none; position:relative; padding-inline-start:20px}
.ap-act li::before{content:""; position:absolute; inset-inline-start:2px; top:8px;
width:7px; height:7px; border-radius:50%; background:var(--tint-line)}
.ap-act li.gold::before{background:var(--gold)}
.ap-act .sub{display:block; color:var(--muted); font-size:.82rem}
/* --------------------------------------------------------- feedback */
.ap-fb{display:grid; gap:8px}
.ap-fbrow{display:block; border:1px solid var(--line); border-radius:var(--r);
padding:11px 14px; text-decoration:none; color:inherit; background:var(--card);
transition:border-color .15s var(--ease)}
.ap-fbrow:hover{border-color:var(--tint-line)}
.ap-fbrow.needs{border-inline-start:3px solid var(--gold)}
.ap-fbq{margin:0; font-family:'Newsreader',Georgia,serif; font-style:italic;
font-size:.98rem; color:var(--ink-soft); line-height:1.4}
.ap-fbm{margin:4px 0 0; font-size:.78rem; color:var(--muted);
display:flex; gap:8px; align-items:center}
/* ---------------------------------------------------------- view-as */
.ap-seg{display:flex; border:1px solid var(--line-strong); border-radius:var(--r-sm);
overflow:hidden; width:100%; margin:0 0 14px}
.ap-seg button{flex:1; min-height:40px; border:0; background:var(--card); cursor:pointer;
font-size:.85rem; font-weight:600; color:var(--muted)}
.ap-seg button + button{border-inline-start:1px solid var(--line-strong)}
.ap-seg button.on{background:var(--accent); color:#fff}
.ap-prev{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.ap-prev-card{padding:16px; display:grid; grid-template-columns:88px 1fr; gap:14px}
.ap-prev-card .pphoto,.ap-prev-card .noimg{width:88px; height:110px; font-size:1.6rem;
border-radius:var(--r); object-fit:cover; border:1px solid var(--tint-line)}
.ap-prev-card .noimg{background:var(--tint); display:flex; align-items:center;
justify-content:center; font-family:'Newsreader',Georgia,serif; font-style:italic;
color:var(--accent); margin:0}
.ap-prev-card h3{margin:0 0 2px; font-family:'Newsreader',Georgia,serif; font-weight:500;
font-size:1.1rem}
.ap-prev-card p{margin:0 0 4px; font-size:.86rem; color:var(--ink-soft)}
.ap-prev-about{grid-column:1/-1; font-family:'Newsreader',Georgia,serif; font-size:.95rem;
color:var(--ink-soft); font-style:italic; margin:0; line-height:1.5}
.ap-prev-refs{grid-column:1/-1; margin:2px 0 0; padding-top:10px;
border-top:1px dashed var(--line); font-size:.84rem}
.ap-prev-refs .k{color:var(--muted); font-size:.72rem; font-weight:600;
letter-spacing:.06em; text-transform:uppercase; display:block; margin-bottom:3px}
.ap-prev-refs.hiddenrefs{color:var(--muted); font-style:italic}
.ap-prev-note{border-top:1px solid var(--line); background:var(--bg-soft);
padding:9px 14px; margin:0; font-size:.8rem; color:var(--muted)}
.ap-prev-note b{color:var(--ink-soft)}
.ap-resume-link{margin:12px 0 0; font-size:.88rem}
.ap-seg button[hidden],.ap-prev-refs[hidden]{display:none !important}
/* ----------------------------------------------------------- actions */
.ap-agrid{display:grid; gap:8px}
.ap-arow{display:flex; align-items:center; gap:12px; min-height:48px;
border:1px solid var(--line); border-radius:var(--r); background:var(--card);
padding:10px 14px; font-size:.9rem; font-weight:600; color:var(--accent-700);
text-decoration:none; cursor:pointer; text-align:start; width:100%;
transition:border-color .15s var(--ease), background .15s var(--ease)}
.ap-arow:hover{border-color:var(--tint-line); background:var(--tint)}
.ap-arow small{font-weight:400; color:var(--muted); margin-inline-start:auto;
text-align:end; font-size:.78rem}
.ap-agrid form{margin:0; display:contents}
.ap-agrid .msg-wrap{border:1px solid var(--line); border-radius:var(--r);
background:var(--card); padding:0}
.ap-agrid .msg-wrap > summary{display:flex; align-items:center; gap:12px;
min-height:48px; padding:10px 14px; font-size:.9rem; font-weight:600;
color:var(--accent-700); cursor:pointer; list-style:none}
.ap-agrid .msg-wrap > summary::-webkit-details-marker{display:none}
.ap-agrid .msg-wrap > summary small{font-weight:400; color:var(--muted);
margin-inline-start:auto; font-size:.78rem}
.ap-agrid .msg-box{padding:0 14px 14px}
/* ------------------------------------------------------- danger zone */
.ap-danger{border-color:#eccfcb; background:#fdf7f6}
.ap-danger .reb{color:var(--danger)}
.ap-danger .reb::before{background:var(--danger)}
.ap-danger p.dz{margin:0 0 14px; font-size:.86rem; color:var(--muted)}
.ap-danger .dz-acts{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
.ap-danger form{margin:0}
/* ---------------------------------------------------------- desktop */
@media (min-width:760px){
.ap-two{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:start}
.ap-two .room{margin:0}
.ap-who{grid-template-columns:120px 1fr}
.ap-danger .dz-acts{flex-direction:row}
}