/* =========================================================
   BLLEY — UNIVERSAL GATEWAY STYLESHEET (UI-009)

   Compiled asset — do not edit directly. Assembled from the locked design
   package, not an interpretation of it: the package's bytes follow this banner
   unchanged, and an automated test asserts they still do.

   Anything after the package is the Blade-integration additions layer, which
   carries no palette, type or spacing decision — only the behaviour the
   package used to provide. A test asserts that.

   The package is immutable, so this file changes only through an issue that
   authorises a change to the locked design.
   ========================================================= */

/* =========================================================
   BLLEY — UNIVERSAL GATEWAY  ·  blley.com
   UI-009. The permanent root of the Blley umbrella.

   WHAT THIS PAGE IS
     Brand → service → search → useful results. Nothing else.

   WHAT THIS PAGE IS NOT
     Not the Property marketplace (that is UI-001 at property.blley.com).
     Not a corporate umbrella page. Not a redirect. Not a content portal.

   THREE PRINCIPLES
     1. The search leads — but it never floats alone.
        Identity sits high and left, the search sits immediately beneath it,
        and real inventory begins inside the first viewport. Clarity and focus,
        NOT a centred logo in an empty screen. No decorative hero, and no
        decorative whitespace either.
     2. One service today, many tomorrow — with no redesign. (BLLEY-UI-009-REV1)
        The service selector is a real tab system that lives *inside* the search
        architecture, and it renders only when two or more Blley verticals are
        live. While Property is the only vertical the selector is not shown at
        all — no strip, no lone pill, no placeholder — the sole vertical is
        implicit and the panel begins at "Looking for", with the currency on
        that first row. A second live service brings the selector back above
        "Looking for" without demoting Property and without touching this
        stylesheet.
     3. Speed is a feature.
        No framework, no hero video, no decorative imagery, listing media lazy
        below the fold. The search must be interactive almost immediately.

   ABOVE-THE-FOLD CONTRACT (1440×900)
     header (the one Blley logo) · "Find what you need." ·
     Looking for: Residential/Commercial ·
     Buy/Rent/New projects · currency · search field · three filters · Search ·
     Ask Blley · and the first row of real listings.
   ========================================================= */

/* ---------- 1. BLLEY MASTER IDENTITY TOKENS (from locked UI-001) ---------- */
:root{
  --brand-700:#0F38B8;
  --brand-600:#1447E6;      /* primary action */
  --brand-500:#2E62FF;
  --brand-100:#DCE6FF;
  --brand-50 :#EEF3FF;
  --navy-900:#071A45;
  --ink-900:#0A1A33;
  --ink-700:#243654;
  --ink-500:#4A5B78;
  --ink-400:#6B7A94;
  --accent-500:#F2761B;     /* used very sparingly */
  --accent-50:#FFF3E8;
  --line:#E4E9F2;
  --line-soft:#EFF2F8;
  --canvas:#F5F7FB;
  --white:#FFFFFF;
  --ok:#127A56;

  --font-ui:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;

  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:44px; --s8:64px; --s9:88px;
  --r-sm:8px; --r-md:14px; --r-lg:22px; --r-pill:999px;

  --e1:0 1px 2px rgba(10,26,51,.05);
  --e2:0 10px 30px -14px rgba(10,26,51,.22);
  --e3:0 24px 60px -26px rgba(10,26,51,.28);

  --shell:1180px;
  --gutter:28px;
  --header-h:66px;
  --ease:cubic-bezier(.2,.7,.3,1);
}

