/*
  נכס+ — the shared design layer for every page that is not the listing page
  (15/9/2026, DECISIONS ו45).

  Every value below is taken from the owner's Claude Design handoff
  ("Property Listing.dc.html" and its README). The listing page carries the same
  values inline; this file exists so the other pages look like the same product
  without each one re-deriving a palette.

  Rules for anyone editing a page:
    * use these classes and tokens; do not invent colours, radii or sizes
    * Heebo for headings and numbers, Assistant for running text and labels
    * mobile first at 390px; wider screens only widen the column
*/
:root {
  --np-navy: #16294a;
  --np-body: #3f4a5e;
  --np-body-2: #4a5364;
  --np-body-3: #5c6473;
  /* The greys and the teal were darkened on 24/9 (DECISIONS ו169) because
     they did not reach 4.5:1 — the three faint greys measured 2.19 to 3.44 at
     worst, and white on the old teal measured 4.45. The hue is unchanged and
     the hierarchy now runs the right way round: the SMALLER the type, the
     darker the grey. The three faint tokens collapsed onto one value, because
     three greys inside 10% of each other were never a hierarchy, only three
     ways to fail the same test. Measured by tests/test_contrast.py.

     The BRAND teal is still #14867a, and it stays there — in the mark
     (assets/brand/favicon.svg) and in the mint robot, which is where it was
     sampled from and which no stylesheet can recolour anyway. #0f7368 is the
     INTERFACE teal: every teal that meets a word, as text or as the fill
     under white text. Side by side the two are indistinguishable; in a
     contrast meter one passes and the other does not. */
  --np-muted: #70655a;
  --np-muted-2: #6b6459;
  --np-faint: #6b6459;
  --np-faint-2: #6b6459;
  --np-teal: #0f7368;
  --np-teal-deep: #0c5e58;
  --np-teal-light: #79ded0;
  --np-teal-tag: #cfe8e4;
  --np-mint: #e6ede2;
  --np-mint-bubble: #dfe8dc;
  --np-mint-line: #dbe5da;
  --np-mint-line-2: #d3e0d2;
  --np-bg: #f7f3ec;
  --np-tile: #f7ebdf;
  --np-photo: #ece5db;
  --np-panel: #f2ebe4;
  --np-gold-bg: #fbf0d8;
  --np-gold: #856010;
  --np-line: #e8e0d6;
  --np-line-2: #ded6ca;
  --np-divider: #f0eae1;
  --np-divider-2: #f5efe7;
  --np-error: #b4463c;
  --np-error-line: #c2705f;
  --np-card-shadow: 0 1px 3px rgba(22,41,74,.07);
  --np-soft-shadow: 0 1px 2px rgba(22,41,74,.05);
  --np-cta-shadow: 0 8px 20px rgba(20,134,122,.28);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--np-bg); }
body { font-family: 'Assistant', system-ui, sans-serif; direction: rtl; color: var(--np-navy); }
a { color: var(--np-teal); text-decoration: none; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--np-teal); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }
.np-num { direction: ltr; unicode-bidi: isolate; }

/* ── accessibility (22/9, book ch. 75) ─────────────────────────────────────

   `.np-sr` is a name only a screen reader reads, for a field whose label is
   obvious on screen and absent from the accessibility tree. A placeholder is
   not a name: it disappears the moment somebody types.

   `.np-skip` is the skip link — the FIRST thing in the tab order on every
   page, invisible until it is focused. Without it a keyboard reader crosses
   the header, the navigation and, on the catalogue, the whole search side
   before reaching what they came for, on every single page. Hidden by CLIP
   rather than by an offset: `right: -9999px` on a right-to-left page pushes
   the document wide and gives every screen a horizontal scrollbar. */
.np-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
         clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }
.np-skip { position: absolute; width: 1px; height: 1px; overflow: hidden;
           clip: rect(0 0 0 0); white-space: nowrap; }
.np-skip:focus { position: fixed; top: 8px; right: 8px; z-index: 999;
                 width: auto; height: auto; overflow: visible; clip: auto;
                 background: var(--np-teal); color: #fff; border-radius: 10px;
                 padding: 10px 16px; font: 700 14px 'Heebo'; }

