/* ============================================================
   נחשקת · Nechsheket — Tools & Guides layer
   Extends the site design system (site.css tokens) for the
   free marketing calculators + SEO guides. Dark-luxury, RTL.
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb { font-size: .85rem; color: var(--muted); margin-bottom: 1.1rem; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .5em; align-items: center; padding: 0; }
.breadcrumb a { color: var(--gold-2); }
.breadcrumb a:hover { color: var(--gold-soft); }
.breadcrumb li + li::before { content: "‹"; color: var(--dim); margin-inline-end: .5em; }
body[lang="en"] .breadcrumb li + li::before { content: "›"; }

/* ---------- Tool / guide hub cards ---------- */
.tool-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: var(--gap); }
@media (max-width: 780px){ .tool-grid { grid-template-columns: 1fr; } }

.tool-card {
  display: flex; flex-direction: column; gap: .8rem;
  background: linear-gradient(180deg,var(--card),var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(1.5rem,1rem + 1.6vw,2.1rem);
  box-shadow: var(--shadow-sm);
  transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
  position: relative; overflow: hidden;
}
.tool-card:hover { transform: translateY(-4px); border-color: rgba(201,162,75,.45); box-shadow: var(--shadow); }
.tool-card .tool-ic {
  width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center;
  background: rgba(201,162,75,.08); border: 1px solid var(--line);
  color: var(--gold-2); font-size: 1.5rem;
}
.tool-card h3 { font-size: 1.3rem; }
.tool-card p { color: var(--muted); font-size: .98rem; flex: 1; }
.tool-card .tool-link { color: var(--gold-soft); font-weight: 600; font-size: .95rem; margin-top: .3rem; }
.tool-card .tool-link::after { content: " ←"; }
body[lang="en"] .tool-card .tool-link::after { content: " →"; }
.tool-card.soon { opacity: .6; }
.tool-card.soon .tool-link { color: var(--muted); }
.tool-card .tag {
  position: absolute; top: 1rem; inset-inline-end: 1rem;
  font-size: .68rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--on-gold); background: var(--foil-flat); padding: .3em .7em; border-radius: var(--r-pill);
}
.tool-card .tag.rose { background: linear-gradient(120deg,var(--rose),var(--rose-2)); color: var(--white); }

/* ---------- Calculator shell ---------- */
.calc { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.2rem,1rem + 2vw,2.4rem); align-items: start; }
@media (max-width: 900px){ .calc { grid-template-columns: 1fr; } }

.calc-panel {
  background: linear-gradient(180deg,var(--card),var(--bg-2));
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(1.4rem,1rem + 1.6vw,2.2rem);
  box-shadow: var(--shadow-sm);
}
.calc-panel h2 { font-size: clamp(1.3rem,1.1rem + .8vw,1.7rem); margin-bottom: .3rem; }
.calc-panel .panel-note { color: var(--muted); font-size: .92rem; margin-bottom: 1.6rem; }

/* result panel sticks while scrolling on desktop */
@media (min-width: 901px){ .calc-result-panel { position: sticky; top: 90px; } }
.calc-result-panel {
  background: linear-gradient(180deg,#1a1408,var(--bg-2));
  border: 1px solid var(--gold); border-radius: var(--r-lg);
  padding: clamp(1.4rem,1rem + 1.6vw,2.2rem);
  box-shadow: var(--glow-gold);
}

/* ---------- Calculator fields ---------- */
.calc-field { display: grid; gap: .5rem; margin-bottom: 1.5rem; }
.calc-field:last-of-type { margin-bottom: 0; }
.calc-field .lab { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; }
.calc-field .lab label { font-size: .95rem; color: var(--ink); font-weight: 600; }
.calc-field .lab .val {
  font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; color: var(--gold-soft);
  white-space: nowrap;
}
.calc-field .hint { font-size: .8rem; color: var(--dim); }

/* number input with unit */
.num-wrap { position: relative; display: flex; align-items: center; }
.num-wrap input {
  width: 100%; padding: .8em 1em; border-radius: var(--r-sm);
  background: var(--bg-2); border: 1px solid var(--line); color: var(--ink);
  font-size: 1.05rem; font-weight: 600; transition: border-color .25s, box-shadow .25s;
}
.num-wrap input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,75,.14); }
.num-wrap .unit { position: absolute; inset-inline-start: 1em; color: var(--muted); font-size: .95rem; pointer-events: none; }
.num-wrap.has-unit input { padding-inline-start: 2.4em; }