/* ---------- 2. RESET / BASE ---------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--font-body);font-size:16px;line-height:1.6;color:var(--ink-700);
  background:var(--white);overflow-x:hidden;-webkit-font-smoothing:antialiased
}
h1,h2,h3{margin:0;color:var(--ink-900);font-family:var(--font-ui);letter-spacing:-.02em;line-height:1.2}
h2{font-size:20px;font-weight:700}
h3{font-size:16px;font-weight:700}
p{margin:0}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
svg{max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select{font:inherit}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--brand-600);outline-offset:2px;border-radius:4px}
.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:999;background:#fff;padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-sm)}

.mock-flag{
  display:flex;align-items:center;justify-content:center;gap:10px;background:var(--navy-900);color:#B8C6E0;
  font-size:12.5px;padding:8px 40px 8px 16px;position:relative;flex-wrap:wrap;font-family:var(--font-ui)
}
.mock-flag b{color:#fff;font-weight:700}
.mock-flag .dot{width:6px;height:6px;border-radius:50%;background:var(--accent-500)}
.flag-x{position:absolute;right:12px;color:#8496B8;font-size:19px;line-height:1;padding:4px 8px}

/* ---------- 3. BUTTONS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;font-family:var(--font-ui);font-weight:700;
  font-size:14.5px;height:46px;padding:0 22px;border-radius:var(--r-sm);white-space:nowrap;transition:.18s var(--ease)
}
.btn svg{width:16px;height:16px;flex-shrink:0}
.btn-primary{background:var(--brand-600);color:#fff}
.btn-primary:hover{background:var(--brand-700)}
.btn-outline{border:1px solid var(--line);color:var(--ink-900);background:#fff}
.btn-outline:hover{border-color:var(--brand-600);color:var(--brand-600)}
.btn-quiet{color:var(--ink-700);padding:0 12px}
.btn-quiet:hover{color:var(--brand-600)}
.btn-sm{height:38px;padding:0 14px;font-size:13.5px}
.btn-lg{height:56px;padding:0 30px;font-size:16px}
.alink{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-ui);font-size:14.5px;font-weight:700;color:var(--brand-600)}
.alink:hover{color:var(--brand-700)}
.alink svg{width:15px;height:15px}

/* ---------- 4. HEADER — the single authoritative Blley brand location ----------
   BRAND HIERARCHY (locked): the global header carries the umbrella identity and
   nothing else does. The body carries user intent. The logo therefore has
   confident presence — 36px, larger than a utility mark — while the header bar
   height is UNCHANGED at 66px: the logo grows inside the existing bar, using the
   padding that was already there (15px clearance above and below). No taller
   header, no extra vertical padding, no page content pushed down.
   The empty middle is intentional: no Home, Explore, Discover, Marketplace,
   property navigation or filler icons. */
.site-header{border-bottom:1px solid var(--line-soft);background:#fff}
.header-inner{display:flex;align-items:center;gap:var(--s5);height:var(--header-h)}
.header-mark{display:flex;align-items:center;flex-shrink:0}
.header-mark img{height:36px;width:auto}
.header-mark .fb{display:none;font-family:var(--font-ui);font-size:24px;font-weight:800;color:var(--navy-900);letter-spacing:-.02em}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:8px}
.header-actions .btn{font-size:14px}

/* ---------- 5. GATEWAY — structured, useful, high on the page ----------
   The body begins with intent, not identity: there is exactly one Blley logo on
   this page and it lives in the header above. No second mark, badge or icon
   stands in for it here, and no whitespace was left behind where it used to be —
   the search simply moved up. */
