/* ============================================================================
   PARDES — the winning direction's layer (Aug 2026 overhaul)
   ----------------------------------------------------------------------------
   A walled garden in late morning: Shir HaShirim's orchard, not a dating
   app's pastel. tokens.css already carries the palette; this file carries the
   ATMOSPHERE — morning light in the hero, the pomegranate sprig, organic
   hedge-arch shapes holding photos, small tender motion (petals of light,
   a sprig that sways a few degrees, nothing more).

   Loads LAST in the cascade, after features.css: everything here is a
   deliberate override of the navy-era treatments. Marketing pages are
   expressive; working surfaces stay calm and fast in the same language.
   ========================================================================== */

:root{
  --cream:#f8f7ef;
  --leaf-ink:#25382b;        /* deep garden green — the ink */
  --moss:#5c7350;
  --sage:#9fb192;
  --blossom:#c4715b;         /* pomegranate flower — the accent */
  --blossom-deep:#a25743;
  --sun:#e9c46a;
  --sky:#dfe9e2;
  --serif-c:'Marcellus','Frank Ruhl Libre',Georgia,'Noto Serif Hebrew',serif;
  --sans-c:'Work Sans','Assistant',system-ui,'Noto Sans Hebrew',sans-serif;
  /* the pomegranate sprig, drawn once */
  --sprig:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 160' fill='none' stroke='%235c7350' stroke-width='2.4' stroke-linecap='round'><path d='M60 152 C58 110 56 70 60 26'/><path d='M60 96 C42 88 32 74 30 56 C46 62 56 74 60 88'/><path d='M60 74 C76 66 86 52 88 34 C72 40 62 52 60 66'/><path d='M60 120 C48 116 40 108 38 96'/><path d='M60 118 C72 114 80 106 82 94'/><circle cx='60' cy='18' r='9' stroke='%23c4715b'/><path d='M56 10 L60 4 L64 10' stroke='%23c4715b'/></svg>");
}
[dir=rtl] body{--serif-c:'Frank Ruhl Libre',Georgia,'Noto Serif Hebrew',serif;
  --sans-c:'Assistant',system-ui,'Noto Sans Hebrew',sans-serif}
[dir=rtl] .nh-title, [dir=rtl] .nh-ptitle{font-weight:300}

/* ---------------------------------------------------------------- the nav:
   the dark-top era is over — the landing wears the same daylight as the rest */