/* Target size, with nothing painted changed: the control keeps the size the
   design draws it, and an invisible box centred on it takes the tap. `max()`
   leaves a control that is already larger alone. A 34-pixel circle is a target
   a thumb misses; 44 is the size WCAG names and the size a phone needs. Two
   adjacent circles' boxes can meet in the gap BETWEEN them and never over
   either circle, so no control loses a pixel it paints. */
.np-icon-btn, .np-back, .np-btn.small { position: relative; }
.np-icon-btn::after, .np-back::after, .np-btn.small::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px); height: max(100%, 44px);
}

/* the column */
.np-wrap { max-width: 480px; margin: 0 auto; padding-bottom: 40px; }
.np-wrap.wide { max-width: 1080px; }

/* sticky header — 52px, logo on the start side */
.np-top { position: sticky; top: 0; z-index: 8; background: rgba(255,255,255,.95);
          backdrop-filter: blur(10px); border-bottom: 1px solid var(--np-line); height: 52px;
          display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 16px; }
.np-brand { font: 700 19px 'Heebo'; color: var(--np-navy); text-decoration: none; }
.np-brand span { color: var(--np-teal); }
/* A header strip that scrolls must SAY it scrolls (23/9, book ch. 75). The
   operator's own navigation is sixteen links, 1,079px of them, in a 307px
   strip on a phone: twelve screens — including הגדרות, פרויקטים, משרדים and
   יציאה — were off the edge with nothing on screen to suggest they existed.
   The mask fades the overflowing edge, which is the standard affordance; it
   is a decoration that carries information, so it stays. The scrollbar is
   hidden because a 2px bar under a 52px header is noise, not a signal. */