.gateway{padding:26px 0 26px;background:linear-gradient(180deg,var(--brand-50) 0%,#fff 88%)}
.gateway-inner{max-width:none;margin:0;text-align:left}
.brandblock{margin-bottom:14px}
.gateway-h1{font-family:var(--font-ui);font-size:28px;font-weight:800;letter-spacing:-.025em;color:var(--ink-900);margin:0}
.gateway-h1 span{color:var(--ink-400);font-weight:600;font-size:22px;letter-spacing:-.015em}

/* Search panel — full shell width, the structural centre of the page */
.searchpanel{
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--e2);text-align:left;overflow:visible
}
/* Service strip: the selector belongs to the search architecture. A second
   live service appears here beside Property; nothing else moves. */
.panel-strip{
  display:flex;align-items:center;gap:var(--s4);padding:8px 14px;border-bottom:1px solid var(--line-soft);
  background:linear-gradient(180deg,#FAFCFF,#fff);border-radius:var(--r-lg) var(--r-lg) 0 0
}
.services{display:flex;align-items:center;gap:4px;min-width:0;overflow:visible}
.service{
  display:inline-flex;align-items:center;gap:9px;height:40px;padding:0 20px;border-radius:var(--r-pill);
  font-family:var(--font-ui);font-size:15px;font-weight:700;color:var(--ink-500);transition:.18s var(--ease);white-space:nowrap
}
.service:hover{color:var(--ink-900);background:var(--brand-50)}
.service[aria-selected="true"]{background:var(--brand-600);color:#fff}
.service[aria-selected="true"]:hover{background:var(--brand-700)}
.service svg{width:17px;height:17px}
.panel-body{padding:var(--s4) 18px 16px}
.segrow{display:flex;align-items:center;gap:var(--s4);flex-wrap:wrap;margin-bottom:12px}
.seg{display:inline-flex;gap:2px;background:var(--canvas);padding:3px;border-radius:var(--r-pill)}
.seg button{
  font-family:var(--font-ui);font-size:13.5px;font-weight:700;color:var(--ink-500);padding:8px 16px;
  border-radius:var(--r-pill);transition:.16s;min-height:38px;white-space:nowrap
}
.seg button[aria-selected="true"]{background:#fff;color:var(--brand-600);box-shadow:var(--e1)}
.seg button:hover:not([aria-selected="true"]){color:var(--ink-900)}
.seg--intent button[aria-selected="true"]{background:var(--brand-600);color:#fff;box-shadow:none}
.seg-label{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400)}

/* Query and action on one row — compact, and it keeps the fold budget */
.searchrow{display:flex;gap:10px;align-items:stretch}
.searchbar{position:relative;display:flex;align-items:center;flex:1;min-width:0}
.searchbar svg{position:absolute;left:18px;width:20px;height:20px;color:var(--ink-400);pointer-events:none}
.searchbar input{
  width:100%;height:58px;padding:0 18px 0 50px;border:1px solid var(--line);border-radius:var(--r-md);
  font-family:var(--font-body);font-size:17px;color:var(--ink-900);background:#fff
}
.searchbar input::placeholder{color:var(--ink-400)}
.searchbar input:focus{outline:none;border-color:var(--brand-600);box-shadow:0 0 0 4px var(--brand-100)}
.searchrow .go{height:58px;padding:0 36px;font-size:15.5px;flex-shrink:0}

.filters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;margin-top:10px;align-items:end}
/* Deeper filtering is Blley Property's job. This is a handoff, not a promise
   the root can keep — see README §5. */
.morelink{
  display:inline-flex;align-items:center;gap:7px;height:48px;padding:0 14px;border-radius:var(--r-sm);
  font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--ink-500);white-space:nowrap
}
.morelink:hover{color:var(--brand-600);background:var(--brand-50)}
.morelink svg{width:14px;height:14px}
.field{display:flex;flex-direction:column;gap:5px;min-width:0}
.field label{font-family:var(--font-ui);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-400)}
.field select{
  height:48px;padding:0 34px 0 13px;border:1px solid var(--line);border-radius:var(--r-sm);background:#fff;
  font-size:15px;color:var(--ink-900);appearance:none;width:100%;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%236B7A94' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px
}
.field select:focus{outline:none;border-color:var(--brand-600);box-shadow:0 0 0 3px var(--brand-100)}

.searchfoot{display:flex;align-items:center;gap:var(--s4);margin-top:12px;flex-wrap:wrap;font-size:13.5px;color:var(--ink-400)}
.chip{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 13px;border:1px solid var(--line);
  border-radius:var(--r-pill);font-size:13.5px;color:var(--ink-700);background:#fff;transition:.16s
}
.chip:hover{border-color:var(--brand-600);color:var(--brand-600)}
.curbtn{
  display:inline-flex;align-items:center;gap:7px;height:34px;padding:0 12px;border:1px solid var(--line);
  border-radius:var(--r-pill);font-family:var(--font-ui);font-size:13px;font-weight:700;color:var(--ink-700);background:#fff
}
.curbtn:hover{border-color:var(--brand-600);color:var(--brand-600)}
.curbtn svg{width:13px;height:13px}
.panel-strip .curbtn{height:36px}
.menu-wrap{position:relative;margin-left:auto}
.menu{
  position:absolute;top:calc(100% + 6px);right:0;min-width:230px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);box-shadow:var(--e3);padding:6px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:.18s;z-index:70
}
.menu.is-open{opacity:1;visibility:visible;transform:translateY(0)}
.menu button{display:flex;width:100%;text-align:left;padding:11px 13px;border-radius:var(--r-sm);font-size:14.5px;color:var(--ink-700);min-height:44px;align-items:center}
.menu button:hover{background:var(--brand-50)}
.menu button.is-on{background:var(--brand-50);color:var(--brand-600);font-weight:700}

