/* ============================================================
   yancher.co.il — מדריך שמאי מקרקעין
   Layer on top of the site's design tokens (assets/style.css)
   ============================================================ */

/* height of the site header (.hdr in assets/style.css: sticky, top:0, z-index:60,
   min-height:70px + 1px border) — what sticky table headers have to clear */
:root{--hdr-h:71px}

/* ---------- breadcrumbs ---------- */
.crumbs{background:var(--card);border-bottom:1px solid var(--stone);font-size:14px;color:var(--ink-3)}
.crumbs .wrap{display:flex;flex-wrap:wrap;gap:8px;align-items:center;padding-block:11px}
.crumbs a{color:var(--ink-2);text-decoration:none}
.crumbs a:hover{color:var(--marker);text-decoration:underline}
.crumbs .sep{color:var(--measure)}

/* ---------- page head ---------- */
.phead{background:var(--card);border-bottom:1px solid var(--stone)}
.phead .wrap{padding-block:clamp(30px,5vw,54px)}
.phead h1{max-width:22ch}
.phead .lede{max-width:62ch;margin-top:14px}
.phead__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pill{
  font-family:var(--f-mono);font-size:12px;
  background:var(--steel-tint);color:var(--steel);border:1px solid #D5E2E5;
  border-radius:999px;padding:5px 12px;white-space:nowrap;
}
/* tracking is a Latin device (see .fld label above): on Hebrew it only pulls
   the letters apart, so it is kept for text marked as another language */
