/* ============================================================
   ANVUL — universal mobile-native hardening
   Loaded LAST on every skin, every property-review flow, and the
   platform. Fixes cross-device issues without touching desktop:
   - kills horizontal overflow (overflow-x: clip — keeps sticky navs)
   - prevents iOS focus-zoom (form fields >= 16px on phones)
   - long words never overflow headings
   - the property-review flow becomes a true full-screen native app
     on phones (no device bezel, dynamic viewport height)
   ============================================================ */

* { -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* clip (not hidden) so sticky headers keep working and no axis is
   forced to auto — stops the sideways scroll some skins showed */
html, body { overflow-x: clip; max-width: 100%; }

/* media never breaks the grid */
img, svg, video, canvas, picture, image-slot, .slot, [class*="slot-"] { max-width: 100%; }

/* long unbroken words (postcodes, URLs, big display words) wrap */
h1, h2, h3, .hero-h, .section-h, .mk-h1 { overflow-wrap: break-word; word-break: normal; }

/* iOS zooms any focused field under 16px — force the floor on phones */
@media (max-width: 600px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ============================================================
   Property-review flow → native full-screen on phones
   The desk/letterbox + phone bezel are lovely on desktop, but on a
   real phone the flow should BE the screen.
   ============================================================ */
@media (max-width: 600px) {
  .review-page { background: var(--paper, #fff) !important; }
  .review-stage { padding: 0 !important; align-items: stretch !important; }
  .review-intro { padding-left: 20px !important; padding-right: 20px !important; }
  .phone {
    width: 100% !important;
    max-width: 100% !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  .phone-tall { height: auto !important; min-height: calc(100svh - 150px); }
  .phone-status { display: none !important; }   /* real phone already has a status bar */
  .review-top { padding: 16px 18px !important; }
  .review-foot { padding: 18px 20px 28px !important; }
}
@media (max-width: 380px) {
  .screen { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ============================================================
   Landing pages — tighten the very small end (≤380px)
   ============================================================ */
@media (max-width: 400px) {
  .wrap, .nav-in, .statband-in, .schemes-in, .ledger-in, .metricband-in, .timeline-in {
    padding-left: 18px !important; padding-right: 18px !important;
  }
  .capture, .capture-inner { padding: 20px !important; }
  /* keep the two capture fields side by side but never overflow */
  .capture-fields { gap: 10px !important; }
  .hero { padding-top: 32px !important; }
}

/* ============================================================
   Anvul platform — phone behaviour
   ============================================================ */
@media (max-width: 600px) {
  .mk-hero-in { padding-top: 44px !important; }
  .mk-hero-cta { flex-direction: column; align-items: stretch; }
  .mk-hero-cta .btn { width: 100%; }
  .price-grid { grid-template-columns: 1fr !important; }
  /* 18px gutters, but keep a bottom inset that clears the fixed bottom tab-bar
     (shown <=920px) + the home-indicator safe area, so the last row of content
     is never hidden under the bar. */
  .content { padding: 18px 18px calc(74px + env(safe-area-inset-bottom)) !important; }
  /* dashboard editor: rail scrolls horizontally, frame + Bob stack */
  .editor { grid-template-rows: auto 56vh auto !important; }
}

/* ============================================================
   Skin site nav — keep the "Run property check" CTA on-screen on
   phones (it was overflowing the right edge + getting clipped by
   overflow-x:clip). Hide the desktop links/phone, let the firm name
   shrink/ellipsis, and pin the CTA at a tighter phone size so it
   never gets pushed off-screen. Applies to all 13 skins.
   ============================================================ */
@media (max-width: 600px) {
  .nav-links, .nav-phone { display: none !important; }
  .nav-in { gap: 12px !important; flex-wrap: nowrap; }
  .nav-in .logo { min-width: 0; flex: 0 1 auto; overflow: hidden; }
  .nav-in .logo-text { min-width: 0; }
  .nav-in .logo-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
  .nav-cta { flex: 0 0 auto; font-size: 12.5px !important; padding: 10px 14px !important; letter-spacing: 0.01em !important; }
}

/* ============================================================
   Superior logo lockup — mark beside a name-over-location column.
   Only affects the 13 skins (they carry .logo-text); reviews use
   .review-logo and the platform uses .brand, so both are untouched.
   ============================================================ */
.logo { align-items: center; }
.logo .logo-text {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  line-height: 1;
  gap: 3px;
}
.logo .logo-name { line-height: 1.0; letter-spacing: inherit; }
/* location drops to its own line, aligned under the name — no longer
   trailing the name on the baseline. Each skin keeps its own small styling. */
.logo .logo-text small { display: block; margin: 0; line-height: 1; }
/* keep the lockup on one row even where a skin used baseline alignment */
.logo[class] { flex-wrap: nowrap; }

/* ============================================================
   Back controls — never let the label escape the pill on mobile
   (.review-back top link + the in-flow .backlink "Change an answer")
   ============================================================ */
.review-back, .backlink {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: break-word;
  line-height: 1.2;
}
.review-top {
  flex-wrap: wrap;
  row-gap: 10px;
}
@media (max-width: 420px) {
  .review-back { font-size: 12.5px; padding-top: 9px; padding-bottom: 9px; }
}

/* ============================================================
   Award-grade focus states (accessibility as craft)
   A single, consistent, designed focus ring everywhere — keyboard
   users get a first-class journey, mouse users never see it.
   ============================================================ */
:where(a, button, input, select, textarea, [tabindex], .addr-opt, .ca-opt, .opt, [role="button"]):focus-visible {
  /* Terracotta focus everywhere: --accent (wizard) → --signal (console) →
     the brand ink. Was a blue #2f6df0 dev-default that leaked onto the
     consoles + marketing home where --accent is unset. */
  outline: 2.5px solid var(--accent, var(--signal, #aa4810));
  outline-offset: 3px;
  border-radius: 6px;
  transition: outline-offset .12s ease;
}
/* on dark concierge surfaces, brass ring reads better */
@media (prefers-reduced-motion: reduce) {
  :where(a, button, input, [tabindex]):focus-visible { transition: none; }
}

/* ============================================================
   MOBILE AUDIT FIXES — 390px sweep (Jun 2026)
   Tap targets >= 44px, body copy >= 13px, micro-labels >= 10px,
   no horizontal overflow. Phone-scoped; desktop untouched.
   ============================================================ */
@media (max-width: 600px) {

  /* -- skin flow: the "use a different postcode" backstep -- */
  .capture .ca-back { min-height: 44px; display: inline-flex; align-items: center; }

  /* -- skins: 2-col footer exceeds 390px when link text is long -- */
  .foot-grid, .foot-grid-4 { grid-template-columns: 1fr !important; gap: 26px !important; }

  /* -- skin landings: service + footer links get real hit areas -- */
  a.svc-link { display: inline-flex; align-items: center; min-height: 44px; }
  .foot a { display: inline-block; padding: 6px 0; }
  a.logo { min-height: 44px; display: inline-flex; align-items: center; }

  /* -- property review chrome -- */
  a.review-back { min-height: 44px; display: inline-flex; align-items: center; }
  button.backlink { min-height: 44px; display: inline-flex; align-items: center; }
  button.snap-edit { min-height: 40px; display: inline-flex; align-items: center; padding: 8px 12px; }

  /* -- platform marketing: nav, doors, footnote links -- */
  .mk-nav-actions .btn { min-height: 44px; }
  .mk-door .btn, .mk-door a.btn { min-height: 44px; }
  .fronts-foot a { display: inline-flex; align-items: center; min-height: 44px; }

  /* -- platform marketing: copy floors -- */
  p.fd-foot, p.nwc-note, div.price-setup { font-size: 13px !important; }
  span.frt2 { font-size: 10px; }
  span.frb { font-size: 11px; }
  .nwc-cell span { font-size: 11px; }
  span.pps-k { font-size: 11px; }
  span.mkd-tag { font-size: 11px; }

  /* -- sliders (budget demo + rev-share calc): thumb-draggable track -- */
  .nw-calc input[type="range"], .fd-bud input[type="range"] { height: 44px; }

  /* -- dashboard + HQ: drawer nav, role pills, switches -- */
  button.nav-item, .nav-item { min-height: 44px; }
  button.role-pill { min-height: 40px; padding-top: 9px; padding-bottom: 9px; }
  .svc-item .toggle::before { content: ""; position: absolute; inset: -10px; }
  .mcs-bar .mcs-link { display: inline-flex; align-items: center; min-height: 44px; }
  button.hq-link { min-height: 44px; }

  /* -- smart-questions editor: inputs + delete controls -- */
  input.q-title { min-height: 44px; }
  .q-opt input { min-height: 44px; }
  button.q-del { padding: 12px; }
  .q-opt .qo-del { padding: 12px 14px; font-size: 18px; }
  button.q-opt-add { min-height: 44px; }
  span.q-type-tag { font-size: 10.5px; }

  /* -- publish gate: CTA wraps instead of clipping off-screen -- */
  .gate-head { flex-wrap: wrap; }
  .gate-head .btn { min-height: 44px; }

  /* -- checkout sheet: close + change-card hit areas -- */
  button.anv-modal-x { padding: 9px 13px; margin: -6px -8px 0 0; }
  button.cko-change { padding: 11px 12px; margin: -11px 0; }

  /* -- micro-label floors across dash/launch -- */
  span.rung-tag { font-size: 10px; }
  .lp-logo { font-size: 10.5px; }
  span.who { font-size: 10.5px; }
  span.rk { font-size: 10.5px; }
  .q-guard { font-size: 10.5px; }
  .mc-l { font-size: 10.5px; }
}