/* Dira Scout site. The keymaker's pegboard (site/DESIGN.md).
   Logical properties throughout: Hebrew mirrors the layout, not the objects. */

@font-face { font-family: Rubik; font-weight: 300 900; font-display: swap;
  src: url(/fonts/rubik-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: Rubik; font-weight: 300 900; font-display: swap;
  src: url(/fonts/rubik-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: Rubik; font-weight: 300 900; font-display: swap;
  src: url(/fonts/rubik-hebrew.woff2) format("woff2");
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F; }

:root {
  --panel: #0a72ef;          /* brand blue, fixed by the owner */
  --panel-hole: #0652b0;
  --ink: #0a0b0d;
  --plate: #000;
  --tag: #fbfcfe;
  --tag-line: #d3dae4;
  --wall: #fff;
  --nickel: #cfd6de;
  --nickel-shade: #8793a1;
  --warn: #b87500;
  --error: #b3261e;
  --steel: #4d5864;
  --muted: #3b4654;
  --link: #0966de;            /* the brand blue, darkened until it reads on white (5:1) */
  --pitch: 28px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);   /* strong ease-out for every UI move */
  --dur-press: 160ms;                          /* press and small feedback */
  --dur-ui: 200ms;                             /* UI transitions stay under 300ms */
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--nickel-shade) transparent; accent-color: var(--panel); scroll-behavior: smooth; }
body { margin: 0; background: var(--wall); color: var(--ink); caret-color: var(--panel);
  font: 400 1.0625rem/1.55 Rubik, system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-variant-numeric: tabular-nums; text-wrap: pretty; }
h1, h2, h3 { margin: 0; line-height: 1.12; text-wrap: balance; }
p { margin: 0; }
a { color: inherit; text-underline-offset: .2em; }
svg { display: block; }