.pill:not(:lang(he)){letter-spacing:.04em}
.pill--marker{background:#FAEEE8;color:var(--marker);border-color:#F0D6C9}
.pill--muted{background:var(--stone-2);color:var(--ink-2);border-color:var(--stone)}

/* ---------- filter bar ---------- */
.filters{
  background:var(--card);border:1px solid var(--stone);border-radius:12px;
  padding:16px;display:grid;gap:12px;
  grid-template-columns:minmax(220px,1.4fr) repeat(auto-fit,minmax(150px,1fr));
  align-items:end;box-shadow:0 1px 0 rgba(21,25,28,.03);
}
.fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.fld label{font-family:var(--f-mono);font-size:11px;color:var(--ink-3)}
/* the mono eyebrow treatment (tracking + caps) is a Latin/numeric device: on Hebrew
   uppercase does nothing and the tracking pulls the letters apart. Keep it for any
   label explicitly marked as another language; the page itself is lang="he". */
.fld label:not(:lang(he)){letter-spacing:.12em;text-transform:uppercase}
.fld input,.fld select{
  font-family:var(--f-body);font-size:16px;color:var(--ink);background:var(--paper);
  border:1px solid var(--stone);border-radius:8px;padding:11px 12px;width:100%;
  appearance:none;-webkit-appearance:none;
}
.fld select{background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:left 14px top 51%,left 9px top 51%;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.fld input:focus,.fld select:focus{outline:2px solid var(--marker);outline-offset:1px;border-color:transparent}
.filters__act{display:flex;gap:8px;align-items:center}
.count{font-family:var(--f-mono);font-size:13px;color:var(--ink-3);white-space:nowrap}
.lnk-reset{background:none;border:0;font-family:var(--f-body);font-size:14px;color:var(--steel);cursor:pointer;text-decoration:underline;padding:0}
.lnk-reset:hover{color:var(--marker)}

/* ---------- results table ---------- */
/* Any overflow value other than `visible` here makes .tbl-wrap the scrollport for
   the sticky thead below — and .tbl-wrap never scrolls vertically, so the header
   would scroll away with the page. The horizontal scroll is therefore kept only
   while it can actually be needed: from 760px up the content column
   (min(1120px, 100vw - 2*var(--gut))) is wider than the widest table, so the
   scroll container is dropped and the header sticks to the viewport instead. */
.tbl-wrap{overflow-x:auto;border:1px solid var(--stone);border-radius:12px;background:var(--card);margin-top:20px}
table.tbl{width:100%;border-collapse:collapse;font-size:15.5px;min-width:640px}
table.tbl th,table.tbl td{padding:13px 16px;text-align:right;border-bottom:1px solid var(--stone-2);vertical-align:top}
table.tbl thead th{
  font-family:var(--f-mono);font-size:11.5px;
  color:var(--ink-3);font-weight:500;background:var(--stone-2);border-bottom:1px solid var(--stone);
  /* stops under the site header; z-index stays well below .hdr's 60 so the
     header paints over it */
  position:sticky;top:var(--hdr-h);z-index:2;white-space:nowrap;
}
table.tbl thead th:not(:lang(he)){letter-spacing:.1em;text-transform:uppercase}

@media (min-width:760px){
  .tbl-wrap{overflow-x:visible}
  /* the wrapper no longer clips, so the corner cells carry the radius themselves */
  table.tbl:not(.tariff) thead th:first-child{border-start-start-radius:11px}
  table.tbl:not(.tariff) thead th:last-child{border-start-end-radius:11px}
  table.tbl tbody tr:last-child td:first-child{border-end-start-radius:11px}
  table.tbl tbody tr:last-child td:last-child{border-end-end-radius:11px}
}
table.tbl thead th.sortable{cursor:pointer;user-select:none}
table.tbl thead th.sortable:hover{color:var(--marker)}
table.tbl thead th .arr{opacity:.35;font-size:10px;margin-inline-start:4px}
table.tbl thead th[aria-sort] .arr{opacity:1;color:var(--marker)}
table.tbl tbody tr:hover{background:var(--steel-tint)}
table.tbl tbody tr:last-child td{border-bottom:0}
table.tbl td.num{font-family:var(--f-mono);white-space:nowrap;font-size:14px}
.t-name{font-weight:600;color:var(--ink);text-decoration:none}
.t-name:hover{color:var(--marker)}
.t-sub{display:block;font-size:13px;color:var(--ink-3);margin-top:2px}
.chips{display:flex;flex-wrap:wrap;gap:5px}
.chip{font-size:12.5px;background:var(--stone-2);border:1px solid var(--stone);border-radius:6px;padding:2px 8px;color:var(--ink-2);white-space:nowrap}
.chip--bank{background:var(--steel-tint);border-color:#D5E2E5;color:var(--steel)}
.empty{padding:44px 20px;text-align:center;color:var(--ink-3)}

/* ---------- card grid ---------- */
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.card{
  background:var(--card);border:1px solid var(--stone);border-radius:12px;padding:20px;
  text-decoration:none;color:inherit;display:block;transition:border-color .18s var(--ease),transform .18s var(--ease);
}
a.card:hover{border-color:var(--steel-2);transform:translateY(-2px)}
.card h3{margin-bottom:6px}
.card p{margin:0;font-size:14.5px;color:var(--ink-2)}
.card__n{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);display:block;margin-top:10px}

/* ---------- gated block ---------- */
.gate{
  border:1px dashed #CBBBA9;background:#FDF8F3;border-radius:12px;padding:20px;margin-top:8px;
}
.gate h4{font-family:var(--f-display);font-size:19px;font-weight:500;margin:0 0 6px}
.gate p{font-size:14.5px;color:var(--ink-2);margin:0 0 14px}
.gate .blur{filter:blur(4.5px);user-select:none;pointer-events:none;font-family:var(--f-mono);color:var(--ink-3)}
.gate form{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));align-items:end}
.gate .note{font-size:12.5px;color:var(--ink-3);margin:10px 0 0;grid-column:1/-1}
.gate .msg{grid-column:1/-1;font-size:14px;margin:0}
.gate .msg--err{color:#A33B22}
.gate .msg--ok{color:#1F6B4F}
.revealed{background:var(--card);border:1px solid var(--stone);border-radius:12px;padding:20px}
.revealed dl{display:grid;grid-template-columns:auto 1fr;gap:8px 16px;margin:0;font-size:15px}
.revealed dt{font-family:var(--f-mono);font-size:12px;color:var(--ink-3);padding-top:3px}
.revealed dt:not(:lang(he)){letter-spacing:.06em;text-transform:uppercase}
.revealed dd{margin:0}

/* ---------- tariff table ---------- */
.tariff{margin-top:8px}
.tariff caption{text-align:right;font-family:var(--f-mono);font-size:12px;
  color:var(--ink-3);padding-bottom:10px}
.tariff caption:not(:lang(he)){letter-spacing:.08em;text-transform:uppercase}
.tariff td.num{font-size:15px;font-weight:500;color:var(--ink)}
.src{font-size:13px;color:var(--ink-3);margin-top:12px}
.src a{color:var(--ink-3)}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--f-body);font-size:15.5px;font-weight:600;
  padding:12px 22px;border-radius:8px;text-decoration:none;border:1px solid transparent;cursor:pointer;
  transition:background .18s var(--ease),color .18s var(--ease),border-color .18s var(--ease);
}
.btn--marker{background:var(--marker);color:#fff}
.btn--marker:hover{background:#A8481F;color:#fff}
.btn--steel{background:var(--steel);color:#fff}
.btn--steel:hover{background:var(--steel-2);color:#fff}
.btn--ghost{background:transparent;color:#EDF2F3;border-color:rgba(237,242,243,.4)}
.btn--ghost:hover{background:rgba(237,242,243,.1);color:#fff}
.btn--sm{font-size:14px;padding:8px 14px}
.btn--out{background:transparent;color:var(--steel);border-color:var(--stone)}
.btn--out:hover{border-color:var(--steel-2);color:var(--marker)}

.cta-band__acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- prose ---------- */
.prose{max-width:70ch}
.prose h2{margin-top:var(--s5)}
.prose h3{margin-top:var(--s4);margin-bottom:8px}
.prose ul{padding-inline-start:1.1em;margin:0 0 1.05em}
.prose li{margin-bottom:.4em}
/* square corners on the striped (inline-start) side in both directions */
.notice{background:var(--stone-2);border-inline-start:3px solid var(--measure);
  border-start-start-radius:0;border-end-start-radius:0;
  border-start-end-radius:8px;border-end-end-radius:8px;
  padding:14px 18px;font-size:14.5px;color:var(--ink-2);margin:var(--s3) 0}

/* ---------- faq ---------- */
.faq details{border-bottom:1px solid var(--stone);padding:16px 0}
.faq summary{font-family:var(--f-display);font-size:19px;font-weight:500;cursor:pointer;list-style:none;
  display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-family:var(--f-mono);color:var(--marker);font-size:20px;flex:0 0 auto}
.faq details[open] summary::after{content:"–"}
.faq details p{margin:12px 0 0;color:var(--ink-2)}

/* ---------- small screens ---------- */
@media (max-width:640px){
  .filters{grid-template-columns:1fr}
  table.tbl{font-size:14.5px;min-width:520px}
  table.tbl th,table.tbl td{padding:11px 12px}
  .revealed dl{grid-template-columns:1fr;gap:2px 0}
  .revealed dt{padding-top:10px}
}
/* ---------- phones: appraiser results as cards ---------- */
/* At 390px the four-column appraiser table (min-width:640px) can only be read by
   scrolling sideways. Below 560px each row becomes one block instead. Scoped by
   the filter-bar id so the three-column register table on reshima.html (#fr),
   which reads fine as a table, is left alone. */
@media (max-width:560px){
  .tbl[data-filters]:not([data-filters=fr]){display:block;min-width:0;font-size:15px}
  /* the head row becomes a sort strip: without it the sort controls would be gone
     on phones. Columns that cannot be sorted carry no information here. */
  .tbl[data-filters]:not([data-filters=fr]) thead{display:block}
  .tbl[data-filters]:not([data-filters=fr]) thead tr{
    display:flex;flex-wrap:wrap;gap:6px 18px;padding:9px 16px;
    background:var(--stone-2);border-bottom:1px solid var(--stone);
  }
  .tbl[data-filters]:not([data-filters=fr]) thead th{
    position:static;padding:5px 0;border:0;background:none;
  }
  .tbl[data-filters]:not([data-filters=fr]) thead th:not(.sortable){display:none}
  .tbl[data-filters]:not([data-filters=fr]) tbody{display:block}
  /* :not([hidden]) — an author `display` would otherwise beat the UA rule that
     hides the rows the filter/limit turned off */
  .tbl[data-filters]:not([data-filters=fr]) tbody tr:not([hidden]){display:block}
  .tbl[data-filters]:not([data-filters=fr]) tbody tr{
    padding:14px 16px;border-bottom:1px solid var(--stone-2);
  }
  .tbl[data-filters]:not([data-filters=fr]) tbody tr:last-child{border-bottom:0}
  .tbl[data-filters]:not([data-filters=fr]) tbody td{display:block;padding:0;border:0}
  .tbl[data-filters]:not([data-filters=fr]) tbody td+td{margin-top:9px}
  .tbl[data-filters]:not([data-filters=fr]) .t-name{font-size:17px;line-height:1.55}
  .tbl[data-filters]:not([data-filters=fr]) .t-sub{margin-top:1px}
  /* the bare number is the one cell that is unreadable without its column head */
  .tbl[data-filters]:not([data-filters=fr]) td.num{font-size:13px;color:var(--ink-3)}
  .tbl[data-filters]:not([data-filters=fr]) td.num::before{content:"אזכורים · "}
}

/* The register table is three short columns — name · licence · city — and the
   640/520px floor above is sized for the four-column appraiser tables. Lifting
   it lets the site's most-used table fit the content column instead of
   scrolling sideways; the long names wrap rather than widen the row. The floor
   goes as soon as the wrapper can be narrower than it (.tbl-wrap stops
   scrolling at 760px), not only on phones. */
@media (max-width:760px){
  .tbl[data-filters=fr]{min-width:0}
}
@media (max-width:560px){
  .tbl[data-filters=fr]{font-size:15px}
  .tbl[data-filters=fr] th,.tbl[data-filters=fr] td{padding:10px 8px}
  .tbl[data-filters=fr] thead th{font-size:11px;white-space:normal}
  .tbl[data-filters=fr] td.num{font-size:13.5px}
  .tbl[data-filters=fr] .t-name{overflow-wrap:anywhere}
}

@media print{.hdr,.ftr,.cta-band,.filters,.crumbs{display:none}}

/* ---------- appraisal-fee calculator (mechshevon.html) -------------------
   Additive: every selector below is scoped to #calc or a .calc-* class that
   exists on no other page. ---------------------------------------------- */
.calc__form{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  align-items:end;background:var(--card);border:1px solid var(--stone);
  border-radius:12px;padding:20px;
}
.calc__form .fld--wide{grid-column:1/-1}
.calc__checks{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:10px 26px;
  border-top:1px solid var(--stone-2);padding-top:16px}
.calc__check{display:flex;gap:9px;align-items:flex-start;font-size:15px;cursor:pointer;max-width:44ch}
.calc__check input{margin:3px 0 0;accent-color:var(--marker);width:17px;height:17px;flex:none}
.calc__check span small{display:block;font-size:12.5px;color:var(--ink-3);margin-top:2px}
.calc__note{grid-column:1/-1;font-size:13px;color:var(--ink-3);margin:0}

.calc__head{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
  justify-content:space-between;margin-top:26px}
.calc__head h3{margin:0;font-size:19px}
.calc__basis{font-family:var(--f-mono);font-size:12px;color:var(--ink-3)}

table.calc-tbl{min-width:720px}
table.calc-tbl td.num{font-size:15px}
tr.calc-row--best{background:#FAEEE8}
tr.calc-row--best:hover{background:#F6E4DA}
.calc-bank{font-weight:600}
.calc-bank a{text-decoration:none;color:var(--steel)}
.calc-bank a:hover{color:var(--marker);text-decoration:underline}
.calc-sub{display:block;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);margin-top:3px}
.calc-fee{font-family:var(--f-mono);font-size:17px;font-weight:600;color:var(--ink);white-space:nowrap}
.calc-fee--soft{font-size:14px;font-weight:400;color:var(--ink-2);white-space:normal}
.calc-why{list-style:none;padding:0;margin:0;font-size:13.5px;color:var(--ink-2);max-width:46ch}
.calc-why li{margin-bottom:5px;padding-inline-start:13px;position:relative}
.calc-why li::before{content:"";position:absolute;inset-inline-start:0;top:8px;
  width:5px;height:5px;border-radius:50%;background:var(--measure)}
.calc-why li.is-off::before{background:var(--stone)}
.calc-why li.is-off{color:var(--ink-3)}
.calc-why b{font-family:var(--f-mono);font-weight:500;font-size:13px}
.badge{display:inline-block;font-family:var(--f-mono);font-size:11px;
  border-radius:999px;padding:2px 8px;border:1px solid var(--stone);
  background:var(--stone-2);color:var(--ink-2);margin-inline-start:6px;white-space:nowrap}
.badge:not(:lang(he)){letter-spacing:.04em}
.badge--best{background:var(--marker);border-color:var(--marker);color:#fff}
.badge--warn{background:#FDF3E7;border-color:#EBD3B2;color:#8A5A18}
details.calc-src{margin-top:9px}
details.calc-src summary{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-3);cursor:pointer}
details.calc-src summary:hover{color:var(--marker)}
details.calc-src blockquote{margin:8px 0 0;padding:9px 12px;border-inline-start:2px solid var(--stone);
  background:var(--stone-2);border-radius:0 6px 6px 0;font-size:13px;color:var(--ink-2)}
details.calc-src blockquote cite{display:block;font-family:var(--f-mono);font-size:11px;
  color:var(--ink-3);font-style:normal;margin-top:5px}
/* a refused value: the field says why, in the same red as the contact-gate
   error, and #calc-results repeats it in place of any stale price */
.calc-sub--err{color:#A33B22}
.calc-empty{padding:34px 20px;text-align:center;color:var(--ink-3)}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}