/*
 * Card contract CSS, v1 — the default look of the public card. Stage 4
 * makes this the thing a theme supplies (validated by whitelist); until
 * then every card renders with it. Only the classes in
 * app/views/cards/show.html.erb are styled here, nothing else exists on
 * the page. Logical properties only: the same rules serve rtl and ltr.
 */

/*
 * Palette one — the card's own defaults (#183).
 *
 * These values were the app's until now, and are unchanged: the split is
 * of ownership, not of pixels. The card and the signed-in screens are two
 * looks from stage 4 on. The realtor picks a theme for their card, and a
 * light or dark for their own screens, and neither may move the other; one
 * shared :root meant a realtor choosing a light app repainted every card
 * on the air.
 *
 * Scoped to the card layout's <html>, never to :root. The app layout
 * loads every stylesheet in this directory, this one included, so a bare
 * :root here would set the signed-in screens' colours too — it did, for
 * one hand test (Adam, 2026-09-19). html.nadlan-card-root outranks the
 * app's :root by specificity on the card's page and matches nothing on
 * any other, whatever order the files load in. The app's own light and
 * dark blocks stay clear of it the same way: :root[data-theme=…] is the
 * app's page, never the card's, because the card layout sets no
 * data-theme. Tested in test/assets/card_tokens_test.rb.
 *
 * A card with no theme of its own renders exactly this, so no migrated
 * card needs a theme row. A picked theme arrives as a style attribute on
 * this same element (#185), which overrides these for that one page —
 * the ground and the browser's own controls included, which a theme
 * scoped to .nadlan-card could not have reached.
 *
 * What the card still takes from application.css, on purpose rather than
 * by accident: the box-sizing reset, the body rule that paints the page
 * ground and sets the type from the five tokens below, `a`, `img, svg`,
 * the :focus-visible ring, .v-sr-only, and the accessibility footer's
 * .v-a11y-* rules, which the signed-in sidebar shares. Those read their
 * colours from the tokens here, because custom properties inherit and on
 * this page these are the ones that win.
 */
html.nadlan-card-root {
  /* Tells the browser to render its own controls — scrollbar, focus ring,
     form controls — to match the card rather than the app. */
  color-scheme: dark;

  /* Type and spacing. No var() in this file names the first three: the
     card wears them through application.css's body rule. No palette sets
     any of them (#227). The stack is Heebo's, which is what a card that
     has picked no font wears; a picked one arrives on the style attribute
     from NadlanCard::FONTS (#189), whose Heebo entry is this line to the
     byte. The size, the line height and the gap are fixed. */
  --v-font: "Heebo", "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;
  --v-font-size: 16px;
  --v-line-height: 1.65;
  --v-gap: 1rem;

  /* Ink, surfaces and shading. These seven are the palette's own: every
     one of them is in CardTheme::CONTRACT, and a card wearing a palette
     overrides all seven. */
  --v-ink: #e7e9ec;
  --v-ink-muted: #98a1ad;
  --v-accent: #4c8dff;
  --v-surface: #17191d;
  --v-page: #0f1114;
  --v-line: #2a2f36;
  --v-shadow: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .35);

  /* The words on the action pills, which the accent fills since #247:
     black or white, whichever reads on the accent. CardTheme::OPTIONAL,
     not the contract, so a palette saved before #247 still stands; a
     palette that names none arrives here with the one CardTheme.on_accent
     worked out, and this line is what a card wearing no palette at all is
     drawn with. Black, because the accent above is #4c8dff. */
  --v-on-accent: #000000;

  /* The fill of the grid layout's tiles inside the card (#399).
     CardTheme::OPTIONAL: a palette that names none, every one but Rose,
     gets this shade of its own ink in its own surface, which the theme
     sets on this same element. */
  --v-tile: color-mix(in srgb, var(--v-ink) 6%, var(--v-surface));

  /* Shape. Fixed here rather than set by a palette since #227: a palette
     decides colour, and the card's corners are the shape toggle's
     (NadlanCard::CARD_SHAPES). --v-pill is what the buttons and the link
     rows are drawn as, --v-circle the icon circles, --v-photo-radius the
     portrait, --v-logo-radius the logo; "sharp" takes the first three to
     zero, and the photo's and the logo's own toggles take the last two. */
  --v-radius: 14px;
  --v-pill: 999px;
  --v-circle: 50%;
  --v-photo-radius: 50%;
  --v-logo-radius: 0;
}

.nadlan-card-body {
  min-block-size: 100dvh;
  display: grid;
  grid-template-rows: 1fr auto;
  place-items: start center;
  padding: clamp(1rem, 4vw, 2.5rem) 1rem;
}

.nadlan-card {
  inline-size: min(100%, 26rem);
  /* Every text on the card breaks anywhere rather than widening the
     card: one unbroken string in "about" pushed the whole card past the
     phone frame (Adam, 2026-09-08). Inherited, so it covers every block,
     including the ones not written yet. */
  overflow-wrap: anywhere;
  min-inline-size: 0;
  background: var(--v-surface);
  border: 1px solid var(--v-line);
  border-radius: var(--v-radius);
  box-shadow: var(--v-shadow);
  padding: clamp(1.25rem, 5vw, 2rem);
  display: grid;
  gap: calc(var(--v-gap) * 1.25);
}

/* The editor's preview: grey where a block is still empty. */
.nadlan-card-placeholder { color: var(--v-ink-muted); font-weight: 400; }

/* Inside the editor's frame the page scrolls, but a scrollbar down the
   side of a phone-shaped frame is not what a phone shows. */
html:has(.nadlan-card-body--frame) { scrollbar-width: none; }
html:has(.nadlan-card-body--frame)::-webkit-scrollbar { display: none; }

/* The editor's phone on a computer (Adam's hand test of #455): the card
   as the public page draws it on a computer, in a frame only as wide as
   the card. The page's and the card's padding follow the window there,
   and on a computer window both are at their caps; the editor marks the
   frame's page and these pin them, so the narrow frame draws the same
   boxes and the same line breaks. Never on the public page. */