/* range slider (gold) */
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: linear-gradient(90deg,var(--gold) 0%,var(--gold) var(--fill,50%),var(--bg-3) var(--fill,50%),var(--bg-3) 100%);
  outline: none; margin: .3rem 0; cursor: pointer; }
.range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--foil-flat); border: 2px solid #1a1408; box-shadow: var(--glow-gold), 0 2px 6px rgba(0,0,0,.6); cursor: pointer; }
.range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--gold-2); border: 2px solid #1a1408; box-shadow: var(--glow-gold); cursor: pointer; }

/* segmented toggle (e.g. mode switch) */
.seg { display: inline-flex; background: var(--bg-2); border: 1px solid var(--line); border-radius: var(--r-pill); padding: 4px; gap: 4px; }
.seg button { padding: .5em 1.1em; border-radius: var(--r-pill); font-size: .9rem; font-weight: 600; color: var(--muted); transition: .2s; }
.seg button.on { background: var(--foil-flat); color: var(--on-gold); }

/* ---------- Result display ---------- */
.result-eyebrow { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-2); font-weight: 700; }
.result-big { font-family: var(--font-display); font-weight: 800; line-height: 1; margin: .5rem 0 .2rem;
  font-size: clamp(2.6rem,1.8rem + 4vw,4.2rem); }
.result-big .cur { font-size: .5em; color: var(--gold-2); font-weight: 700; }
.result-sub { color: var(--ink-2); font-size: 1rem; }

.result-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; margin: 1.6rem 0; }
.result-stats .rs { background: var(--bg-2); padding: 1.1rem 1rem; text-align: center; }
.result-stats .rs b { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 800; color: var(--gold-soft); }
.result-stats .rs span { font-size: .8rem; color: var(--muted); }

/* score gauge (0-100 diagnostics) */
.gauge { display: grid; place-items: center; gap: 1rem; text-align: center; }
.gauge svg { width: min(220px,60%); height: auto; transform: rotate(-90deg); }
.gauge .track { fill: none; stroke: var(--bg-3); stroke-width: 14; }
.gauge .fill { fill: none; stroke: url(#goldgrad); stroke-width: 14; stroke-linecap: round;
  transition: stroke-dashoffset 1s var(--ease); }
.gauge-num { font-family: var(--font-display); font-weight: 800; font-size: 3.2rem; line-height: 1; }
.gauge-label { font-size: .95rem; color: var(--gold-soft); font-weight: 600; letter-spacing: .04em; }

/* pillar / breakdown bars */
.bars { display: grid; gap: 1rem; margin: 1.4rem 0; }
.bar-row .bar-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .35rem; }
.bar-row .bar-top b { color: var(--ink); font-weight: 600; font-size: .95rem; }
.bar-row .bar-top span { color: var(--gold-soft); font-weight: 700; font-size: .9rem; }
.bar-track { height: 9px; border-radius: 999px; background: var(--bg-3); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--foil-flat); width: 0; transition: width .9s var(--ease); }
.bar-fill.low { background: linear-gradient(120deg,var(--rose),var(--rose-2)); }
.bar-fill.mid { background: linear-gradient(120deg,#B8823A,var(--gold-2)); }

/* funnel leak visualization */
.leaks { display: grid; gap: .7rem; margin: 1.4rem 0; }
.leak { display: grid; gap: .3rem; }
.leak-top { display: flex; justify-content: space-between; font-size: .9rem; }
.leak-top b { color: var(--ink); font-weight: 600; }
.leak-top span { color: var(--gold-soft); font-weight: 700; }
.leak-track { height: 30px; border-radius: var(--r-sm); background: var(--bg-3); overflow: hidden; position: relative; }
.leak-fill { height: 100%; background: linear-gradient(90deg,rgba(201,162,75,.5),rgba(201,162,75,.15)); transition: width .9s var(--ease); }
.leak.worst .leak-fill { background: linear-gradient(90deg,rgba(155,46,71,.6),rgba(155,46,71,.2)); }
.leak.worst .leak-top span { color: var(--rose-soft); }
.leak-flag { display: inline-block; margin-top: .3rem; font-size: .82rem; color: var(--rose-soft); font-weight: 600; }
.leak-flag::before { content: "⚠ "; }

/* result CTA (funnel to course) */
.result-cta { border-top: 1px solid var(--line); margin-top: 1.6rem; padding-top: 1.5rem; }
.result-cta p { font-size: .95rem; color: var(--ink-2); margin-bottom: 1rem; }
.result-cta .btn { width: 100%; }

/* empty state before first calc */
.result-empty { text-align: center; color: var(--muted); padding: 2rem 1rem; }
.result-empty .ic { font-size: 2.4rem; color: var(--gold-2); opacity: .7; margin-bottom: .6rem; }

/* email-my-result inline form */
.lead-inline { margin-top: 1.3rem; display: grid; gap: .7rem; }
.lead-inline .row { display: flex; gap: .6rem; }
.lead-inline input { flex: 1; padding: .75em 1em; border-radius: var(--r-sm); background: var(--bg-2);
  border: 1px solid var(--line); color: var(--ink); font-size: .98rem; }
.lead-inline input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,162,75,.14); }
.lead-inline .btn { flex: 0 0 auto; }
.lead-inline .form-note { font-size: .78rem; }
@media (max-width: 460px){ .lead-inline .row { flex-direction: column; } .lead-inline .btn { width: 100%; } }