/* Ask Blley — one restrained line, close to the search, never a chatbot card */
.ask{
  display:flex;align-items:center;gap:12px;width:100%;margin:12px 0 0;padding:10px 14px;
  border:1px dashed var(--line);border-radius:var(--r-pill);background:#fff;text-align:left;transition:.18s var(--ease)
}
.ask:hover{border-color:var(--brand-600);border-style:solid;box-shadow:var(--e1)}
.ask-badge{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-ui);font-size:12px;font-weight:700;
  letter-spacing:.04em;color:var(--brand-600);background:var(--brand-50);padding:5px 10px;border-radius:var(--r-pill);flex-shrink:0
}
.ask-badge i{width:6px;height:6px;border-radius:50%;background:var(--brand-600)}
.ask-text{flex:1;font-size:14.5px;color:var(--ink-500);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ask svg{width:16px;height:16px;color:var(--ink-400);margin-left:auto;flex-shrink:0}

/* ---------- 6. RESULTS BELOW — evidence, not a marketplace homepage ----------
   Inventory begins inside the first viewport. The page must never feel empty
   beneath the search. */
.section{padding:var(--s6) 0 var(--s7)}
.section--soft{background:var(--canvas);padding:30px 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s5);margin-bottom:18px;flex-wrap:wrap}
.sec-head p{font-size:14px;color:var(--ink-400);margin-top:4px}
h2{font-size:21px}

.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px var(--s4)}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:.2s var(--ease)}
.card:hover{box-shadow:var(--e2);border-color:#CFD9EA}
.card-media{position:relative;aspect-ratio:4/3;background:var(--brand-50);overflow:hidden}
.card-media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.card:hover .card-media img{transform:scale(1.04)}
.card-media.is-fallback::after{
  content:attr(data-fallback);position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-ui);font-size:12.5px;font-weight:700;color:var(--brand-600);text-align:center;padding:14px
}
.badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;z-index:2;flex-wrap:wrap}
.badge{
  font-family:var(--font-ui);font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  padding:5px 9px;border-radius:6px;background:rgba(255,255,255,.96);color:var(--ink-900)
}
.badge--premium{background:var(--navy-900);color:#fff}
.badge--new{background:var(--ok);color:#fff}
.card-body{padding:14px;display:flex;flex-direction:column;gap:6px;flex:1}
.card-price{font-family:var(--font-ui);font-size:19px;font-weight:800;color:var(--ink-900);letter-spacing:-.02em}
.card-price small{font-family:var(--font-body);font-size:13px;font-weight:400;color:var(--ink-400);letter-spacing:0}
.card-native{font-size:12px;color:var(--ink-400);margin-top:-3px}
.card-type{font-family:var(--font-ui);font-size:11.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--brand-600)}
.card-loc{display:flex;align-items:center;gap:6px;font-size:13.5px;color:var(--ink-500)}
.card-loc svg{width:13px;height:13px;color:var(--ink-400);flex-shrink:0}
.card-specs{display:flex;gap:12px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line-soft);font-size:13px;color:var(--ink-500);flex-wrap:wrap}
.card-specs b{font-weight:700;color:var(--ink-700)}