.nadlan-card-root--computer .nadlan-card-body { padding-block: 2.5rem; }
.nadlan-card-root--computer:not([data-layout]) .nadlan-card { padding: 2rem; }

/* The realtor's phone link: a strip above the card in the draft colour. */
.nadlan-card-body--strip { grid-template-rows: auto 1fr auto; }
.nadlan-card-strip {
  inline-size: min(100%, 26rem); margin: 0 0 1rem; padding: .55rem .9rem; text-align: center;
  font-size: .85rem; font-weight: 500; color: #1a1408; background: #e08a1e; border-radius: var(--v-radius);
}

/* A sample card (#463): the disclaimer in the palette's own accent, and
   the note a press shows, at the foot of the screen for a moment. Both
   pairs are the palette's, each checked at 4.5:1. */
.nadlan-card-sample-strip { color: var(--v-on-accent); background: var(--v-accent); }
.nadlan-card-sample-note {
  position: fixed; inset-block-end: 1.5rem; inset-inline: 0; margin-inline: auto; inline-size: max-content;
  max-inline-size: calc(100% - 2rem); padding: .6rem 1.1rem; border-radius: 999px;
  color: var(--v-surface); background: var(--v-ink); box-shadow: var(--v-shadow);
  font-size: .95rem; font-weight: 500; text-align: center;
  opacity: 0; translate: 0 .5rem; pointer-events: none; transition: opacity .2s, translate .2s;
}
.nadlan-card-sample-note--shown, .nadlan-card-sample-note:target { opacity: 1; translate: 0; }
@media (prefers-reduced-motion: reduce) { .nadlan-card-sample-note { transition: none; } }

.nadlan-card-header { text-align: center; }
.nadlan-card-name { font-size: 1.6rem; font-weight: 700; margin: 0; }
/* The realtor's one line under the name (#348), a step quieter than the
   name in the muted ink, in every layout (Adam's hand test). */
.nadlan-card-tagline { margin: .35rem 0 0; font-size: 1rem; color: var(--v-ink-muted); text-wrap: balance; }
.nadlan-card-agency { margin: .25rem 0 0; color: var(--v-ink-muted); font-weight: 500; }
.nadlan-card-license { margin: .25rem 0 0; color: var(--v-ink-muted); font-size: .85rem; }

/* The realtor's voice, set apart from the facts: its own soft surface and
   a hairline on the reading side, nothing else (Adam, 2026-09-08). The
   surface is a token for stage 4's themes. */
.nadlan-card-about {
  padding: .9rem 1rem; border-radius: calc(var(--v-radius) / 2);
  background: color-mix(in srgb, var(--v-ink) 6%, transparent);
  border-inline-start: 3px solid var(--v-accent);
}
.nadlan-card-about p { margin: 0 0 .75em; }
.nadlan-card-about p:last-child { margin-block-end: 0; }
/* Folded after six lines on screen, only when the text runs longer (#136);
   the lines end between words, so no count ever cuts one. The clamp is on
   only while the page's script measures where the sixth line ends; the
   fold is that height, so no "…" shows at the cut (Adam, 2026-09-13). */
.nadlan-card-about--measuring .nadlan-card-about-text {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 6; overflow: hidden;
}
.nadlan-card-about--folded .nadlan-card-about-text { max-block-size: var(--nadlan-card-about-fold); overflow: hidden; }
/* The press is framed in the accent with its words in the text's colour,
   so it never reads as a heading above the next block, and its corners
   are the other presses' pill, so the corners toggle shapes it too
   (Adam, #353). */
.nadlan-card-about-toggle {
  margin-block-start: .5rem; padding: .125rem .5rem; border: 1px solid var(--v-accent); border-radius: var(--v-pill);
  background: none; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 500; color: var(--v-ink);
}

/* Contact details as one row of icons, as many as are filled, each with
   the card's fixed word centred under it (Adam, 2026-09-08 for the row,
   2026-09-13 for the fixed words, #134). */
.nadlan-card-contact-list { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: .5rem; }
.nadlan-card-contact-item { display: flex; justify-content: center; min-inline-size: 0; }
.nadlan-card-contact-link {
  display: flex; flex-direction: column; align-items: center; gap: .45rem; max-inline-size: 100%;
  color: var(--v-ink); text-decoration: none; text-align: center; font-size: .8rem; line-height: 1.3; overflow-wrap: anywhere;
}
.nadlan-card-contact-circle {
  display: inline-flex; align-items: center; justify-content: center; inline-size: 2.4rem; block-size: 2.4rem;
  border-radius: var(--v-circle); border: 1px solid var(--v-line); background: var(--v-page); color: var(--v-ink); font-size: .95rem;
}
.nadlan-card-contact-link:hover .nadlan-card-contact-circle { border-color: var(--v-accent); color: var(--v-accent); }
.nadlan-card-contact-text { white-space: nowrap; }

/* A language asked for that the card does not show, in yellow (#147). */
.nadlan-card-notice {
  margin: 0 0 1rem;
  padding: .5rem .75rem;
  border-radius: var(--v-radius);
  background: #35290a;
  color: #e0b21e;
  font-size: .85rem;
  text-align: center;
}

.nadlan-card-languages {
  display: flex;
  justify-content: center;
  gap: .5rem;
  /* Fixed order whatever the page direction, so the buttons do not swap
     places when the visitor switches language and the page flips. Each
     button is a flag, so direction here is cosmetic. */
  direction: ltr;
  border-block-start: 1px solid var(--v-line);
  padding-block-start: var(--v-gap);
}
.nadlan-card-language {
  padding: .3rem .8rem;
  border-radius: var(--v-pill);
  border: 1px solid var(--v-line);
  color: var(--v-ink-muted);
  text-decoration: none;
  font-size: .9rem;
}
button.nadlan-card-language { background: none; font: inherit; cursor: pointer; }
.nadlan-card-language:hover { color: var(--v-ink); border-color: var(--v-ink-muted); }
.nadlan-card-language--current { color: var(--v-ink); border-color: var(--v-accent); }
/* The outline keeps a mostly white flag (Israel, Russia) visible on a
   white card. */