.panel { --focus: #fff; }
.wall, .tag { --focus: var(--panel); }
:focus-visible { outline: 3px solid var(--focus, var(--panel)); outline-offset: 3px; }
.panel ::selection { background: #fff; color: var(--panel); }
.wall ::selection, .tag ::selection { background: var(--panel); color: #fff; }

.wrap { inline-size: min(100%, 1120px); margin-inline: auto; }
.skip { position: absolute; inset-inline-start: 8px; inset-block-start: -80px; z-index: 10; background: #fff; color: var(--panel); padding: .6rem 1rem; border-radius: 6px; font-weight: 600; }
.skip:focus { inset-block-start: 8px; }

/* The panel: perforated board, the pitch of the holes is the ruler */
.panel { background: var(--panel) url(/pegboard.svg) 0 0 / 28px 28px; color: #fff; padding: 56px 16px; background-position: 50% 0; }
.panel + .panel { border-block-start: 8px solid var(--nickel); }
.wall { padding: 48px 16px; }
.wall + .wall { padding-block-start: 0; }
.bar { padding-inline: 16px; }

h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.25rem); font-weight: 700; letter-spacing: -.01em; max-inline-size: 24ch; }
h2 { font-size: clamp(1.65rem, 1.2rem + 1.7vw, 2.4rem); font-weight: 650; }
.lead { font-size: clamp(1.1rem, 1rem + .5vw, 1.3rem); font-weight: 450; max-inline-size: 36em; margin-block-start: 1rem; }

/* Header sits over the hero panel so the texture is one piece */
.bar { position: absolute; inset-inline: 0; inset-block-start: 0; z-index: 5; color: #fff; }
.bar-solid, .bar-solid.panel { position: static; padding-block: 0; }
.bar-in { display: flex; align-items: center; gap: 12px; min-block-size: 72px; }
.brand { white-space: nowrap; display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.logo { inline-size: 34px; block-size: 34px; fill: #fff; flex: none; }
.chip { border: 1.5px solid rgba(255, 255, 255, .75); border-radius: 999px; padding: .1rem .7rem; font-size: .85rem; font-weight: 500; white-space: nowrap; }
.langs { margin-inline-start: auto; display: flex; gap: 2px; }
.langs a { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: .7rem; border-radius: 8px; color: #fff; font-weight: 500; text-decoration: none; }
.langs .full { display: none; }

.langs a[aria-current="true"] { background: #fff; color: var(--panel); }

/* Hero */
.hero { padding-block: 112px 56px; }
.hero-grid { display: grid; gap: clamp(28px, 5vw, 64px); align-items: center; }
.scene { position: relative; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.scene::before { content: ""; position: absolute; inset-block-start: 0; left: 50%; inline-size: 120px; margin-left: -60px; block-size: 8px; border-radius: 4px; background: var(--nickel); box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 6px 8px -4px rgba(0, 0, 0, .35); }
/* The keyring: one key per city on one ring. Each key is its own layer turning about the ring's
   centre; data-s is its place in the fan (0 hangs in front, +-1 and +-2 fan out behind, +-3 is tucked
   away). Changing the city turns the ring one key at a time (site.js). The turned layers' boxes reach over
   the tag beside them, so the ring takes no pointer events and keeps its z-order to itself. */
.keyring { position: relative; isolation: isolate; pointer-events: none; margin-block-start: -3px; inline-size: 120px; aspect-ratio: 200 / 270; flex: none; transition: transform var(--dur-press) var(--ease-out); }
.keyring.in { transform: translateY(12px); }
.k, .kr { position: absolute; left: 0; top: 0; inline-size: 100%; block-size: 100%; overflow: visible; }
.k { transform-origin: 50% 12.6%; transition: transform 280ms var(--ease-out), opacity var(--dur-ui) var(--ease-out); filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .3)); }
/* Keys hang, so they swing: a damped spring (zeta 0.5, ~16% overshoot, settles in 600ms) written as a CSS
   linear() curve, no library. A browser without linear() drops this rule and keeps the ease-out above. */
.k { transition: transform 600ms linear(0, 0.04, 0.144, 0.286, 0.447, 0.608, 0.758, 0.888, 0.993, 1.071, 1.123, 1.153, 1.163, 1.158, 1.142, 1.119, 1.093, 1.067, 1.042, 1.021, 1.003, 0.99, 0.981, 0.976, 0.973, 0.974, 0.976, 0.98, 0.984, 0.989, 1), opacity var(--dur-ui) var(--ease-out); }
.k .metal { fill: #a9b4c1; stroke: var(--nickel-shade); stroke-width: 1.5; stroke-linejoin: round; transition: fill var(--dur-ui); }
.k .groove { fill: none; stroke: var(--nickel-shade); stroke-width: 1.5; stroke-linecap: round; opacity: .55; }
.k[data-s="0"] { z-index: 5; filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .35)); }
.k[data-s="0"] .metal { fill: var(--nickel); }
.k[data-s="1"] { z-index: 4; transform: rotate(-15deg) scale(.9); }
.k[data-s="-1"] { z-index: 4; transform: rotate(15deg) scale(.9); }
.k[data-s="2"] { z-index: 3; transform: rotate(-29deg) scale(.82); }
.k[data-s="-2"] { z-index: 3; transform: rotate(29deg) scale(.82); }
.k[data-s="3"] { z-index: 1; transform: rotate(-42deg) scale(.76); opacity: 0; }
.k[data-s="-3"] { z-index: 1; transform: rotate(42deg) scale(.76); opacity: 0; }
.keyring.still .k, .k.still { transition: none; }
.kr { z-index: 6; }
.kr .nail { fill: var(--nickel-shade); }
.kr .wire { fill: none; stroke: var(--nickel-shade); stroke-width: 3.5; }

/* Tags: paper, a punched hole with a reinforcing ring, a short hang shadow */
.tag { position: relative; background: var(--tag); color: var(--ink); border-radius: 10px; box-shadow: 0 1px 0 rgba(0, 0, 0, .25), 0 10px 14px -6px rgba(0, 0, 0, .38); }
.tag::before { content: ""; position: absolute; inset-block-start: 10px; left: 50%; inline-size: 14px; block-size: 14px; margin-left: -7px; border-radius: 50%; background: var(--panel); border: 3px solid #e4e9f0; box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
.strip { position: absolute; inset-block-start: 8px; inset-inline-end: 10px; border: 1.5px solid var(--steel); border-radius: 4px; padding: 0 .4rem; font-size: .72rem; font-weight: 600; color: var(--steel); line-height: 1.5; background: var(--tag); }

.cut { inline-size: min(100%, 364px); padding: 38px 20px 20px; }
.tag-title { font-size: 1.1rem; font-weight: 600; }
.code { display: flex; align-items: baseline; gap: 10px; margin-block: 8px 4px; font-size: .9rem; color: var(--muted); }
#code { font-weight: 600; font-size: 1.05rem; letter-spacing: .06em; color: var(--ink); background: #edf1f7; border-radius: 6px; padding: .1rem .55rem; unicode-bidi: isolate; }

.city { border: 0; padding: 0; margin: 14px 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.city legend { padding: 0; margin-block-end: 8px; font-size: .9rem; color: var(--muted); float: inline-start; inline-size: 100%; }
.city label { position: relative; }
.city input { position: absolute; opacity: 0; inline-size: 1px; block-size: 1px; }
.city span { display: inline-flex; align-items: center; min-block-size: 44px; padding-inline: .8rem; font-size: .95rem; border: 1.5px solid var(--tag-line); border-radius: 999px; font-weight: 600; cursor: pointer; transition: background-color var(--dur-press), color var(--dur-press); }
.city input:checked + span { background: var(--panel); border-color: var(--panel); color: #fff; }
.city input:focus-visible + span { outline: 3px solid var(--panel); outline-offset: 2px; }

.range { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0 10px; margin-block-start: 12px; font-size: .9rem; color: var(--muted); }
.range output { font-size: 1.1rem; font-weight: 600; color: var(--ink); }
input[type=range] { grid-column: 1 / -1; appearance: none; -webkit-appearance: none; inline-size: 100%; block-size: 34px; margin: 0; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { block-size: 6px; border-radius: 3px; background: var(--tag-line); }
input[type=range]::-moz-range-track { block-size: 6px; border-radius: 3px; background: var(--tag-line); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; inline-size: 28px; block-size: 28px; margin-top: -11px; border-radius: 50%; background: var(--steel); border: 7px solid var(--nickel); }
input[type=range]::-moz-range-thumb { inline-size: 14px; block-size: 14px; border-radius: 50%; background: var(--steel); border: 7px solid var(--nickel); }
input[type=range]:focus-visible { outline-offset: 2px; border-radius: 6px; }

/* The one black object per viewport: the D-and-keyhole plate that is the action */
.plate { display: inline-flex; align-items: center; gap: .8rem; min-block-size: 56px; padding-inline: 1.2rem 1.6rem; margin-block-start: 18px;
  background: var(--plate); color: #fff; font-weight: 600; font-size: 1.05rem; text-decoration: none;
  border-radius: 8px 999px 999px 8px;
  transition: transform var(--dur-press) var(--ease-out), background-color var(--dur-press); }
.plate:active { transform: scale(.97); }
.keyhole { inline-size: 22px; block-size: 22px; fill: var(--tag); flex: none; }
.cut .plate { inline-size: 100%; }
.panel .plate:focus-visible { outline-color: #fff; }
.cut .plate:focus-visible { outline-color: var(--panel); }
.note { margin-block-start: 10px; font-size: .85rem; color: var(--muted); }
.note a { color: var(--link); }

/* Merge demonstration: every tag hangs from its own peg on the board */
.defs { position: absolute; inline-size: 0; block-size: 0; }
.peg { position: absolute; left: 50%; inset-block-start: -26px; margin-left: -6px; inline-size: 12px; block-size: 34px; fill: var(--nickel-shade); overflow: visible; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .35)); }
.merge-demo { display: grid; gap: 56px; align-items: center; justify-items: center; margin-block-start: 56px; }
.group { display: grid; gap: 20px; justify-items: center; }
.tags { position: relative; }
.group { position: relative; }
.group + .group::before { content: ""; position: absolute; left: 50%; inset-block-start: -56px; inline-size: 3px; block-size: 30px; margin-left: -1.5px; background: var(--nickel); }
.link { display: none; position: absolute; inset-block: 0; inset-inline-start: 100%; inline-size: 96px; block-size: 100%; fill: none; stroke: var(--nickel); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.link .ring { stroke: var(--nickel-shade); stroke-width: 3; }
.cap { font-weight: 600; font-size: 1rem; }
.copies { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 156px); gap: 56px 24px; align-items: start; }
.mini { padding: 32px 10px 10px; display: grid; gap: 8px; font-size: .82rem; line-height: 1.35; }
.mini::before { inline-size: 10px; block-size: 10px; margin-left: -5px; inset-block-start: 9px; border-width: 2px; }
.mini .strip { font-size: .7rem; inset-block-start: 5px; inset-inline-end: 6px; }
/* The same flat as it looks in four places: a chat message, a channel post, a board row, a message with a photo.
   Same picture, same words, same price in each, so the eye reads "copies" before it reads anything else. */
.room { display: block; inline-size: 100%; aspect-ratio: 4 / 3; border-radius: 6px; background: #e3ebf5; }
.who { display: flex; align-items: center; gap: 6px; }
.who b { font-weight: 600; font-size: .78rem; min-inline-size: 0; overflow-wrap: anywhere; }
.who time { margin-inline-start: auto; color: var(--muted); font-size: .72rem; font-variant-numeric: tabular-nums; }
.ava { inline-size: 18px; block-size: 18px; border-radius: 50%; background: var(--nickel); flex: none; }
.ava.sq { border-radius: 5px; background: var(--steel); }
.bubble, .post { display: grid; gap: 2px; color: var(--muted); }
.bubble { background: #e9eef5; border-radius: 12px; border-start-start-radius: 3px; padding: 8px 10px; }
.bubble .room { aspect-ratio: 16 / 10; margin-block-end: 5px; }
.mini > .room { aspect-ratio: 16 / 10; }
.bubble b, .post b { font-weight: 700; color: var(--ink); font-size: .9rem; justify-self: start; }
.rowline { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 8px; align-items: center; padding-block-start: 8px; border-block-start: 1px solid var(--tag-line); }
.rowline .room { aspect-ratio: 1; border-radius: 4px; }

.card { inline-size: min(100%, 364px); padding: 40px 18px 20px; }
.one.card { inline-size: 280px; }
.card .room { margin-block-end: 16px; }
.one .room { aspect-ratio: 16 / 10; }
.card h3 { font-size: 1.2rem; line-height: 1.3; font-weight: 600; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-block: 0 8px; font-size: 1.6rem; line-height: 1.2; font-weight: 700; }
.l-city { color: var(--muted); font-size: .9rem; margin-block-start: 2px; }
.sample .specs { margin-block: 14px; padding-block: 14px; }
.merged { margin-block-start: .6rem; font-weight: 600; color: var(--link); }

/* Proof */
.two { display: grid; gap: 40px; align-items: start; }
.facts { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 10px; }
.fact { display: flex; gap: 10px; align-items: flex-start; font-size: .98rem; }
.fact svg { inline-size: 22px; block-size: 22px; flex: none; margin-block-start: 1px; }
.mamad svg { fill: var(--steel); } .warn svg { fill: var(--warn); }
.blank { flex: none; inline-size: 28px; margin-block-start: .85em; border-block-end: 2px dashed var(--steel); }
.fake-link { font-weight: 600; color: var(--link); text-decoration: underline; text-underline-offset: .2em; }
.promises { list-style: none; margin: 24px 0 28px; padding: 0; display: grid; gap: 18px; }
.promises li { display: grid; gap: 2px; }
.promises li + li { border-block-start: 1px solid rgba(255, 255, 255, .3); padding-block-start: 18px; }
.promises b { font-size: 1.15rem; font-weight: 600; }
.promises span { font-weight: 450; max-inline-size: 42em; }

/* Wall bands: reading */
.steps ol { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 28px; }
.steps li { display: grid; gap: 6px; justify-items: start; align-content: start; }
.num { display: grid; place-items: center; inline-size: 44px; block-size: 44px; margin-block-end: 6px; border-radius: 8px; background: var(--panel); color: #fff; font-weight: 700; font-size: 1.15rem; }
.steps h3 { font-size: 1.4rem; font-weight: 600; }
.steps p { color: var(--muted); max-inline-size: 30em; }
.faq h2 { margin-block-end: 12px; }
.faq details { border-block-end: 1px solid var(--tag-line); padding-block: 4px; max-inline-size: 760px; }
.faq summary { display: flex; justify-content: space-between; gap: 16px; align-items: center; min-block-size: 52px; font-weight: 600; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq details[open] > p { animation: rise var(--dur-ui) var(--ease-out); }
@keyframes rise { from { opacity: 0; transform: translateY(-4px); } }
@keyframes fade { from { opacity: 0; } }
.faq summary::after { content: "+"; font-weight: 400; font-size: 1.5rem; color: var(--link); }
.faq details[open] summary::after { content: "\2013"; }
.faq details p { padding-block: 0 16px; color: var(--muted); max-inline-size: 42em; }
.final .wrap { display: grid; gap: 8px; justify-items: start; }
.final .plate { margin-block-start: 16px; }
.foot { border-block-start: 1px solid var(--tag-line); padding-block: 28px; font-size: .95rem; color: var(--muted); }
.foot .wrap { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }
.links { display: flex; gap: 20px; }
.links a { color: var(--link); font-weight: 500; }

/* Privacy page */
.doc .wrap { max-inline-size: 760px; padding-block: 16px 24px; }
.doc h1 { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.2rem); max-inline-size: none; margin-block-end: 20px; }
.doc p { margin-block: 1em; max-inline-size: 65ch; }
.doc a { color: var(--link); }
.back { margin-block-start: 2rem; font-weight: 500; }

@media (max-width: 639px) {
  .bar-in { flex-wrap: wrap; padding-block: 10px 0; row-gap: 2px; }
  .chip { order: 3; }
  .hero { padding-block-start: 120px; }
  .hero-grid { gap: 12px; }
}
@media (max-width: 879px) {
  .hero-copy { display: contents; }
  .hero-copy h1 { order: 1; }
  .scene { order: 2; }
  .hero-copy .lead { order: 3; margin-block-start: 0; }
}
@media (min-width: 640px) {
  .langs .code { display: none; }
  .langs .full { display: inline; }
  .panel { padding: 84px 32px; }
  .wall { padding: 56px 32px; }
  .bar { padding-inline: 32px; }
  .hero { padding-block: 112px 84px; }
  .scene { flex-direction: row; align-items: flex-start; gap: 20px; }
  .scene::before { left: -10px; right: -10px; inline-size: auto; margin-left: 0; }
  .keyring { inline-size: 190px; }
  .cut { margin-block-start: 22px; }
  .cut::after { content: ""; position: absolute; left: 50%; inset-block-start: -22px; inline-size: 3px; block-size: 32px; margin-left: -1.5px; background: var(--nickel-shade); }
}
@media (min-width: 880px) and (max-width: 1099px) {
  .keyring { inline-size: 120px; }      /* two columns: the ring and the 364px tag share half the page */
}
@media (min-width: 1100px) {
  .keyring { inline-size: 220px; }
}
@media (min-width: 1000px) {
  .panel { padding-block: 112px; }
  .wall { padding-block: 84px; }
  .hero { padding-block: 140px 112px; }
}
@media (min-width: 880px) {
  .merge-demo { grid-template-columns: auto auto; justify-content: start; column-gap: 96px; }
  .link { display: block; }
  .group + .group::before { display: none; }
  [dir=rtl] .link { transform: scaleX(-1); }
  .steps ol { grid-template-columns: repeat(3, 1fr); gap: 36px; }
  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .two { grid-template-columns: minmax(0, 540px) minmax(0, 1fr); gap: 56px; }
  .sample { inline-size: 100%; display: grid; grid-template-columns: 184px minmax(0, 1fr); column-gap: 20px; align-items: start; }
  .sample .room { aspect-ratio: 3 / 4; margin-block-end: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .plate:hover { background: #1b1d21; }
  .langs a:hover { background: rgba(255, 255, 255, .18); }
  .faq summary:hover { color: var(--link); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .keyring, .k { transition: none; }
  .k .metal { transition: fill var(--dur-ui); }
  .keyring.in { transform: none; }
  .plate { transition: background-color var(--dur-press); }
  .plate:active { transform: none; }
  .faq details[open] > p { animation: fade var(--dur-ui) ease; }
}

/* Web cabinet: the same world at working density (Operate). The panel is the header band only. */
.cab .bar-in { flex-wrap: wrap; row-gap: 4px; padding-block: 8px; }
.tabs { display: flex; gap: 4px; margin-inline-start: auto; }
.tab, .ghost, .chipbtn { font: inherit; cursor: pointer; border-radius: 999px; min-block-size: 44px; padding-inline: 1rem; transition: background-color var(--dur-press), color var(--dur-press); }
.tab { background: transparent; color: #fff; border: 1.5px solid transparent; font-weight: 500; }
.tab.on { background: #fff; color: var(--panel); font-weight: 600; }
.cab .bar .ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255, 255, 255, .75); }
.cab-main { padding-block-start: 32px; min-block-size: 70vh; }
.cab-main h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); max-inline-size: none; margin-block-end: 16px; }
.muted { color: var(--muted); }
.alert { color: var(--error); font-weight: 500; }
.notice { display: grid; gap: 12px; justify-items: start; max-inline-size: 36em; padding-block: 24px; }
.rows, .feedlist { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.row { display: grid; gap: 6px; padding: 16px; border: 1.5px solid var(--tag-line); border-radius: 10px; background: var(--tag); }
.row.off b { color: var(--muted); }
.row-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.strip-in { border: 1.5px solid var(--steel); border-radius: 4px; padding: 0 .4rem; font-size: .75rem; font-weight: 600; color: var(--steel); }
.acts { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-block-start: 4px; }
.ghost { background: var(--wall); color: var(--ink); border: 1.5px solid var(--ink); font-weight: 500; }
.ghost.danger { color: var(--error); border-color: var(--error); }
.ghost.danger.solid { background: var(--error); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 16px; }
.chipbtn { background: var(--tag); color: var(--ink); border: 1.5px solid var(--tag-line); font-weight: 600; font-size: .95rem; }
.chipbtn.on { background: var(--panel); border-color: var(--panel); color: #fff; }
.cab [hidden] { display: none; }
.cab-main { padding-block-start: 36px; }
.view-heading { margin-block-end: 24px; }
.view-heading h1 { margin-block-end: 8px; }
.view-heading p { font-size: 1rem; max-inline-size: 60ch; }
.chips { margin-block-end: 24px; }
.feedlist { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 28px 20px; align-items: start; padding-block-start: 20px; border-block-start: 2px solid var(--nickel); }
.feed { inline-size: auto; padding: 0; box-shadow: none; border: 1px solid var(--tag-line); overflow: hidden; }
.feed::before { content: none; }
.listing-photo { position: relative; aspect-ratio: 4 / 3; background: #edf1f5; border-block-end: 1px solid var(--tag-line); overflow: hidden; touch-action: pan-y; }
.photo-stage, .apartment-image { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; }
.photo-stage { pointer-events: none; }
.apartment-image { display: block; object-fit: cover; user-select: none; }
.photo-pending { opacity: 0; }
.photo-enter-next { animation: photo-next-in 180ms ease-out both; }
.photo-enter-prev { animation: photo-prev-in 180ms ease-out both; }
/* The outgoing image stays opaque underneath: the placeholder never flashes through. */
.photo-leaving { opacity: 1; }
@keyframes photo-next-in { from { opacity: 0; transform: translateX(3%); } to { opacity: 1; transform: translateX(0); } }
@keyframes photo-prev-in { from { opacity: 0; transform: translateX(-3%); } to { opacity: 1; transform: translateX(0); } }
.photo-fallback { display: grid; align-content: center; justify-items: center; gap: 16px; block-size: 100%; padding: 28px; color: var(--muted); font-size: .9rem; text-align: center; background: radial-gradient(circle, #bbc9d8 1px, transparent 1px) 0 0 / 20px 20px, linear-gradient(135deg, #edf2f8, #f9fafc); }
.photo-fallback svg { inline-size: 80px; block-size: 80px; padding: 16px; border: 1px solid #c6d2df; border-radius: 18px; background: #f5f8fc; fill: none; stroke: #6b83a0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.photo-controls { position: absolute; inset: 0; pointer-events: none; }
.photo-step, .photo-retry, .photo-counter { position: absolute; border: 1px solid rgb(255 255 255 / .65); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 2px 12px rgb(0 0 0 / .18), inset 0 1px 0 rgb(255 255 255 / .3); }
.photo-step, .photo-retry { background: rgb(255 255 255 / .58); color: #142133; pointer-events: auto; min-block-size: 44px; min-inline-size: 44px; cursor: pointer; font-family: inherit; }
.photo-step { display: grid; place-items: center; inset-block-start: 50%; transform: translateY(-50%); padding: 0; border-radius: 50%; opacity: .85; transition: opacity 150ms ease; }
.photo-prev { inset-inline-start: 10px; }
.photo-next { inset-inline-end: 10px; }
.photo-step svg { inline-size: 24px; block-size: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.photo-counter { inset-inline-end: 12px; inset-block-end: 12px; background: rgb(14 24 39 / .62); color: #fff; border-color: rgb(255 255 255 / .25); border-radius: 20px; font-size: .75rem; font-weight: 500; padding: 5px 10px; white-space: nowrap; }
.photo-retry { inset-inline-end: 12px; inset-block-start: 12px; border-radius: 22px; padding-inline: 14px; font-size: .8rem; font-weight: 600; }
.listing-photo:focus-visible, .photo-step:focus-visible, .photo-retry:focus-visible { outline: 3px solid var(--panel); outline-offset: -4px; box-shadow: inset 0 0 0 6px #fff; }
@media (prefers-reduced-motion: reduce) {
  .photo-enter-next, .photo-enter-prev, .photo-leaving { animation: none; }
  .photo-step { transition: none; }
}
.listing-content { display: flex; flex-direction: column; align-items: stretch; padding: 20px; }
.match-state { align-self: flex-start; font-size: .75rem; font-weight: 500; line-height: 1.4; color: var(--muted); border: 1px solid var(--tag-line); border-radius: 4px; padding: 4px 8px; margin-block-end: 12px; }
.match-state.exact { color: #16673c; border-color: #b4cbbb; background: #f0f6f2; }
.feed .price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px; margin-block: 0 12px; line-height: 1.2; font-size: 1.65rem; }
.price-period { font-weight: 400; font-size: .85rem; color: var(--muted); }
.feed .price-unknown { font-size: 1.2rem; font-weight: 500; min-block-size: 32px; }
.feed .listing-address { font-size: 1.2rem; line-height: 1.3; font-weight: 600; overflow-wrap: anywhere; text-align: start; }
.listing-location { color: var(--muted); font-size: .85rem; min-block-size: 22px; margin-block-start: 4px; text-align: start; overflow-wrap: anywhere; }
.specs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 12px; padding-block: 16px; margin-block: 16px; border-block: 1px solid var(--tag-line); }
.specs dt { font-size: .75rem; color: var(--muted); margin-block-end: 2px; }
.specs dd { margin: 0; font-size: 1rem; font-weight: 600; }
.specs .unknown dd { font-size: .85rem; font-weight: 400; color: var(--muted); }
.listing-description { margin-block-end: 20px; }
.listing-description summary { list-style: none; cursor: pointer; }
.listing-description summary::-webkit-details-marker { display: none; }
.text-preview { display: block; color: var(--muted); font-size: .9rem; line-height: 1.55; overflow-wrap: anywhere; text-align: start; margin-block-end: 8px; }
.description-open, .description-close { display: block; color: var(--link); font-size: .85rem; font-weight: 500; text-decoration: underline; text-underline-offset: .2em; padding-block: 10px; }
.description-close, .listing-description[open] .description-open, .listing-description[open] .text-preview { display: none; }
.listing-description[open] .description-close { display: block; }
.feed .body { margin-block-start: 12px; font-size: .95rem; color: var(--muted); overflow-wrap: anywhere; white-space: pre-line; text-align: start; }
.listing-warnings { margin-block-end: 16px; }
.feed .fact.warn { color: #855400; font-size: .85rem; font-weight: 500; }
.orig { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-block-size: 44px; padding-block: 10px; margin-block-start: auto; border-block-start: 1px solid var(--tag-line); font-size: .95rem; font-weight: 600; color: var(--link); }
.orig::after { content: ""; inline-size: 12px; block-size: 12px; flex: none; border-block-start: 1.5px solid currentColor; border-inline-end: 1.5px solid currentColor; transform: rotate(45deg); }
[dir=rtl] .orig::after { transform: rotate(-45deg); }
.rows { max-inline-size: 840px; gap: 16px; border-block-start: 2px solid var(--nickel); padding-block-start: 20px; }
.row { position: relative; padding: 24px; gap: 12px; }
.row-head b { font-size: 1.15rem; overflow-wrap: anywhere; }
.search-state { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--muted); margin-inline-start: auto; }
.search-state::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; border: 1px solid currentColor; }
.search-state.active::before { background: var(--panel); border-color: var(--panel); }
.row.off { background: var(--wall); border-style: dashed; }
.row .acts { padding-block-start: 12px; border-block-start: 1px solid var(--tag-line); }
.search-hint { margin-block-start: 24px; font-size: .95rem; }
.empty-state { padding-block: 28px; border-block-start: 2px solid var(--nickel); }
@media (hover: hover) and (pointer: fine) {
  .photo-step { opacity: 0; pointer-events: none; }
  .listing-photo:hover .photo-step, .listing-photo:focus-within .photo-step { opacity: 1; pointer-events: auto; }
  .photo-step:hover { background: rgb(255 255 255 / .75); }
  .orig:hover { text-decoration-thickness: 2px; }
}
@media (any-pointer: coarse) {
  .photo-step { opacity: .85; pointer-events: auto; }
}
@media (max-width: 639px) {
  .cab .bar-in { gap: 8px; padding-block: 12px; }
  .cab .brand { margin-inline-end: auto; }
  .cab .tabs { order: 3; flex-basis: 100%; margin-inline-start: 0; margin-block-start: 4px; }
  .cab .tab { flex: 1; }
  .cab-main { padding-block-start: 28px; }
  .view-heading { margin-block-end: 20px; }
  .feedlist { gap: 24px; }
  .listing-photo { aspect-ratio: 4 / 3; }
  .listing-content { padding: 20px; }
  .row { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .cab { scroll-behavior: auto; }
  .cab .tab, .cab .ghost, .cab .chipbtn { transition: none; }
}