/* Explore links — a handful, not the full Dynamic Discovery engine */
.explore-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.explore-label{font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);flex-shrink:0}
.explore{display:flex;gap:9px;flex-wrap:wrap}
.explore a{
  display:inline-flex;align-items:center;height:38px;padding:0 15px;border:1px solid var(--line);border-radius:var(--r-pill);
  background:#fff;font-size:14px;color:var(--ink-700);transition:.16s
}
.explore a:hover{border-color:var(--brand-600);color:var(--brand-600)}

.cta{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;padding:26px 0 0}

/* Optional governed advertising slot — documented, off by default (§41) */
.adslot{
  margin-top:var(--s6);border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--s5);
  text-align:center;color:var(--ink-400);font-size:13px;background:#fff
}
.adslot b{display:block;font-family:var(--font-ui);font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-400);margin-bottom:6px}

/* ---------- 7. HANDOFF PANEL (state E) ---------- */
.handoff{
  position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(94vw,620px);max-height:88vh;background:#fff;
  border-radius:var(--r-lg);box-shadow:var(--e3);z-index:120;display:flex;flex-direction:column;overflow:hidden;
  animation:rise .2s var(--ease)
}
@keyframes rise{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
.scrim{position:fixed;inset:0;background:rgba(7,26,69,.5);z-index:110;animation:fade .18s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.ho-head{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line-soft)}
.ho-head b{font-family:var(--font-ui);font-size:16px;font-weight:800;color:var(--ink-900)}
.ho-head span{font-size:13px;color:var(--ink-400)}
.ho-close{margin-left:auto;width:38px;height:38px;border-radius:var(--r-sm);color:var(--ink-400);display:flex;align-items:center;justify-content:center}
.ho-close:hover{background:var(--canvas);color:var(--ink-900)}
.ho-close svg{width:15px;height:15px}
.ho-body{padding:18px;overflow-y:auto}
.ho-route{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;background:var(--brand-50);
  border-radius:var(--r-md);font-family:var(--font-ui);font-size:14px;font-weight:700;color:var(--navy-900)
}
.ho-route svg{width:16px;height:16px;color:var(--brand-600)}
.ho-route code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:400;font-size:13px;color:var(--ink-700)}
.ho-url{
  margin-top:14px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--canvas);
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:var(--ink-700);
  word-break:break-all;line-height:1.7
}
.ho-url b{color:var(--brand-600);font-weight:700}
.ho-state{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.ho-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:14px;padding:11px 16px;border-bottom:1px solid var(--line-soft);font-size:14px}
.ho-row:last-child{border-bottom:0}
.ho-row dt{color:var(--ink-400)}
.ho-row dd{margin:0;font-weight:600;color:var(--ink-900)}
.ho-note{font-size:12.5px;color:var(--ink-400);line-height:1.65;margin-top:14px}
.ho-foot{padding:14px 18px;border-top:1px solid var(--line-soft);display:flex;gap:10px;flex-wrap:wrap}
.ho-foot .btn{flex:1;min-width:150px}