/* share row */
.share-row { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; align-items: center; }
.share-row .share-lab { font-size: .85rem; color: var(--muted); }
.share-btn { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line); color: var(--gold-2); transition: .2s; }
.share-btn:hover { border-color: var(--gold); background: rgba(201,162,75,.06); color: var(--gold-soft); }
.share-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ---------- SEO explainer prose (below the tool) ---------- */
.prose { max-width: 74ch; margin-inline: auto; }
.prose h2 { font-size: clamp(1.4rem,1.15rem + 1vw,2rem); margin: 2.4rem 0 .8rem; color: var(--white); }
.prose h3 { font-size: clamp(1.15rem,1rem + .6vw,1.45rem); margin: 1.8rem 0 .6rem; color: var(--gold-soft); }
.prose p { margin-bottom: 1.1rem; color: var(--ink-2); }
.prose ul, .prose ol { margin: 0 0 1.2rem; padding-inline-start: 1.4rem; color: var(--ink-2); display: grid; gap: .5rem; }
.prose li { line-height: 1.7; }
.prose a { color: var(--gold-soft); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose .callout {
  border-inline-start: 3px solid var(--gold); background: rgba(201,162,75,.05);
  padding: 1.1rem 1.3rem; border-radius: var(--r-sm); margin: 1.6rem 0; color: var(--ink-2);
}
.prose .callout b { color: var(--gold-soft); }
.prose table { width: 100%; border-collapse: collapse; margin: 1.4rem 0; font-size: .95rem; }
.prose th, .prose td { border: 1px solid var(--line); padding: .7em .9em; text-align: start; }
.prose th { background: rgba(201,162,75,.06); color: var(--gold-soft); font-weight: 700; }

/* table wrapper for horizontal scroll on mobile */
.table-scroll { overflow-x: auto; }

/* article meta */
.article-meta { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; color: var(--muted); font-size: .88rem; margin-top: 1rem; }
.article-meta .dot { color: var(--dim); }

/* key-takeaways box */
.takeaways { background: linear-gradient(180deg,var(--card),var(--bg-2)); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.4rem 1.6rem; margin: 1.6rem 0; }
.takeaways h2 { font-size: 1.2rem !important; margin: 0 0 .8rem !important; color: var(--gold-soft) !important; }
.takeaways ul { margin: 0; }

/* related tool inline promo inside a guide */
.tool-promo {
  display: flex; flex-wrap: wrap; gap: 1.2rem; align-items: center; justify-content: space-between;
  background: linear-gradient(120deg,rgba(201,162,75,.10),rgba(201,162,75,.02));
  border: 1px solid var(--gold); border-radius: var(--r); padding: 1.4rem 1.6rem; margin: 2rem 0;
}
.tool-promo .tp-txt { flex: 1 1 260px; }
.tool-promo .tp-txt b { color: var(--gold-soft); font-family: var(--font-display); font-size: 1.2rem; display: block; margin-bottom: .3rem; }
.tool-promo .tp-txt span { color: var(--ink-2); font-size: .95rem; }

/* copy toast */
.toast { position: fixed; inset-block-end: 2rem; inset-inline: 0; margin-inline: auto; width: max-content;
  max-width: 90vw; background: var(--card-2); border: 1px solid var(--gold); color: var(--gold-soft);
  padding: .7em 1.3em; border-radius: var(--r-pill); box-shadow: var(--shadow); z-index: 120;
  opacity: 0; transform: translateY(12px); transition: .25s var(--ease); pointer-events: none; font-size: .92rem; }
.toast.show { opacity: 1; transform: none; }