.nadlan-card-flag { display: block; border-radius: 2px; box-shadow: 0 0 0 1px var(--v-line); }

/* Header images. The default look is a round photo; a theme (stage 4) may
   choose any shape — the crop is not the skeleton's business. The ring is
   the pills' colour in every layout (Adam's hand test), a shadow so it
   sits outside whatever border a layout gives the photo and follows its
   corners on every Safari (an outline drew square before 16.4); signature
   keeps its own thin outline, set apart. */
.nadlan-card-photo {
  inline-size: 120px;
  block-size: 120px;
  object-fit: cover;
  border-radius: var(--v-photo-radius);
  box-shadow: 0 0 0 2px var(--v-accent);
  margin-block-end: .75rem;
}
/* The logo stands alone on its own row, the agency's name on its own line
   under it (#458, Erez, against #451's logo beside the name). */
.nadlan-card-agency { display: flex; flex-direction: column; align-items: center; gap: .5rem; }

/* The property photo (#347): one 16:9 photo in every layout, its corners
   half the card's, so the corners toggle squares it. The portrait stands
   in front of its bottom edge, 42px over it, in a 5px ring of the card's
   surface, so the photo never covers the face (Adam, 2026-10-01). */
.nadlan-card-property-photo {
  display: block; inline-size: 100%; block-size: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: calc(var(--v-radius) / 2);
}
.nadlan-card-property-photo + .nadlan-card-photo-frame .nadlan-card-photo {
  position: relative; z-index: 1; box-sizing: border-box; border: 5px solid var(--v-surface); margin-block-start: -42px;
}
/* Classic opens on it, the portrait centred over its edge and the name,
   the agency and the licence under them in their own order. */
html:not([data-layout]) .nadlan-card-property-photo + .nadlan-card-photo-frame .nadlan-card-photo { display: block; margin-inline: auto; }
html:not([data-layout]) .nadlan-card-property-photo + .nadlan-card-name { margin-block-start: .75rem; }
/* The agency logo is the card's brand mark, 96px high in every layout
   (#447, #458): on a 360px phone it leaves the name on the first screen.
   Never wider than the card; a wide one keeps its shape, never cropped. */
.nadlan-card-logo { block-size: 96px; inline-size: auto; max-inline-size: 100%; object-fit: contain; border-radius: var(--v-logo-radius); }

/* Actions. Equal pills, every one of them filled with the accent since
   #247 (Adam, 2026-09-22, the batch hand test), their words drawn in
   --v-on-accent. Chosen against the accent drawing only the name and the
   contact rings, which left the row reading as a stack of borders rather
   than as presses. WhatsApp's own green went with it: one row of pills in
   one colour, rather than one pill arguing with the palette. */
.nadlan-card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
}
.nadlan-card-actions-label { align-self: center; color: var(--v-ink-muted); font-size: .85rem; }
.nadlan-card-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-inline-size: 3rem;
  block-size: 3rem;
  padding-inline: 1rem;
  border-radius: var(--v-pill);
  border: 1px solid var(--v-accent);
  background: var(--v-accent);
  color: var(--v-on-accent);
  font: inherit;
  font-size: 1.05rem;
  text-decoration: none;
  cursor: pointer;
}
/* Hover and press move the fill itself, both of them the same way and by
   the same amount. --v-on-accent is what it moves toward, because it is
   the one colour the contract holds far from the accent: a ring or a mix
   in --v-ink is the accent itself on "ink" and under 3:1 on three more
   (the reviewer's read of #277). How far it may move is what the words
   standing on it allow — 10% costs the tightest house palette 5.82:1 to
   4.79:1, and 15% would take it under 4.5:1. Every palette is held to
   both figures in test/assets/card_pill_contrast_test.rb. */
.nadlan-card-action:hover, .nadlan-card-action:active { background: color-mix(in srgb, var(--v-accent) 90%, var(--v-on-accent)); }
/* What tells a press from a hover: the pressed pill is rung in the colour
   its own words are drawn in, so the ring is the same pair as the text and
   clears 4.5:1 on any palette. The fill stays a fill — swapping it to
   --v-on-accent put the pill within 1.19:1 of the card it sits on. */
.nadlan-card-action:active { border-color: var(--v-on-accent); }
.nadlan-card-action--labelled { font-size: .95rem; }
/* WhatsApp keeps only its larger icon; the green it wore until #247 went
   with the fill. No pill names a colour of its own now, so every icon is
   drawn in the --v-on-accent it inherits from the pill. */
.nadlan-card-action--whatsapp { font-size: 1.35rem; }

/* QR, behind a tap. */
.nadlan-card-qr { text-align: center; }
.nadlan-card-qr-toggle {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--v-ink-muted);
  font-size: .9rem;
  cursor: pointer;
  list-style: none;
}
.nadlan-card-qr-toggle::-webkit-details-marker { display: none; }
.nadlan-card-qr-code { margin-block-start: .75rem; }
.nadlan-card-qr-code svg {
  inline-size: 180px;
  block-size: 180px;
  padding: 10px;
  background: #fff;
  border-radius: calc(var(--v-radius) / 2);
}

/* Share: the card's last thing, centred under everything (Adam, 2026-09-08). */
.nadlan-card-bottom { display: flex; justify-content: center; }
.nadlan-card-share { block-size: 2.5rem; padding-inline: .85rem; font-size: .9rem; }

/* A named group: a small muted heading with a hairline running from it
   to the far edge, so the eye gets clusters rather than one long field
   of buttons (Adam, 2026-09-08). */
.nadlan-card-group { display: grid; gap: .7rem; }
.nadlan-card-group-heading {
  display: flex; align-items: center; gap: .6rem; margin: 0;
  color: var(--v-ink-muted); font-size: .75rem; font-weight: 500; letter-spacing: .04em;
}
.nadlan-card-group-heading::after { content: ""; flex: 1; border-block-start: 1px solid var(--v-line); }

/* Social links: neutral, so the realtor's palette stays theirs. One row
   of bare icons; the "other" links as labelled pills in a row of their own. */