/* ---------- 8. FOOTER ---------- */
.footer{border-top:1px solid var(--line-soft);padding:var(--s6) 0;font-size:13.5px;color:var(--ink-400)}
.footer-inner{display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.footer a{transition:.15s}
.footer a:hover{color:var(--brand-600)}
.footer-links{display:flex;gap:var(--s5);flex-wrap:wrap}
.footer-right{margin-left:auto;display:flex;align-items:center;gap:var(--s5);flex-wrap:wrap}
.footer-mark{font-family:var(--font-ui);font-weight:800;color:var(--navy-900)}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:130;background:var(--navy-900);color:#fff;
  font-size:14px;padding:13px 20px;border-radius:var(--r-sm);box-shadow:var(--e3);max-width:min(92vw,560px);text-align:center
}
.notes-toggle{position:fixed;right:18px;bottom:18px;z-index:90;background:var(--navy-900);color:#fff;font-family:var(--font-ui);font-size:12.5px;font-weight:700;padding:11px 16px;border-radius:var(--r-sm)}
.notes{position:fixed;top:0;right:0;bottom:0;width:min(94vw,460px);background:#fff;z-index:125;display:flex;flex-direction:column;box-shadow:var(--e3)}
.notes-head{display:flex;align-items:center;justify-content:space-between;padding:16px var(--s5);border-bottom:1px solid var(--line);font-family:var(--font-ui);font-size:17px;font-weight:800;color:var(--ink-900)}
.notes-body{padding:var(--s5);overflow-y:auto}
.notes-body h4{font-family:var(--font-ui);font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--brand-600);margin:20px 0 8px}
.notes-body h4:first-child{margin-top:0}
.notes-body p{font-size:14px;line-height:1.7;color:var(--ink-500)}
.notes-body code{font-size:12.5px;background:var(--canvas);padding:1px 5px;border-radius:4px;color:var(--ink-700)}
.drawer-close{font-size:26px;line-height:1;color:var(--ink-400);width:44px;height:44px}

/* =========================================================
   9. RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .cards{grid-template-columns:repeat(2,1fr)}
  .filters{grid-template-columns:1fr 1fr;gap:9px}
  .morelink{grid-column:1 / -1;justify-content:center;border:1px solid var(--line);height:44px}
}

@media (max-width:720px){
  /* --header-h is UNCHANGED at 58px. Only the logo grows inside it. */
  :root{--gutter:16px;--header-h:58px}
  .header-mark img{height:28px}
  .header-mark .fb{font-size:20px}
  .header-actions .btn{padding:0 12px;font-size:13.5px}
  .mock-flag{font-size:11.5px;padding:7px 34px 7px 12px}
  .mock-flag .hide-sm{display:none}

  /* Mobile must feel useful immediately: brand, Property, class, intent,
     search, filters and Search all within the first screen — no empty hero. */
  /* One Blley logo on the page, and it is in the header. Nothing repeats here. */
  .gateway{padding:16px 0 18px}
  .brandblock{margin-bottom:11px}
  .gateway-h1{font-size:21px}
  /* The descriptor is desktop-only: on mobile the panel below explains itself
     and the vertical budget belongs to the search. */
  .gateway-h1 span{display:none}
  .searchpanel{border-radius:var(--r-md)}
  .panel-strip{padding:6px 8px;border-radius:var(--r-md) var(--r-md) 0 0}
  .services{overflow-x:auto;scrollbar-width:none}
  .services::-webkit-scrollbar{display:none}
  /* Tabs keep their natural width — a single full-bleed tab would read as a
     primary button rather than a service selector. */
  .service{flex:0 0 auto;padding:0 16px;height:38px;font-size:14.5px}
  .panel-body{padding:12px}
  .segrow{gap:8px;margin-bottom:10px}
  .seg{width:100%}
  .seg button{flex:1;padding:8px 8px;font-size:13px}
  .seg-label{display:none}
  .searchrow{flex-direction:column;gap:8px}
  .searchbar input{height:52px;font-size:16px;padding-left:46px}
  .searchbar svg{left:15px;width:18px;height:18px}
  .searchrow .go{height:50px;width:100%;padding:0 20px}
  .filters{grid-template-columns:1fr 1fr;gap:8px}
  .filters .field:nth-child(3){grid-column:1 / -1}
  .field select{height:46px}
  .morelink{height:42px;font-size:13.5px}
  .searchfoot{gap:8px;font-size:12.5px}
  .searchfoot .chip{height:30px;padding:0 11px;font-size:12.5px}
  .menu-wrap{margin-left:auto}
  .menu{right:0;left:auto}
  .ask{margin-top:12px;padding:10px 12px;gap:9px}
  .ask-text{font-size:13.5px}

  .section{padding:18px 0 var(--s6)}
  .section--soft{padding:22px 0}
  .sec-head{margin-bottom:14px}
  .sec-head p{display:none}
  .explore-row{align-items:flex-start;flex-direction:column;gap:10px}
  /* Cards become a swipe rail so listings start immediately without a wall */
  .cards{
    display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
    margin:0 calc(var(--gutter) * -1);padding:0 var(--gutter) 4px
  }
  .cards::-webkit-scrollbar{display:none}
  .card{flex:0 0 78%;scroll-snap-align:start}
  .card-media{aspect-ratio:16/11}
  .explore{gap:8px}
  .cta{flex-direction:column;padding-top:var(--s5)}
  .cta .btn{width:100%}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:14px}
  .footer-right{margin-left:0}

  .handoff{top:auto;left:0;right:0;bottom:0;transform:none;width:100%;max-height:92vh;border-radius:var(--r-lg) var(--r-lg) 0 0;animation:sheet .26s var(--ease)}
  @keyframes sheet{from{transform:translateY(100%)}to{transform:translateY(0)}}
  .ho-row{grid-template-columns:1fr;gap:3px}
  .notes-toggle{bottom:14px;right:14px;font-size:11.5px;padding:9px 13px}
}