body.dark-top .nav{background:rgba(248,247,239,.9); border-bottom:1px solid #e3e2d4;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
body.dark-top .nav .brand{color:var(--leaf-ink); font-family:var(--serif-c)}
body.dark-top .brand-rings{stroke:var(--blossom)}
body.dark-top .nav .brand .dot{color:var(--blossom)}
body.dark-top .nav-links a{color:#576853}
body.dark-top .lang-toggle{background:#fff; color:var(--moss); border-color:#d8dcc9}
body.dark-top .nav-toggle .bars, body.dark-top .nav-toggle .bars::before,
body.dark-top .nav-toggle .bars::after{background:var(--leaf-ink)}
/* the open hamburger panel: features.css paints it deep to 859px — cover the
   SAME range, or the 720-839px window gets sage links on a leaf-dark panel
   (the round-2 "buttons disappear" sighting) */
@media(max-width:859px){
  body.dark-top .nav-links{background:var(--card); border-color:var(--line)}
  body.dark-top .nav-links a{color:var(--ink-soft)}
  body.dark-top .nav-links a:hover{color:var(--leaf-ink); background:var(--tint)}
}

/* ---------------------------------------------------------------- the hero:
   morning light. A slow soft gradient wash, two drifting pools of sun and
   sage, and petals of light rising at whisper level. */
.nhero{
  color:var(--ink); overflow:hidden;
  background:
    radial-gradient(90% 70% at 12% 8%, rgba(233,196,106,.28), transparent 55%),
    radial-gradient(100% 80% at 92% 20%, rgba(159,177,146,.30), transparent 60%),
    radial-gradient(120% 90% at 50% 115%, rgba(196,113,91,.14), transparent 55%),
    linear-gradient(180deg, #fbfaf3, var(--cream) 60%, #f2f2e6);
}
@media (prefers-reduced-motion: no-preference){
  .nhero{background-size:190% 190%, 190% 190%, 160% 160%, 100% 100%;
    animation:morningC 26s ease-in-out infinite alternate}
  @keyframes morningC{
    from{background-position:0% 0%, 100% 0%, 50% 100%, 0 0}
    to{background-position:35% 25%, 65% 30%, 42% 82%, 0 0}}
}
/* petals of light, rising */
@media (prefers-reduced-motion: no-preference){
  .nhero::before{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background:
      radial-gradient(5px 5px at 12% 85%, rgba(233,196,106,.6), transparent 60%),
      radial-gradient(4px 4px at 34% 70%, rgba(196,113,91,.4), transparent 60%),
      radial-gradient(6px 6px at 58% 92%, rgba(159,177,146,.55), transparent 60%),
      radial-gradient(4px 4px at 76% 78%, rgba(233,196,106,.45), transparent 60%),
      radial-gradient(5px 5px at 90% 88%, rgba(196,113,91,.35), transparent 60%);
    animation:petalsC 18s linear infinite;
  }
  @keyframes petalsC{
    from{transform:translateY(12%); opacity:0}
    12%{opacity:1} 88%{opacity:1}
    to{transform:translateY(-58%); opacity:0}}
}
/* the sprig grows up the hero's edge and sways, gently */
.nhero::after{
  content:""; position:absolute; bottom:-8px; inset-inline-end:4%;
  width:110px; height:150px; pointer-events:none; z-index:0;
  background:var(--sprig) no-repeat center / contain; opacity:.5;
  transform-origin:bottom center;
}
[dir=rtl] .nhero::after{transform:scaleX(-1)}
@media (prefers-reduced-motion: no-preference){
  .nhero::after{animation:swayC 7s ease-in-out infinite alternate}
  @keyframes swayC{from{rotate:-2.5deg}to{rotate:2.5deg}}
  [dir=rtl] .nhero::after{animation:swayCr 7s ease-in-out infinite alternate}
  @keyframes swayCr{from{transform:scaleX(-1) rotate(2.5deg)}to{transform:scaleX(-1) rotate(-2.5deg)}}
}
.nh-mark{display:none}

.nh-eyebrow{color:var(--moss); letter-spacing:.24em}
.nh-eyebrow::before,.nh-eyebrow::after{background:var(--sage); opacity:1}
.nh-title{color:var(--leaf-ink)}
.nh-title em{color:var(--blossom); font-style:italic}
[dir=rtl] .nh-title em{font-style:normal}
.nh-lede{color:#4a5c48}
.nh-note{color:#75846f}
.nh-login{color:#75846f}
.nh-login a{color:var(--blossom-deep); font-weight:600; text-decoration-color:#dfb2a4}

/* the CTA: pomegranate blossom, fully round — the garden's one ripe thing */
.nh-btn, .btn-gold{
  background:var(--blossom); color:#fff8f2; border-radius:999px; font-weight:600;
  box-shadow:0 10px 26px rgba(196,113,91,.35);
  transition:transform .25s var(--ease), box-shadow .25s, background .2s;
}
.nh-btn:hover, .btn-gold:hover{background:var(--blossom-deep); transform:translateY(-2px);
  box-shadow:0 14px 32px rgba(196,113,91,.45)}

/* the proof card: a photo held in an organic hedge-arch shape.
   THE CUT-OFF FIX — the navy era bled the card -150px into the next band and
   let the toast hang below it with no reserved height; on a light hero with
   overflow:hidden that guillotines the toast. The card now lives fully inside
   the hero: no bleed, a real bottom margin that clears the toast, and the
   process band gives back its compensating padding. */
.nh-proof{margin:46px auto 108px; color:var(--ink)}
@media(min-width:960px){ .nh-proof{margin:26px auto 118px} }
.nh-card{
  background:#fffef9; border:1px solid #e6e4d4;
  border-radius:46% 46% 24px 24px / 34% 34% 24px 24px;
  box-shadow:0 24px 56px rgba(37,56,43,.14);
}
.nh-photo{border-radius:46% 46% 0 0 / 40% 40% 0 0; overflow:hidden; background:#e7e0ce}
.nh-body{padding-inline:20px}
.nh-name{color:var(--leaf-ink); font-family:var(--serif-c)}
.nh-meta{color:#6e7f68}
.nh-yes{background:var(--moss); color:#f4f7ef; border-radius:999px}
.nh-no{background:transparent; border:1px solid #d8dcc9; color:#6e7f68; border-radius:999px}
.nh-proof.play .nh-yes{box-shadow:0 0 0 3px #eef3ea}
.nh-toast{background:#fffef9; border:1px solid var(--sage); border-radius:20px;
  color:var(--leaf-ink); box-shadow:0 12px 30px rgba(37,56,43,.12)}
.nh-toast-h{color:var(--moss)}
@media (prefers-reduced-motion: no-preference){
  .nh-proof.play{animation:floatC 10s ease-in-out 1.2s infinite alternate}
  @keyframes floatC{from{transform:translateY(0)}to{transform:translateY(-8px)}}
}

/* ---- how it works: stepping stones in a soft clearing ---- */
.nh-process{background:#f1f2e7;
  padding-block:clamp(48px,7vw,72px) !important}
@media(min-width:960px){ .nh-process{padding-block-start:clamp(56px,8vw,84px) !important} }
.nh-peyebrow{color:var(--moss); letter-spacing:.22em}
.nh-ptitle{font-family:var(--serif-c); font-weight:400; color:var(--leaf-ink)}
.nh-psub{color:#5d6e58}
.nh-num{
  font-family:var(--serif-c); color:#fffef9; background:var(--moss);
  border:0; border-radius:50%; width:44px; height:44px;
  display:inline-grid; place-items:center; font-size:1.15rem; font-style:normal;
  box-shadow:0 6px 16px rgba(92,115,80,.3);
}
.nh-step h3{font-family:var(--serif-c); font-weight:400; color:var(--leaf-ink)}
.nh-step p{color:#5d6e58}
.nh-stag{color:var(--blossom-deep)}

.home-faq .faq, .nh-faqsec .faq{background:#fffef9; border:1px solid #e6e4d4; border-radius:18px}
.nh-faqsec .faq summary{font-weight:600; color:var(--leaf-ink)}
.nh-faqtitle{color:var(--leaf-ink)}
.nh-orn svg{stroke:var(--sage)}

/* the closing invitation: a clearing — sky-wash panel, round, the sprig again */
.nh-invitesec{background:transparent}
.nh-invite{
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(233,196,106,.25), transparent 55%),
    linear-gradient(160deg, var(--sky), #eef3ea);
  border:1px solid #d3ddd2; border-radius:32px; color:var(--leaf-ink);
  position:relative; overflow:hidden;
  box-shadow:0 22px 50px rgba(37,56,43,.12);
}
.nh-invite::after{
  content:""; position:absolute; inset:auto; border:0;
  bottom:-6px; inset-inline-end:14px;
  width:74px; height:100px; background:var(--sprig) no-repeat center / contain;
  opacity:.4; pointer-events:none;
}
[dir=rtl] .nh-invite::after{transform:scaleX(-1)}
.nh-invite h2, .nh-invite .nh-ptitle{font-family:var(--serif-c); font-weight:400; color:var(--leaf-ink)}
.nh-invite .nh-micro{color:#5d6e58}
.nh-trust{color:#5d6e58}
.foot{background:#eef0e3; color:#5d6e58; border-top:1px solid #dde0cd}
.foot-brand{color:var(--leaf-ink); font-family:var(--serif-c)}
.foot-brand .dot{color:var(--blossom)}
.foot-tag{color:#75846f}
.foot-h{color:#8a9a83}
.foot-links a{color:#4c6142}
.foot-links a:hover{color:var(--leaf-ink); text-decoration:underline}
.foot a{color:var(--moss)}

/* ============================================================ the suggestions
   The member's page as the garden path: light, unhurried, one person at a
   time in a living frame. */
.pg-matches .page-head{position:relative}
.pg-matches .page-head::after{
  content:""; position:absolute; top:0; inset-inline-end:0;
  width:64px; height:88px; background:var(--sprig) no-repeat center / contain;
  opacity:.3; pointer-events:none;
}
[dir=rtl] .pg-matches .page-head::after{transform:scaleX(-1)}
.pg-matches .page-head .eyebrow{color:var(--moss); letter-spacing:.22em}
.pg-matches .page-head h1{font-family:var(--serif-c); font-weight:400; color:var(--leaf-ink)}
.pg-matches .page-head .tod{color:var(--blossom)}
.pg-matches .ph-sub, .pg-matches .mt-vow{color:#5d6e58}

/* the match: two rings grown together — sun-washed, alive */
.mutual-card{
  background:
    radial-gradient(110% 100% at 15% 0%, rgba(233,196,106,.3), transparent 55%),
    #fffef9;
  border:1px solid var(--sage); border-radius:28px;
  box-shadow:0 18px 44px rgba(37,56,43,.14);
}
.mutual-card .mc-orn svg{stroke:var(--blossom)}
.mutual-card .mc-kicker{color:var(--blossom-deep); letter-spacing:.2em}
.mutual-card h3{font-family:var(--serif-c); font-weight:400; color:var(--leaf-ink)}
.mutual-card .meta{color:#5d6e58}

/* a suggestion: the portrait in the hedge arch, the name on a garden label */
.card.intro{
  background:#fffef9; border:1px solid #e6e4d4; border-radius:26px;
  box-shadow:0 3px 8px rgba(37,56,43,.05), 0 18px 40px rgba(37,56,43,.09);
  overflow:hidden;
  transition:transform .3s var(--ease), box-shadow .3s;
}
.card.intro:hover{transform:translateY(-3px);
  box-shadow:0 5px 12px rgba(37,56,43,.06), 0 26px 54px rgba(37,56,43,.13)}
.card.intro .photo img{border-radius:44% 44% 18px 18px / 30% 30% 18px 18px}
.card.intro .who-head h3{font-family:var(--serif-c); font-weight:400; color:var(--leaf-ink)}
.card.intro .facts{color:#6e7f68}
.card.intro .facts b{color:var(--moss); font-weight:700}
.card.intro .about{color:#41523f}
.card.intro .more{color:var(--blossom-deep); font-weight:600}
.card.intro .btn-yes{
  background:var(--blossom); color:#fff8f2; border:0; border-radius:999px; font-weight:600;
  box-shadow:0 8px 20px rgba(196,113,91,.3);
  transition:transform .2s, box-shadow .2s, background .2s;
}
.card.intro .btn-yes:hover{background:var(--blossom-deep); transform:translateY(-1px)}
.card.intro .btn-no{background:transparent; border:1px solid #d8dcc9; color:#6e7f68;
  border-radius:999px}

.empty.mt-caught{background:#fffef9; border:1px dashed var(--sage); border-radius:26px}
.empty.mt-caught svg{stroke:var(--moss)}

/* the tab bar, all seats: daylight glass, blossom for "you are here" */
.tabbar{background:rgba(248,247,239,.94); border-top:1px solid #e3e2d4;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px)}
.tabbar a{color:#75846f}
.tabbar a.on{color:var(--blossom-deep)}
.tab-badge{background:var(--blossom); color:#fff8f2}

/* the Alerts page's quiet messages row: present, not shouting */
.feed-row.feed-quiet{opacity:.75}
.feed-row.feed-quiet:hover{opacity:1}

/* calendar header actions sit together */
.cal-headacts{display:flex; gap:8px; align-items:center}

/* ============================================================================
   THE WORKING SURFACES — calm and fast, in the same garden language.
   Marketing pages above are expressive; below, Pardes shows only in the
   details: arch-shaped photos, moss and blossom accents, daylight grounds.
   ========================================================================== */

/* ---- the auth shell: one quiet card in the garden, every door alike ---- */
.form-page.narrow{border-radius:24px; border-color:var(--line);
  box-shadow:0 3px 8px rgba(37,56,43,.04), 0 18px 40px rgba(37,56,43,.07)}
.auth-rings i{border-color:var(--sage)}
.auth-rings i + i{border-color:var(--blossom)}

/* ---- the me-family: profile switcher and room tabs as ONE header band
   (finding 2, approved: mechanics kept, visually unified) ---- */
.ptab-wrap{background:var(--tint); border:1px solid var(--tint-line);
  border-radius:16px; padding:10px 12px}
.ptabs .ptab{border-radius:999px}
.ptabs .ptab.on{background:var(--accent); border-color:var(--accent)}
.me-tabs{background:var(--tint); border:1px solid var(--tint-line);
  border-radius:16px; padding:8px 10px; margin-top:10px}
.me-tab{border-radius:999px; border-color:transparent; background:transparent}
.me-tab:hover{border-color:var(--sage)}
.me-tab.on{background:var(--accent); border-color:var(--accent); color:#f4f7ef}

/* ---- the desk: the "needs you now" zone reads as one warm strip ---- */
.desk-msgs, .deskcal-ask, .deskcal-auto, .desk-bg-confirm{
  border-inline-start:3px solid var(--blossom);
  background:linear-gradient(90deg, rgba(233,196,106,.10), transparent 70%), var(--card);
  border-radius:0 14px 14px 0;
}
[dir=rtl] .desk-msgs, [dir=rtl] .deskcal-ask, [dir=rtl] .deskcal-auto,
[dir=rtl] .desk-bg-confirm{border-radius:14px 0 0 14px}
.unread-strip{border-radius:999px}
.deskcal > summary.queue-h{list-style-position:outside}
.sec-h.queue-h{font-family:var(--serif-c); font-weight:400; letter-spacing:0}

/* ---- the workbench: slots up top, the verdict as the centerpiece ---- */
.pair-form{background:var(--card); border:1px solid var(--line);
  border-radius:18px; padding:16px; box-shadow:var(--shadow-xs)}
.pair-amp{color:var(--blossom); font-family:var(--serif-c); font-size:1.4rem}
.pair-result{border-radius:22px; border-color:var(--sage)}
.pair-score .pair-n{color:var(--moss); font-family:var(--serif-c)}
.suggest-bar{border-radius:999px; border:1px solid var(--sage);
  background:rgba(255,254,249,.96); box-shadow:0 14px 34px rgba(37,56,43,.16)}

/* ---- the questionnaire: the same chat, in garden light ---- */
.qn-msg-a .qn-bub, .qn-row-a .qn-bub{background:var(--tint); border-color:var(--tint-line)}
.qn-opt.one:hover{border-color:var(--sage)}
.qn-opt.one:has(input:checked){border-color:var(--moss); background:var(--tint)}
.qn-fold > summary{font-family:var(--serif-c); font-weight:400}

/* ---- profiles: the portrait held in the hedge arch, everywhere ---- */
.photo img, .pp-photo img, .srow-photo img{border-radius:14px}
.profile-photos img{border-radius:22px 22px 14px 14px}
.decide-bar{border-radius:18px}
.decide-btns .btn-yes, .btn.btn-yes{background:var(--blossom); border-radius:999px}

/* ---- month calendar: today wears the blossom ---- */
.cal-cell.today .cal-dnum{background:var(--blossom); color:#fff8f2; border-radius:999px}
.cal-ev{border-radius:10px}

/* ---- admin: the deep leaf-ink band carries the office; pills stay soft ---- */
.ap-band .ap-name, .dhead2 .dh-title{font-family:var(--serif-c); font-weight:400}
.ppill{border-radius:999px}

/* the suggest bar rides ABOVE the shadchan tab bar, never under or over it */
@media(max-width:699px){body:has(.tabbar) .suggest-bar{bottom:80px}}

/* ============================================================================
   HOVER/FOCUS AUDIT (walkthrough round 1, item 1).
   The navy era's landing nav was DARK, so its hover states brighten text
   toward --dark-ink (near-white). Pardes made that nav daylight — those same
   hovers were painting near-white on cream and the labels vanished. Every
   dark-top nav control restates its hover in garden inks here. Controls on
   grounds that stayed deep (the desk/admin bands, lightbox, toasts) keep
   their brightening hovers on purpose.
   ========================================================================== */
body.dark-top .brand:hover{color:var(--accent-800)}
body.dark-top .nav-links a:hover{color:var(--leaf-ink); background:var(--tint)}
body.dark-top .nav-links a.on:hover{color:var(--leaf-ink)}
body.dark-top .lang-toggle:hover{color:var(--accent-700); background:var(--tint);
  border-color:var(--sage)}
body.dark-top .nav-toggle:hover{background:var(--tint)}
body.dark-top .bell:hover{background:var(--tint); color:var(--accent-700)}
body.dark-top .nav-menu a:hover{background:var(--tint); color:var(--leaf-ink)}
body.dark-top .nav-menu .menu-lang button:hover{background:var(--tint);
  color:var(--accent-700)}
/* keyboard focus must survive the same ground change */
body.dark-top .nav-links a:focus-visible, body.dark-top .lang-toggle:focus-visible,
body.dark-top .bell:focus-visible, body.dark-top .nav-toggle:focus-visible{
  outline:2px solid var(--moss); outline-offset:2px; color:var(--leaf-ink)}

/* ---- the two login doors, told apart at a glance (round 2) ----
   The member door stays the plain warm card. The shadchan door wears the
   working-tools dress: a moss shoulder, a small trade badge over the heading,
   moss rings instead of the blossom pair. */
.form-page.narrow.door-shadchan{border-top:4px solid var(--moss)}
.door-shadchan .auth-rings i{border-color:var(--moss)}
.door-shadchan .auth-rings i + i{border-color:var(--sage)}
.door-tag{display:inline-block; margin:0 0 6px; padding:3px 12px;
  font-size:.66rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:#f4f7ef; background:var(--moss); border-radius:999px}
[dir=rtl] .door-tag{letter-spacing:.05em}
.door-cross{border-top:1px solid var(--line); padding-top:12px; margin-top:14px}

/* ---- round-2 sighting: the REST states the audit missed ----
   The navy era's dark-top chrome also colors things at rest toward the old
   dark ground: the ACTIVE nav link (a.on) wore near-white — on the daylight
   nav that made "My desk" / "Admin" invisible on their own pages — and the
   hamburger dropdown kept its deep panel. Everything restated for daylight. */
body.dark-top .nav-links a.on{color:var(--leaf-ink)}
body.dark-top .nav-links a.on:hover{color:var(--leaf-ink)}
body.dark-top .bell{color:#576853}
body.dark-top .beta-tag{color:var(--blossom-deep); border-color:var(--line)}
body.dark-top .nav-menu{background:var(--card); border-color:var(--line)}
body.dark-top .nav-menu a{color:var(--ink-soft); border-color:var(--line)}
body.dark-top.nav-open .nav-toggle .bars{background:transparent}
body.dark-top .nav-menu .menu-lang button{color:var(--ink-soft)}