.nadlan-card-links-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
}
.nadlan-card-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  min-inline-size: 2.5rem;
  block-size: 2.5rem;
  padding-inline: .75rem;
  border-radius: var(--v-pill);
  color: var(--v-ink-muted);
  text-decoration: none;
  font-size: 1.15rem;
}
.nadlan-card-link--labelled { font-size: .9rem; }
/* Each network in its colour, the same as in the editor's link rows
   (Adam, 2026-09-07).

   Every one of the five has a value per scheme (#208, #399). These colours were
   picked when every card was dark, and since #186 a card can stand on
   paper, sand or forest: TikTok's white was 1.0:1 on a white card, an
   invisible link rather than a faint one, and LinkedIn's lightened blue
   2.54:1. light-dark() answers each of them from the palette's own
   color-scheme, which the theme sets on this same <html> beside its
   colours — so the mark follows the card's palette without any palette
   being able to choose it. Chosen against putting the two colours in the
   card contract, which would have made them a realtor's to pick and is the
   opposite of the ruling: they are the networks' colours, not the look's
   (Adam, 2026-09-20).

   The other three followed when Rose's card took a deep pink (#399): their
   one colour each fell under 3:1 there, so light cards take a darker one
   (Facebook's a step under Meta's current blue, to clear 3:1 on a
   hovered mark's shade) and dark cards keep theirs, but Instagram's, a
   step lighter to clear 3:1 on navy's pressed shade.
   Facebook, Instagram and YouTube name their light colour first, plain: a
   browser that does not know light-dark() drops that line and keeps the
   one before it, on dark cards too (review of #399). LinkedIn and TikTok
   name none, since TikTok's light black would vanish on a dark card. Held by test/assets/card_brand_contrast_test.rb. */