/* =========================================================
   10. RTL — the gateway mirrors wholesale, including future tabs
   ========================================================= */
[dir="rtl"] .header-actions,[dir="rtl"] .footer-right,[dir="rtl"] .menu-wrap{margin-left:0;margin-right:auto}
[dir="rtl"] .searchbar svg{left:auto;right:18px}
[dir="rtl"] .searchbar input{padding:0 50px 0 18px}
[dir="rtl"] .field select{background-position:left 12px center;padding:0 13px 0 34px}
[dir="rtl"] .badges{left:auto;right:10px}
[dir="rtl"] .ask svg{margin-left:0;margin-right:auto;transform:scaleX(-1)}
[dir="rtl"] .panel-strip{border-radius:var(--r-lg) var(--r-lg) 0 0}
[dir="rtl"] .alink svg,[dir="rtl"] .morelink svg{transform:scaleX(-1)}
[dir="rtl"] .menu{right:auto;left:0}
[dir="rtl"] .notes{right:auto;left:0}
[dir="rtl"] .cards{margin:0 calc(var(--gutter) * -1)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}

/* =========================================================
   UI-009 — Blade integration additions

   Appended to the locked package by tools/build-gateway-css.py. It exists for
   exactly one reason: the package opened its currency menu from JavaScript, and
   the production gateway ships none.

   Nothing here may carry a palette, type or spacing decision — those belong to
   UI-009 alone, and LockedGatewayArtefactsTest asserts it. Every value below is
   the package's own, restated only so a different trigger reaches it.
   ========================================================= */

/* ---------- Product Owner-approved source-conflict correction ----------

   The governed public shell width is **1240px** (B-82, and the cross-surface
   rule recorded in UI-LOCK-REGISTER.md). UI-009's own `:root` sets
   `--shell:1180px`, which would render the umbrella root visibly narrower than
   the Property marketplace — the exact outcome that rule was written to
   prevent. The Product Owner ruled on issue #33 / PR #34 that the package's
   token is a source-level width conflict rather than an exception that
   overrides the global rule.

   This is the whole correction: **one token**. The package defines `--shell`
   once, in `:root`, so overriding it here reaches every `.shell` on the page
   and nothing else. No component, card, control or spacing value is touched,
   and the mobile `--gutter` override at 720px is untouched — the composition
   simply sits in the governed shell.

   The locked package remains unmodified, exactly as with the UI-005
   save-control ruling in P13: the immutable source stays the historical
   reference, and production carries the minimal approved correction a
   higher-order governed rule requires. */
:root{--shell:1240px}

/* The package toggled `.is-open` on click. `:focus-within` is the same state
   reached by focus instead: the menu opens when the button or a menu item has
   it, and closes when focus leaves. The declarations are copied verbatim from
   the package's own `.menu.is-open` rule, so the open menu is identical
   whichever way it was opened.

   Focus rather than `:hover` because a menu that opens under a passing pointer
   is a menu that opens by accident, and because focus is the state a keyboard
   already produces — the control works the same way for both. */
.menu-wrap:focus-within .menu{opacity:1;visibility:visible;transform:translateY(0)}