.np-top-actions { display: flex; align-items: center; gap: 8px;
                  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
                  -webkit-overflow-scrolling: touch; min-width: 0;
                  -webkit-mask-image: linear-gradient(to left, #000 88%, transparent 100%);
                  mask-image: linear-gradient(to left, #000 88%, transparent 100%); }
.np-top-actions::-webkit-scrollbar { display: none; }
.np-top-actions > * { flex: none; }
/* Nothing overflows on a wide screen, and a fade there would only dim the
   last link for no reason. */
@media (min-width: 760px) {
  .np-top-actions { -webkit-mask-image: none; mask-image: none; }
}
.np-icon-btn { width: 34px; height: 34px; border-radius: 99px; background: var(--np-bg); border: 0;
               display: grid; place-items: center; cursor: pointer; color: var(--np-teal); }
.np-icon-btn svg { width: 19px; height: 19px; fill: none; stroke: var(--np-teal); stroke-width: 1.5;
                   stroke-linecap: round; stroke-linejoin: round; }
.np-back { width: 26px; height: 26px; border-radius: 99px; background: var(--np-mint); display: grid;
           place-items: center; font: 700 14px 'Heebo'; color: var(--np-teal); }
.np-top-link { font: 600 12.5px 'Assistant'; color: var(--np-teal); padding: 8px 10px; border-radius: 10px; }
.np-top-link.primary { background: var(--np-teal); color: #fff; font: 700 12.5px 'Heebo'; padding: 8px 14px; }

/* page title block */
.np-hero { padding: 18px 16px 4px; }
.np-h1 { margin: 0; font: 700 21px/1.35 'Heebo'; color: var(--np-navy); text-wrap: balance; }
.np-lede { margin-top: 6px; font: 400 14px/1.6 'Assistant'; color: var(--np-muted); }

/* the gradient intro card (מרכז ההשבחה's opening) */
.np-intro { margin: 10px; background: linear-gradient(155deg,#e9f6ef 0%,#eff4fb 52%,#fdf1e3 100%);
            border: 1px solid #e3ebe6; border-radius: 16px; padding: 18px 16px; }
.np-intro .np-tag { background: var(--np-teal-tag); color: var(--np-teal-deep); border-radius: 6px; }
.np-intro h2 { margin: 10px 0 0; font: 800 23px/1.32 'Heebo'; color: var(--np-teal-deep); text-wrap: balance; }
.np-intro p { margin: 8px 0 0; font: 400 13.5px/1.75 'Assistant'; color: var(--np-body-3); }

/* cards */
.np-card { background: #fff; margin: 10px; border-radius: 16px; padding: 18px 16px; box-shadow: var(--np-card-shadow); }
.np-card-title { margin: 0 0 12px; font: 700 17px 'Heebo'; color: var(--np-navy); }
.np-card-sub { margin: -6px 0 12px; font: 400 13.5px/1.65 'Assistant'; color: var(--np-muted); }
.np-section-title { margin: 0; font: 700 15px 'Heebo'; color: var(--np-navy); }

/* key / value rows */
.np-kv { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0;
         border-bottom: 1px solid var(--np-divider-2); font: 400 13.5px 'Assistant'; }
.np-kv:last-child { border-bottom: 0; }
.np-kv .k { color: var(--np-faint); }
.np-kv .v { color: var(--np-navy); font-weight: 600; text-align: left; }

/* list rows with a detail line and a figure (פירוט השיפוץ) */
.np-line { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 11px 0;
           border-bottom: 1px solid var(--np-divider-2); }
.np-line:last-child { border-bottom: 0; }
.np-line .n { font: 600 13.5px 'Assistant'; color: var(--np-navy); }
.np-line .d { margin-top: 3px; font: 400 11.5px/1.5 'Assistant'; color: var(--np-faint-2); }
.np-line .c { font: 700 13px 'Heebo'; color: var(--np-body-2); white-space: nowrap; }

/* tags and chips */
.np-tag { display: inline-block; background: var(--np-gold-bg); color: var(--np-gold); border-radius: 999px;
          padding: 3px 10px; font: 600 12px 'Assistant'; }
.np-tag.mint { background: var(--np-mint); color: var(--np-teal); }
.np-chip { display: inline-flex; align-items: center; background: #fff; border: 1px solid var(--np-line-2);
           border-radius: 999px; padding: 7px 14px; font: 600 12.5px 'Assistant'; color: var(--np-teal); cursor: pointer; }
.np-chip.on { background: var(--np-teal); color: #fff; border-color: var(--np-teal); }
.np-answer-chip { background: var(--np-mint); border: 1px solid var(--np-mint-line-2); border-radius: 999px;
                  padding: 7px 14px; font: 600 12.5px 'Assistant'; color: var(--np-teal); cursor: pointer; }

/* segmented tabs */
.np-tabs { display: flex; gap: 4px; padding: 8px 10px; background: rgba(247,243,236,.96);
           border-bottom: 1px solid var(--np-line); }
.np-tabs > * { flex: 1; text-align: center; padding: 8px 0; border-radius: 10px; font: 600 12.5px 'Assistant';
               color: #6b7683; background: transparent; border: 0; cursor: pointer; }
.np-tabs > .on, .np-tabs > [aria-current="true"] { background: #fff; color: var(--np-teal); }

/* buttons */
.np-btn { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; height: 50px;
          border-radius: 13px; background: var(--np-teal); color: #fff; font: 700 16px 'Heebo'; border: 0; cursor: pointer; }
.np-btn.big { height: 52px; border-radius: 14px; box-shadow: var(--np-cta-shadow); }
.np-btn.soft { background: var(--np-mint); color: var(--np-teal); }
.np-btn.small { width: auto; height: auto; border-radius: 10px; padding: 8px 14px; font: 700 12.5px 'Heebo'; display: inline-flex; }
.np-link-btn { background: none; border: 0; font: 600 13.5px 'Assistant'; color: var(--np-faint); cursor: pointer; }

/* form fields — 46px, radius 12. 16px text rather than the design's 15px: below
   16px iOS Safari zooms the whole page when a field is tapped. */
.np-field { width: 100%; height: 46px; border-radius: 12px; border: 1px solid var(--np-line); background: #fff;
            padding: 0 13px; font: 400 16px 'Assistant'; color: var(--np-navy); outline: none; }
textarea.np-field { height: 72px; padding: 11px 13px; line-height: 1.5; resize: none; }
.np-field:focus { border-color: var(--np-teal); }
.np-field.bad { border-color: var(--np-error-line); }
.np-label { display: block; margin: 12px 0 6px; font: 600 12.5px 'Assistant'; color: var(--np-body); }
.np-error { margin-top: 8px; font: 600 12.5px 'Assistant'; color: var(--np-error); }
.np-note { margin-top: 12px; font: 400 11.5px/1.55 'Assistant'; color: var(--np-faint-2); }

/* the agent strip */
.np-agent { margin: 10px; border-radius: 16px; background: var(--np-mint); border: 1px solid var(--np-mint-line);
            padding: 10px 12px; display: flex; align-items: center; gap: 12px; }
.np-tile { flex: none; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: var(--np-tile); position: relative; }
.np-tile img { position: absolute; width: 132%; height: 132%; left: -16%; top: -4%; max-width: none; }
.np-avatar { flex: none; width: 40px; height: 40px; border-radius: 99px; overflow: hidden; background: var(--np-mint); position: relative; }
.np-avatar img { position: absolute; width: 290%; height: 290%; left: -93%; top: -19%; max-width: none; }
.np-agent .t1 { font: 700 14.5px 'Heebo'; color: var(--np-navy); }
.np-agent .t2 { margin-top: 4px; font: 400 12.5px/1.55 'Assistant'; color: #5d6a5b; }

/* a grid of cards (catalog, saved) */
.np-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; padding: 10px; }
.np-listing { display: block; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--np-card-shadow); color: inherit; }
.np-listing .ph { position: relative; aspect-ratio: 4 / 3; background: var(--np-photo); }
.np-listing .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.np-listing .body { padding: 12px 12px 14px; }
.np-listing .hl { font: 700 14.5px/1.35 'Heebo'; color: var(--np-navy); }
.np-listing .loc { margin-top: 4px; font: 400 12.5px 'Assistant'; color: var(--np-muted); }
.np-listing .price { margin-top: 8px; font: 800 17px 'Heebo'; color: var(--np-teal); }

/* a tinted status strip (paused, empty, success) */
.np-strip { margin: 10px; background: var(--np-mint); border-radius: 12px; padding: 12px; font: 600 13px/1.6 'Assistant'; color: var(--np-teal); }
.np-strip.gold { background: var(--np-gold-bg); color: var(--np-gold); }
.np-empty { margin: 10px; padding: 34px 18px; text-align: center; background: #fff; border-radius: 16px;
            box-shadow: var(--np-card-shadow); font: 400 14px/1.8 'Assistant'; color: var(--np-faint); }

/* the dark promise bar */
.np-promises { background: var(--np-navy); display: grid; grid-template-columns: repeat(3,1fr); padding: 11px 8px; text-align: center; }
.np-promises b { display: block; font: 700 12px 'Heebo'; color: var(--np-teal-light); }
.np-promises span { display: block; margin-top: 3px; font: 400 10.5px 'Assistant'; color: rgba(255,255,255,.6); }

/* footer */
.np-footer { margin: 24px 16px 0; padding-top: 16px; border-top: 1px solid var(--np-line); display: flex; flex-wrap: wrap;
             gap: 8px 16px; font: 400 12px 'Assistant'; color: var(--np-faint); }
.np-footer a { color: var(--np-muted); }

/* tables inside cards scroll on their own */
.np-table-wrap { overflow-x: auto; }
.np-table { width: 100%; border-collapse: collapse; font: 400 13px 'Assistant'; color: var(--np-body); }
.np-table th { text-align: right; font: 600 11.5px 'Assistant'; color: var(--np-faint-2); padding: 0 6px 8px;
               border-bottom: 1px solid var(--np-divider); white-space: nowrap; }
.np-table td { padding: 11px 6px; border-bottom: 1px solid var(--np-divider-2); vertical-align: top; }
.np-table td.fig { font: 700 13px 'Heebo'; color: var(--np-navy); }