.nadlan-card-link .fa-facebook { color: #0860f0; color: light-dark(#0860f0, #1877f2); }
.nadlan-card-link .fa-instagram { color: #c13584; color: light-dark(#c13584, #e3366f); }
.nadlan-card-link .fa-youtube { color: #cc0000; color: light-dark(#cc0000, #ff3333); }
.nadlan-card-link .fa-linkedin { color: light-dark(#0a66c2, #5aa9e6); }
.nadlan-card-link .fa-tiktok { color: light-dark(#010101, #ffffff); }
.nadlan-card-link:hover { color: var(--v-ink); background: var(--v-page); }

/* The promo footer, outside the card frame. */
.nadlan-card-promo { text-align: center; padding-block: 1.25rem; font-size: .85rem; }
.nadlan-card-promo-link { color: var(--v-ink-muted); text-decoration: none; }
.nadlan-card-promo-link:hover { color: var(--v-ink); }

/*
 * Layouts (#323). Where each block of the one skeleton sits and its shape,
 * read from data-layout on the card's <html> (NadlanCard::LAYOUTS). Classic,
 * today's card, is everything above and carries no attribute. Each layout
 * below is Erez's, its values copied from his redesign of 2026-10-01:
 * arrangements of today's blocks only, and colours from the palette's
 * tokens alone, so every layout wears every palette.
 *
 * Classic keeps its icon-only buttons, its bare "about" panel and no
 * sign-off: the words Erez's layouts show are in every card's markup, and
 * classic takes them off the page. Erez's "soft" fill, which the contract
 * has no token for, is the ink mixed into the surface, as the about panel
 * above already does.
 */
.nadlan-card-photo-frame { display: contents; }
.nadlan-card-action-words, .nadlan-card-about-heading, .nadlan-card-sign-off { display: none; }
.nadlan-card-action-name {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* What every one of Erez's layouts shares: his base sheet. */
html.nadlan-card-root[data-layout] {
  /* The round corners of a layout that sets none of its own. Sharp is the
     corners toggle's inline style, which wins over these in every layout
     (NadlanCard::LAYOUT_CORNERS, #350). */
  --v-radius: 4px;
  --v-pill: 8px;
  --v-circle: 50%;
}
[data-layout] .nadlan-card {
  inline-size: min(100%, 26.25rem);
  border: 0;
  padding: 1.75rem;
  gap: 0;
}
/* Erez's rhythm between the blocks is not one gap: 26px by default,
   tighter before the contact row, the networks and the bottom line. */
[data-layout] .nadlan-card > * + * { margin-block-start: 1.625rem; }
[data-layout] .nadlan-card > .nadlan-card-contact { margin-block-start: 22px; }
[data-layout] .nadlan-card > .nadlan-card-links,
[data-layout] .nadlan-card > .nadlan-card-bottom { margin-block-start: 16px; }
[data-layout] .nadlan-card-header { display: flex; flex-direction: column; align-items: flex-start; text-align: start; }
[data-layout] .nadlan-card-agency { order: -1; align-items: flex-start; margin: 0; gap: 9px; font-size: .8125rem; color: var(--v-ink); }
[data-layout] .nadlan-card-photo { border: 0; margin: 0; }
[data-layout] .nadlan-card-name { font-size: 2rem; line-height: 1.3; font-weight: 600; letter-spacing: -.9px; text-wrap: balance; }
[data-layout] .nadlan-card-tagline { margin-block-start: 6px; font-size: .9375rem; line-height: 1.5; }
[data-layout] .nadlan-card-license { margin-block-start: 7px; font-size: .6875rem; }

/* WhatsApp across the row, the call and the save beside each other under
   it, both outlined; Erez's words show and the short names leave. */
[data-layout] .nadlan-card-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
[data-layout] .nadlan-card-actions-label { grid-column: 1 / -1; justify-self: start; font-size: .75rem; }
/* A flagged phone leaves "Save contact" alone in the block (#457): it
   takes the whole row rather than half of it. */
[data-layout]:not([data-layout="horizon"]) .nadlan-card-action--labelled:only-child { grid-column: 1 / -1; }
[data-layout] .nadlan-card-action {
  block-size: auto; min-block-size: 48px; padding: 10px 12px; gap: 9px;
  border: 1px solid var(--v-line); background: transparent; color: var(--v-ink);
  font-size: .8125rem; font-weight: 500;
}
[data-layout] .nadlan-card-action:hover, [data-layout] .nadlan-card-action:active { background: color-mix(in srgb, var(--v-ink) 6%, var(--v-surface)); }
[data-layout] .nadlan-card-action:active { border-color: var(--v-ink); }
[data-layout] .nadlan-card-action--whatsapp { grid-column: 1 / -1; border-color: transparent; background: var(--v-accent); color: var(--v-on-accent); }
[data-layout] .nadlan-card-action--whatsapp:hover, [data-layout] .nadlan-card-action--whatsapp:active { background: var(--v-accent); filter: brightness(1.08); }
[data-layout] .nadlan-card-action--whatsapp:active { border-color: var(--v-on-accent); }
[data-layout] .nadlan-card-action--whatsapp i { font-size: 1.375rem; }
[data-layout] .nadlan-card-action-name { display: none; }
[data-layout] .nadlan-card-action-words { display: inline; }

[data-layout] .nadlan-card-about { padding: 23px 0 0; border: 0; border-block-start: 1px solid var(--v-line); border-radius: 0; background: none; }
[data-layout] .nadlan-card-about-heading { display: block; margin: 0 0 11px; font-size: .6875rem; font-weight: 500; color: var(--v-ink-muted); }
[data-layout] .nadlan-card-about-text { font-size: .875rem; line-height: 1.95; }
[data-layout] .nadlan-card-about-toggle { min-block-size: 44px; font-size: .75rem; }

/* The group headings stay for a screen reader, which jumps by heading,
   and leave the eye (Adam, 2026-10-01). */
[data-layout] .nadlan-card-group-heading {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
[data-layout] .nadlan-card-contact { padding-block: 22px; border-block: 1px solid var(--v-line); }
[data-layout] .nadlan-card-contact-link { gap: 10px; font-size: .6875rem; }
[data-layout] .nadlan-card-contact-circle { inline-size: auto; block-size: auto; border: 0; background: none; color: var(--v-accent); font-size: 1.3rem; }
[data-layout] .nadlan-card-links-row { gap: 13px; }
[data-layout] .nadlan-card-link { min-inline-size: 44px; block-size: 44px; font-size: 1.05rem; }
[data-layout] .nadlan-card-link:hover { background: color-mix(in srgb, var(--v-ink) 6%, var(--v-surface)); }

/* The sign-off and the share press, one line under a hairline; share is
   Erez's bare icon, its word kept as its spoken name. */
[data-layout] .nadlan-card-bottom { justify-content: space-between; align-items: center; padding-block-start: 10px; border-block-start: 1px solid var(--v-line); }
[data-layout] .nadlan-card-sign-off { display: block; margin: 0; font-size: .625rem; color: var(--v-ink-muted); }
/* 44px: Erez's size, at WCAG 2.5.5's target and over 2.5.8's 24px floor. */
[data-layout] .nadlan-card-share { inline-size: 44px; block-size: 44px; min-block-size: 44px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--v-ink-muted); font-size: 1.05rem; }
[data-layout] .nadlan-card-share:hover, [data-layout] .nadlan-card-share:active { background: color-mix(in srgb, var(--v-ink) 6%, var(--v-surface)); color: var(--v-ink); }
[data-layout] .nadlan-card-share span {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
/* ...except while it says the link was copied, which is the one word it
   shows. */
[data-layout] .nadlan-card-share[data-copied] { inline-size: auto; padding-inline: .85rem; border-radius: var(--v-pill); }
[data-layout] .nadlan-card-share[data-copied] span { position: static; inline-size: auto; block-size: auto; margin: 0; overflow: visible; clip-path: none; }
[data-layout] .nadlan-card-promo { padding-block: 23px 20px; font-size: .625rem; letter-spacing: .3px; }

/* 01 שקט — typographic and deliberately quiet: square card, the agency
   over a hairline, the portrait on the name's side, a large light name. */
/* Quiet's square corners are the corners toggle's sharp, its default. */
[data-layout="quiet"] .nadlan-card-header { padding-block-start: 3px; }
[data-layout="quiet"] .nadlan-card-agency { align-self: stretch; padding-block-end: 28px; border-block-end: 1px solid var(--v-line); }
[data-layout="quiet"] .nadlan-card-photo-frame { display: block; align-self: flex-start; padding-block: 32px 22px; }
[data-layout="quiet"] .nadlan-card-photo { inline-size: 76px; block-size: 76px; display: block; }
[data-layout="quiet"] .nadlan-card-name { font-size: 2.3125rem; font-weight: 500; }
[data-layout="quiet"] :is(.nadlan-card-name:first-child, .nadlan-card-property-photo + .nadlan-card-name) { margin-block-start: 32px; }
/* The property photo under the hairline, the portrait over its edge at the
   far side, kept off the corner. */
[data-layout="quiet"] .nadlan-card-property-photo { margin-block-start: 28px; }
[data-layout="quiet"] .nadlan-card-property-photo + .nadlan-card-photo-frame { align-self: flex-end; padding-block-start: 0; padding-inline: 16px; }
[data-layout="quiet"] .nadlan-card-action--whatsapp { min-block-size: 51px; }
[data-layout="quiet"] .nadlan-card-about { padding-block-start: 3px; border-block-start: 0; }

/* 02 אופק — architectural: a wide photo of a property (#347) opens the
   card edge to edge under the agency, and the portrait, over its bottom
   edge, joins the place to the person. A card with no property photo
   draws nothing in its place: the portrait follows the agency on the
   card's own colour (Adam, 2026-10-01). Round by default. */
html.nadlan-card-root[data-layout="horizon"] { --v-radius: 14px; }
[data-layout="horizon"] .nadlan-card { overflow: clip; }
[data-layout="horizon"] .nadlan-card-photo {
  position: relative; display: block; box-sizing: border-box; inline-size: 92px; block-size: 92px;
  margin-block: 22px 13px; border: 5px solid var(--v-surface);
}
[data-layout="horizon"] .nadlan-card-name { font-size: 1.9375rem; }
[data-layout="horizon"] :is(.nadlan-card-name:first-child, .nadlan-card-property-photo + .nadlan-card-name) { margin-block-start: 24px; }
/* The property photo edge to edge and square-cornered, the agency above
   it; with no agency it opens the card, as Erez drew it. */
[data-layout="horizon"] .nadlan-card-property-photo { inline-size: calc(100% + 3.5rem); max-inline-size: none; margin: 22px -1.75rem 0; border-radius: 0; }
[data-layout="horizon"] .nadlan-card-header:not(:has(.nadlan-card-agency)) .nadlan-card-property-photo { margin-block-start: -1.75rem; }
/* WhatsApp beside two squares, the call and the save, whose words stay as
   their spoken names. */
[data-layout="horizon"] .nadlan-card > .nadlan-card-actions { margin-block-start: 23px; }
[data-layout="horizon"] .nadlan-card-actions { grid-template-columns: 1fr 48px 48px; gap: 8px; }
[data-layout="horizon"] .nadlan-card-action--whatsapp { grid-column: auto; }
[data-layout="horizon"] .nadlan-card-actions :where(.nadlan-card-action--call, .nadlan-card-action--labelled) { padding: 10px; }
[data-layout="horizon"] .nadlan-card-actions :is(.nadlan-card-action--call .nadlan-card-action-words, .nadlan-card-action--labelled span) {
  position: absolute; inline-size: 1px; block-size: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* 03 קרוב — personal: an arched card, the portrait centred in an arch of
   its own, soft round presses. The arch owns the portrait's shape, so the
   photo's toggle is not this layout's (NadlanCard.photo_toggle?). */
/* Its round corners; sharp squares them, never the arches. */
html.nadlan-card-root[data-layout="close"] { --v-radius: 20px; --v-pill: 30px; }
[data-layout="close"] .nadlan-card { border-radius: 120px 120px var(--v-radius) var(--v-radius); }
[data-layout="close"] .nadlan-card-header { align-items: center; text-align: center; padding-block-start: 15px; }
[data-layout="close"] .nadlan-card-agency { align-items: center; font-size: .75rem; }
[data-layout="close"] .nadlan-card-photo-frame {
  position: relative; display: flex; align-items: center; justify-content: center;
  inline-size: 178px; block-size: 169px; margin: 25px auto 21px;
  border-radius: 110px 110px 16px 16px; background: color-mix(in srgb, var(--v-ink) 6%, var(--v-surface));
}
[data-layout="close"] .nadlan-card-photo-frame::after {
  content: ""; position: absolute; inset: 8px; border: 1px solid var(--v-line); border-radius: inherit; pointer-events: none;
}
[data-layout="close"] .nadlan-card-photo { position: relative; z-index: 1; inline-size: 119px; block-size: 119px; border-radius: 50%; }
[data-layout="close"] .nadlan-card-name { font-size: 1.9375rem; }
[data-layout="close"] :is(.nadlan-card-name:first-child, .nadlan-card-property-photo + .nadlan-card-name) { margin-block-start: 25px; }
/* The arch, with the portrait in it, is what stands over the property
   photo's edge. */
[data-layout="close"] .nadlan-card-property-photo { margin-block-start: 12px; }
[data-layout="close"] .nadlan-card-property-photo + .nadlan-card-photo-frame { margin-block-start: -42px; }
[data-layout="close"] .nadlan-card-property-photo + .nadlan-card-photo-frame .nadlan-card-photo { margin-block-start: 0; }
[data-layout="close"] .nadlan-card-actions-label { justify-self: center; }
[data-layout="close"] .nadlan-card-about { padding: 20px 22px; border: 0; border-radius: var(--v-radius); background: color-mix(in srgb, var(--v-ink) 6%, var(--v-surface)); }
[data-layout="close"] .nadlan-card > .nadlan-card-contact { margin-block-start: 10px; }
[data-layout="close"] .nadlan-card-contact { padding-block: 0 7px; border-block: 0; }
[data-layout="close"] .nadlan-card-contact-circle {
  box-sizing: content-box; inline-size: 21px; block-size: 21px; padding: 13px;
  border-radius: 50%; background: color-mix(in srgb, var(--v-ink) 6%, var(--v-surface));
}

/* 04 סיפור — editorial: the portrait, the name and the tagline the way a
   magazine sets them, then the agency between two rules and the licence.
   The agency stays in the skeleton's own place, under the tagline (Adam's
   look at #463), where Erez had lifted it above the portrait. Erez drew a
   tall photo of a property beside the name; the card has none (#347), so
   the place closes up and the blocks take the width (Adam, 2026-10-01).
   Square by default, the corners toggle's sharp. */
[data-layout="story"] .nadlan-card { padding: 24px 25px 28px; }
[data-layout="story"] .nadlan-card-agency { order: 0; align-self: stretch; margin-block-start: 22px; padding-block: 12px; border-block: 1px solid var(--v-ink); font-size: .6875rem; }
[data-layout="story"] .nadlan-card-photo { display: block; inline-size: 53px; block-size: 53px; margin-block: 8px 17px; }
[data-layout="story"] .nadlan-card-name { align-self: stretch; font-size: 2.4375rem; line-height: 1.06; font-weight: 500; letter-spacing: -1.3px; }
[data-layout="story"] .nadlan-card-property-photo + .nadlan-card-name { margin-block-start: 32px; }
/* Erez set the tagline large and in a serif under story's name (#348). */
[data-layout="story"] .nadlan-card-tagline {
  align-self: stretch; margin-block-start: 12px; font-family: Georgia, "Noto Serif Hebrew", "Frank Ruehl CLM", serif;
  font-size: 1.25rem; line-height: 1.35;
}
/* The property photo a band at the top, the portrait grown to stand over
   its edge. */
[data-layout="story"] .nadlan-card-property-photo + .nadlan-card-photo-frame .nadlan-card-photo { inline-size: 84px; block-size: 84px; }
[data-layout="story"] .nadlan-card-license { margin-block-start: 7px; font-size: .5625rem; line-height: 1.8; }
/* WhatsApp and the call side by side, outlined in the accent, the save a
   bare line under them. */
[data-layout="story"] .nadlan-card > .nadlan-card-actions { margin-block-start: 22px; }
[data-layout="story"] .nadlan-card > .nadlan-card-actions + * { margin-block-start: 15px; }
[data-layout="story"] .nadlan-card-actions { gap: 8px; }
[data-layout="story"] .nadlan-card-actions :where(.nadlan-card-action) { border-color: var(--v-accent); }
[data-layout="story"] .nadlan-card-action--whatsapp { grid-column: auto; }
[data-layout="story"] .nadlan-card-actions .nadlan-card-action--labelled { grid-column: 1 / -1; min-block-size: 38px; border: 0; font-size: .75rem; }
/* The contact details as a list of rows, each with an arrow out at its
   end; the arrow's alternative text is empty, so it is never read. */
[data-layout="story"] .nadlan-card-contact { padding-block: 0; }
[data-layout="story"] .nadlan-card-contact-list { display: flex; flex-direction: column; gap: 0; }
[data-layout="story"] .nadlan-card-contact-item { display: block; border-block-end: 1px solid var(--v-line); }
[data-layout="story"] .nadlan-card-contact-item:last-child { border-block-end: 0; }
[data-layout="story"] .nadlan-card-contact-link { flex-direction: row; inline-size: 100%; min-block-size: 51px; gap: 13px; font-size: .8125rem; text-align: start; }
[data-layout="story"] .nadlan-card-contact-link::after { content: "↖" / ""; margin-inline-start: auto; }

/* 05 קווים — graphic tiles: the whole card is one rounded box of the
   surface, on a phone too, and each block stands inside it as a tile, the
   WhatsApp press the tall one (Adam, #399). Erez drew the card as the page
   itself with each tile on it; the tiles stay, the box is new. A tile is
   the palette's --v-tile where it names one (Rose), else the ink mixed
   into the surface, edged in the palette's line, held to
   every palette by test/assets/card_grid_contrast_test.rb. Its tiles are
   round by default; each is held under its own size by min(), so sharp,
   which zeroes --v-radius, squares them all. */
html.nadlan-card-root[data-layout="grid"] { --v-radius: 18px; }
[data-layout="grid"] .nadlan-card { padding: 14px; }
/* The agency over the tile, and the tile behind the portrait, the name and
   the licence: the header's ::before, laid on the rows under the agency,
   since the skeleton has no block around those three. */
[data-layout="grid"] .nadlan-card-header {
  display: grid; grid-template-columns: 22px auto 17px 1fr 22px; grid-template-rows: auto 25px auto auto auto 25px;
}
[data-layout="grid"] .nadlan-card-header::before {
  content: ""; grid-row: 2 / -1; grid-column: 1 / -1; align-self: stretch; border-radius: var(--v-radius);
}
[data-layout="grid"] :is(.nadlan-card-about, .nadlan-card-contact-link),
[data-layout="grid"] .nadlan-card-actions :where(.nadlan-card-action),
[data-layout="grid"] .nadlan-card-header::before {
  border: 1px solid var(--v-line); background: var(--v-tile);
}
[data-layout="grid"] .nadlan-card-agency { grid-row: 1; grid-column: 1 / -1; padding: 7px 2px 21px; }
[data-layout="grid"] .nadlan-card-photo { grid-row: 3 / 6; grid-column: 2; align-self: center; display: block; inline-size: 73px; block-size: 73px; }
[data-layout="grid"] .nadlan-card-name { grid-row: 3; grid-column: 4; align-self: end; font-size: 1.625rem; letter-spacing: -.5px; }
[data-layout="grid"] .nadlan-card-tagline { grid-row: 4; grid-column: 4; align-self: start; }
[data-layout="grid"] .nadlan-card-license { grid-row: 5; grid-column: 4; align-self: start; }
/* No licence and no tagline: the name centres on the portrait. No
   portrait: the name, the tagline and the licence take its place. An empty
   row is no height, so a missing one closes up. */
[data-layout="grid"] .nadlan-card-header:not(:has(.nadlan-card-license, .nadlan-card-tagline)) .nadlan-card-name { grid-row: 3 / 6; align-self: center; }
[data-layout="grid"] .nadlan-card-header:not(:has(.nadlan-card-photo)) :is(.nadlan-card-name, .nadlan-card-tagline, .nadlan-card-license) { grid-column: 2 / 5; }
/* The property photo is the top of the tile (#347), the portrait over its
   edge, the name and the licence beside the portrait. */
[data-layout="grid"] .nadlan-card-header:has(.nadlan-card-property-photo) { grid-template-rows: auto auto auto auto auto 25px; }
[data-layout="grid"] .nadlan-card-property-photo { grid-row: 2; grid-column: 1 / -1; border-radius: var(--v-radius) var(--v-radius) 0 0; }
[data-layout="grid"] .nadlan-card-property-photo + .nadlan-card-photo-frame .nadlan-card-photo { align-self: start; inline-size: 92px; block-size: 92px; }
[data-layout="grid"] .nadlan-card-header:has(.nadlan-card-property-photo) .nadlan-card-name { margin-block-start: 12px; }
[data-layout="grid"] .nadlan-card-header:has(.nadlan-card-property-photo):not(:has(.nadlan-card-photo)) .nadlan-card-name { margin-block-start: 25px; }
[data-layout="grid"] .nadlan-card > .nadlan-card-actions { margin-block-start: 24px; }
[data-layout="grid"] .nadlan-card > :is(.nadlan-card-qr, .nadlan-card-about, .nadlan-card-contact) { margin-block-start: 13px; }
/* The label's row and WhatsApp's two only when the call buttons are there;
   a lone "Save contact" (#457) is one 65px row. */
[data-layout="grid"] .nadlan-card-actions { grid-auto-rows: 65px; }
[data-layout="grid"] .nadlan-card-actions:has(.nadlan-card-action--call) { grid-template-rows: auto 65px 65px; }
[data-layout="grid"] .nadlan-card-actions :where(.nadlan-card-action) { border-radius: min(var(--v-radius), 15px); }
[data-layout="grid"] .nadlan-card-action:not(.nadlan-card-action--whatsapp):is(:hover, :active) { background: color-mix(in srgb, var(--v-ink) 6%, var(--v-tile)); }
[data-layout="grid"] .nadlan-card-action--whatsapp {
  grid-row: 2 / 4; grid-column: 1; flex-direction: column; gap: 14px; font-size: 1.0625rem; border-color: var(--v-accent); background: var(--v-accent);
}
[data-layout="grid"] .nadlan-card-action--whatsapp i { font-size: 31px; }
[data-layout="grid"] .nadlan-card-action--call { grid-column: 2; }
[data-layout="grid"] .nadlan-card-about { padding: 23px; border-radius: min(var(--v-radius), 16px); }
[data-layout="grid"] .nadlan-card-contact { padding: 0; border: 0; }
[data-layout="grid"] .nadlan-card-contact-list { gap: 10px; }
[data-layout="grid"] .nadlan-card-contact-link {
  inline-size: 100%; padding: 20px 8px; gap: 12px; border-radius: min(var(--v-radius), 14px);
}
[data-layout="grid"] .nadlan-card-bottom { margin-inline: 8px; }

/* 06 חתימה — a double frame, fine rules and a restrained sheen of the
   accent: square by default, the corners toggle's sharp. The name is in
   the accent and in the realtor's own font (Adam, 2026-10-01). Every
   accent pair here is held to every palette by
   test/assets/card_signature_contrast_test.rb. */
[data-layout="signature"] .nadlan-card {
  position: relative; padding: 42px 32px 32px; border: 1px solid var(--v-accent);
  background: linear-gradient(138deg, color-mix(in srgb, var(--v-accent) 9%, var(--v-surface)), var(--v-surface) 32%,
    var(--v-surface) 75%, color-mix(in srgb, var(--v-accent) 6%, var(--v-surface)));
}
/* The inner frame, 9px in, and its two stars: the skeleton has no block
   for either, so they are drawn on the card and on its header. Each star
   is an accent fill through a four-pointed mask with no text content, so
   no screen reader has anything to read. */
[data-layout="signature"] .nadlan-card::before {
  content: ""; position: absolute; inset: 9px; border: 1px solid var(--v-line); pointer-events: none;
}
[data-layout="signature"] .nadlan-card-header::before,
[data-layout="signature"] .nadlan-card-header::after {
  content: ""; position: absolute; inset-block-start: 20px; inline-size: 15px; block-size: 15px; background: var(--v-accent);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 0C8.6 5.2 10.8 7.4 16 8C10.8 8.6 8.6 10.8 8 16C7.4 10.8 5.2 8.6 0 8C5.2 7.4 7.4 5.2 8 0Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
[data-layout="signature"] .nadlan-card-header::before { inset-inline-start: 22px; }
[data-layout="signature"] .nadlan-card-header::after { inset-inline-end: 22px; }
/* Forced colours paint the fill Canvas and keep the mask, which would
   hide the stars: they take the ink instead. */
@media (forced-colors: active) {
  [data-layout="signature"] .nadlan-card-header::before,
  [data-layout="signature"] .nadlan-card-header::after { forced-color-adjust: none; background: CanvasText; }
}
[data-layout="signature"] .nadlan-card-header { align-items: center; text-align: center; }
[data-layout="signature"] .nadlan-card-agency { align-items: center; font-size: .75rem; }
[data-layout="signature"] .nadlan-card-photo {
  inline-size: 95px; block-size: 95px; margin-block: 30px 21px;
  border: 3px solid var(--v-surface); box-shadow: none; outline: 1px solid var(--v-accent); outline-offset: 7px;
}
[data-layout="signature"] .nadlan-card-name { font-size: 2.3125rem; font-weight: 500; color: var(--v-accent); }
[data-layout="signature"] :is(.nadlan-card-name:first-child, .nadlan-card-property-photo + .nadlan-card-name) { margin-block-start: 30px; }
/* The property photo under the agency, inside the inner frame, the
   double-ringed portrait over its edge. */
[data-layout="signature"] .nadlan-card-property-photo { inline-size: calc(100% + 24px); max-inline-size: none; margin: 14px -12px 0; }
[data-layout="signature"] .nadlan-card-actions :where(.nadlan-card-action) { font-size: .75rem; }
[data-layout="signature"] .nadlan-card-action--whatsapp { min-block-size: 49px; }
/* The sheen's middle moves the fill 10% toward --v-on-accent, the share
   the hover already moves it by: Erez's 16% put paper's words at 4.25:1. */
[data-layout="signature"] .nadlan-card-action--whatsapp,
[data-layout="signature"] .nadlan-card-action--whatsapp:hover,
[data-layout="signature"] .nadlan-card-action--whatsapp:active {
  background: linear-gradient(110deg, var(--v-accent), color-mix(in srgb, var(--v-accent) 90%, var(--v-on-accent)) 48%, var(--v-accent));
}
[data-layout="signature"] .nadlan-card-about { padding-block-start: 0; border-block-start: 0; text-align: center; }
[data-layout="signature"] .nadlan-card-about-heading { color: var(--v-accent); }
[data-layout="signature"] .nadlan-card-about-text { font-size: .8125rem; }
[data-layout="signature"] .nadlan-card > .nadlan-card-contact { margin-block-start: 13px; }
[data-layout="signature"] .nadlan-card-contact { padding-block: 18px; }

/* On a phone the card is the screen: full width, no frame, no corners. */
@media (max-width: 460px) {
  [data-layout] .nadlan-card-body { padding: 0; }
  [data-layout] .nadlan-card { inline-size: 100%; box-shadow: none; }
  [data-layout] .nadlan-card,
  [data-layout="close"] .nadlan-card { border-radius: 0; }
  [data-layout="close"] .nadlan-card-header { padding-block-start: 5px; }
  [data-layout="grid"] .nadlan-card-body { padding: 20px 16px; }
  [data-layout="grid"] .nadlan-card { border-radius: var(--v-radius); }
  [data-layout="signature"] .nadlan-card-body { padding: 12px; }
  [data-layout="signature"] .nadlan-card { padding-inline: 30px; }
}