/* Phones and tablets, audited at 360 to 820 wide on touch. Loaded after unify.css, so it settles last.
   Text never under 12px, every control 44px to hit (the look stays, the hit area grows), the enquiry dialog leaves room for its form,
   wide admin tables show that they scroll. Desktop is untouched: everything sits under 820px. */
@media (max-width: 820px) {
  /* a field that takes focus, or a section jumped to, clears the sticky header and answer bar above and the footer below */
  html { scroll-padding-top: 150px; scroll-padding-bottom: 56px; }
  @media (max-height: 639px) { html { scroll-padding-top: 64px; } }
  /* text floor */
  html body :is(.w-count, .w-sub, .w-eyebrow, .w-facts dt, .w-ins-k, .w-map-k, .w-map-note, .hero-adviser-names, .hero-adviser-shared, .path-num, .path-status, .offer-chip, .g-lock-eyebrow, .g-lock-note, .v2-lab, .enq-eyebrow, .adv-title, .adv-cea, .enq-company, .lease-form label, .lease-form .consent-text, .lease-form .form-note, .g-lock-grid label, .lc-form label, .lc-label, .w-custom-f label, .w-lev-t small, .kf-footer-copy, .kf-footer-link, .kf-footer-sep, .enq-dt-tile span, .enq-dt-block h5, .enq-dt-table th, .enq-dt-fine, .enq-dt-tile small, .rb-updated, .enquiry-table .admin-sub, .enquiry-table .enq-due, .enquiry-table .enq-tag){ font-size: 12px !important; }
  html body .kf-site-footer { padding-bottom: env(safe-area-inset-bottom, 0px); height: calc(32px + env(safe-area-inset-bottom, 0px)); }
  html body .kf-site-footer .kf-footer-link { padding: 0 4px; }
  html body { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px)); }

  /* 44px targets: grow the box where the layout allows, the hit area where it does not */
  html body :is(.nav-link, #resetSpace, #resetLease, .w-foot .text-link, .w-bar-act .text-link, #copyLeaseSummary, .rd-inputs-wk-tip-go) { display: inline-flex; align-items: center; min-height: 44px; }
  html body .rd-inputs-wk-chip { min-height: 44px !important; min-width: 44px; }
  html body :is(.w-card, .w-body) :is(.text-link, .rd-inputs-wk-tip-go, .adv-tel) { min-height: 44px !important; display: inline-flex; align-items: center; }
  html body :is(.g-count .g-stepb, .w-card .g-stepb, .w-card button:not(.text-link):not(.kf-tip-i)) { min-width: 44px !important; }
  html body .rd-inputs-wk-chip.rd-inputs-wk-chip--n { min-width: 44px !important; }
  html body .w-chip { min-height: 44px; }
  html body :is(.lease-modal, .help-modal, .why-dialog) .modal-close { width: 44px !important; height: 44px !important; }
  /* the floor module: its labels and keys (CSS only; the 3D and plan drawing is untouched) */
  
  
  html body :is(.path-tab, .hero-why, .hero-adviser, .kf-footer-link) { position: relative; }
  html body :is(.path-tab, .hero-why, .hero-adviser, .kf-footer-link)::before { content: ''; position: absolute; inset: -10px -4px; }
  html body :is(.g-lock-grid input, .lc-box, #lcArea, #lcGrade, .hc-form input, .hc-form select, .lease-modal input:not([type=checkbox]):not([type=radio]), .lease-modal select) { min-height: 44px; }
  html body :is(.g-lock-check, .consent-checkbox-label, .hc-consent) { min-height: 44px; }
  html body :is(.g-lock-check, .hc-consent, .consent-checkbox-label) input[type=checkbox] { width: 22px; height: 22px; flex: none; }

  /* scrolling strips and tables say so: an edge shadow that goes when you reach the end */
  html body :is(.admin-table-wrap, .rb-scroll, .act-scroll) {
    background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
      linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(26, 26, 26, .22), rgba(26, 26, 26, 0)) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(26, 26, 26, .22), rgba(26, 26, 26, 0)) right center / 10px 100% no-repeat scroll;
  }
}

/* Footer: the copyright line gives way before it can run into Privacy and Terms. Full view and admin get touch-sized controls. */
@media (max-width: 820px) {
  html body .kf-footer-copy { min-width: 0; flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  html body .kf-footer-links { flex: none; }
  html body :is(.rd-trail-b, .amen-opt, .w-lev-edit) { min-height: 44px !important; }
  html body .nav-link--icon { min-width: 44px; }
  html body :is(.lease-modal, .help-modal) :is(.adv-li, .adv-tel) { display: inline-flex; align-items: center; min-height: 44px; }
  
  /* the admin was drawn at 9 to 11px: raise it to the admin's own 12.6px body size */
  html body #admin-view :is(th, td, label, summary, small, dt, dd, button, .nav-badge, .admin-count, .admin-sub, .admin-name, .enq-line, .enq-clamp, .enq-due, .enq-tag) { font-size: 12.6px !important; }
  html body #admin-view :is(.enquiry-actions button, .fm-card button) { min-width: 44px; white-space: normal; }
  html body :is(.w, .v2-head-act) .text-link { display: inline-flex; align-items: center; min-height: 44px; }
  html body #admin-view :is(.admin-subnav-btn, .settings-tab, button, select, input:not([type=checkbox]):not([type=radio]), summary) { min-height: 44px; }
  html body #admin-view :is(.admin-subnav-btn, .settings-tab) { display: inline-flex; align-items: center; }
}

/* unify.css clips dialogs with overflow:hidden for their rounded corners, which also stopped them scrolling: on a phone held sideways,
   or a tablet, the form below the advisors was cut off with no way to reach it. Scroll vertically, clip sideways. */
@media (max-width: 899px) {
  html body :is(.lease-modal, .help-modal, .why-dialog) { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; max-height: 92dvh; }
  html body .lease-modal { max-height: 92dvh; }
}

/* The enquiry dialog on a phone: advisors in a tight tile, Cancel and Send on one line, so the form gets the screen. */
@media (max-width: 520px) {
  html body .lease-modal .enq-head { padding: 14px 16px 12px; }
  html body .lease-modal .enq-head .kf-dialog-intro { margin: 4px 0 10px; }
  html body .lease-modal .enq-head .adv-team { grid-template-columns: 1fr; gap: 6px; }
  html body .lease-modal .enq-head .adv-person { padding: 8px 10px; gap: 10px; align-items: center; }
  html body .lease-modal .enq-head .adv-face { width: 40px; height: 40px; }
  html body .lease-modal .enq-head .adv-info { display: flex; flex-flow: row wrap; gap: 0 14px; align-items: center; }
  html body .lease-modal .enq-head .adv-info > :is(.adv-name, .adv-title, .adv-cea) { flex: 1 1 100%; }
  html body .lease-modal .enq-head .adv-info :is(.adv-tel, .adv-li) { display: inline-flex; align-items: center; min-height: 44px; margin: 0; }
  html body .lease-form .form-actions { flex-direction: row-reverse; flex-wrap: nowrap; gap: 8px; margin-top: 12px; padding-top: 10px; }
  html body .lease-form .form-actions .kf-btn[type="submit"] { flex: 1 1 auto; width: auto; }
  html body .lease-form .form-actions .kf-btn--quiet { flex: 0 0 auto; width: auto; min-width: 96px; }
  html body .lease-form .form-actions .form-note { display: none; }
}

/* Rent benchmarks (admin): each area becomes a card of labelled fields instead of an eleven-column row. */
@media (max-width: 640px) {
  html body #admin-view #rbCard .rb-scroll { max-height: none; overflow: visible; }
  html body #admin-view #rbCard .rb-table { min-width: 0; }
  html body #admin-view #rbCard .rb-table thead { display: none; }
  html body #admin-view #rbCard .rb-table, html body #admin-view #rbCard .rb-table tbody { display: block; }
  html body #admin-view #rbCard .rb-table tr { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; padding: 12px 0; border-top: 1px solid var(--line, #dbd9d5); }
  html body #admin-view #rbCard .rb-table td { display: block; padding: 0; min-width: 0; }
  html body #admin-view #rbCard .rb-table td::before { display: block; margin-bottom: 3px; font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--grey-strong, #5e5d57); }
  html body #admin-view #rbCard .rb-table td:is(:nth-child(1), :nth-child(7), :nth-child(11)) { grid-column: 1 / -1; }
  html body #admin-view #rbCard .rb-table td:nth-child(1)::before { content: 'Area'; }
  html body #admin-view #rbCard .rb-table td:nth-child(2)::before { content: 'Type'; }
  html body #admin-view #rbCard .rb-table td:nth-child(3)::before { content: 'A+ low'; }
  html body #admin-view #rbCard .rb-table td:nth-child(4)::before { content: 'A+ high'; }
  html body #admin-view #rbCard .rb-table td:nth-child(5)::before { content: 'Grade A / all low'; }
  html body #admin-view #rbCard .rb-table td:nth-child(6)::before { content: 'Grade A / all high'; }
  html body #admin-view #rbCard .rb-table td:nth-child(7)::before { content: 'Areas covered (optional)'; }
  html body #admin-view #rbCard .rb-table td:nth-child(8)::before { content: 'Lat'; }
  html body #admin-view #rbCard .rb-table td:nth-child(9)::before { content: 'Lng'; }
  html body #admin-view #rbCard .rb-table td:nth-child(10)::before { content: 'Radius m'; }
  html body #admin-view #rbCard .rb-table input, html body #admin-view #rbCard .rb-table select { width: 100%; min-height: 44px; }
}

/* ===== Dialog shell: enquiry, help and why dialogs (follows the microsite's enquire modal) =====
   One scroller only: the dialog itself, with its scrollbar hidden (never a track over the red panel, never a box in a box).
   Radius 12px clips the red header; the close is 40px (44 on phones), 16px in from the corner; the form fits without scrolling
   at laptop sizes and the sheet scrolls like a page only when the screen is too short. */
html body :is(#leaseModal.lease-modal, .help-modal, .why-dialog) { overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; -ms-overflow-style: none; border-radius: 12px !important; }
html body :is(#leaseModal.lease-modal, .help-modal, .why-dialog)::-webkit-scrollbar { display: none; width: 0; height: 0; }
html body #leaseModal.lease-modal { padding: 0; --enq-foot: calc(66px + env(safe-area-inset-bottom, 0px)); scroll-padding-bottom: calc(var(--enq-foot) + 24px); }
html body #leaseModal .enq-body { overflow: visible !important; max-height: none !important; }
html body #leaseModal .kf-dialog-title { position: static; background: transparent; }
html body :is(#leaseModal .enq-company, #leaseModal .enq-about-label) { font-size: 12px; }
html body :is(.lease-modal, .help-modal, .why-dialog) .modal-close { width: 40px !important; height: 40px !important; min-width: 0; min-height: 0; top: 16px !important; right: 16px !important; border-radius: 10px !important; }
/* Send / Cancel stay in reach, and the message sits just above them whatever the scroll */
html body #leaseModal .lease-form .form-actions { position: sticky; bottom: 0; z-index: 2; margin-top: 12px; padding: 10px 0 calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--paper, #f5f5f3); box-shadow: 0 -1px 0 var(--line, #dbd9d5); flex-direction: row-reverse; flex-wrap: nowrap; gap: 8px; }
html body #leaseModal .lease-form .form-actions .kf-btn { min-height: 44px; }
html body #leaseModal .lease-form .form-actions .kf-btn[type="submit"] { flex: 1 1 auto; width: auto; }
html body #leaseModal .lease-form .form-actions .kf-btn--quiet { flex: 0 0 auto; width: auto; min-width: 96px; }
html body #leaseModal .lease-form .form-actions .form-note { display: none; }
html body #leaseModal .lease-form .form-error:not(:empty) { position: sticky; bottom: calc(var(--enq-foot) + 2px); z-index: 2; margin: 8px 0 0; padding: 8px 10px; background: var(--paper, #f5f5f3); border: 1px solid currentColor; font-size: 12.6px; line-height: 1.4; }

@media (min-width: 900px) {
  html body #leaseModal.lease-modal.open { display: grid; grid-template-columns: minmax(234px, 279px) minmax(0, 1fr); width: min(936px, 94vw); max-height: 94dvh; }
  html body #leaseModal .enq-head { padding: 22px 19px 16px; }
  html body #leaseModal .enq-body { padding: 20px 24px 0; }
  html body #leaseModal .enq-about-label { padding-right: 52px; margin: 0 0 6px; min-height: 0; }
  html body #leaseModal .enq-about { margin: 0 0 12px; padding: 6px 11px; min-height: 0; }
  html body #leaseModal .lease-form .form-row { margin-bottom: 8px; gap: 8px 12px; }
  html body #leaseModal .lease-form :is(input:not([type=checkbox]), select) { min-height: 40px; height: 40px; }
  html body #leaseModal .lease-form textarea { min-height: 52px; }
  html body #leaseModal .lease-form .consent-checkbox-label { margin-top: 8px; }
  html body #leaseModal .lease-form .consent-text { font-size: 12px; line-height: 1.4; }
}

/* a short laptop screen: the same tightening as the microsite */
@media (min-width: 900px) and (max-height: 760px) {
  html body #leaseModal .enq-head { padding: 18px 19px 12px; }
  html body #leaseModal .enq-body { padding: 14px 24px 0; }
  html body #leaseModal .enq-about { margin-bottom: 8px; }
  html body #leaseModal .lease-form .form-row { margin-bottom: 6px; }
  html body #leaseModal .lease-form label { margin-bottom: 2px; }
  html body #leaseModal .lease-form :is(input:not([type=checkbox]), select) { min-height: 36px; height: 36px; }
  html body #leaseModal .lease-form textarea { min-height: 40px; }
  html body #leaseModal .lease-form .consent-text { line-height: 1.3; }
  html body #leaseModal .lease-form .form-actions { margin-top: 6px; padding-top: 8px; padding-bottom: 8px; }
  html body #leaseModal .enq-head .adv-person { padding: 8px; }
}

@media (min-width: 900px) and (max-height: 650px) {
  html body #leaseModal .enq-body { padding-top: 10px; }
  html body #leaseModal .enq-about { margin-bottom: 20px; }
  html body #leaseModal .lease-form label { margin-bottom: 3px; line-height: 1.2; }
  html body #leaseModal .enq-about-label { display: none; }
  html body #leaseModal .enq-about { margin-right: 52px; padding: 4px 10px; }
  html body #leaseModal .lease-form .form-row { margin-bottom: 4px; gap: 4px 12px; }
  html body #leaseModal .lease-form :is(input:not([type=checkbox]), select) { min-height: 34px; height: 34px; }
  html body #leaseModal .lease-form textarea { min-height: 44px; height: 44px; }
  html body #leaseModal .lease-form .consent-checkbox-label { margin-top: 4px; }
  html body #leaseModal .lease-form .consent-text { line-height: 1.25; }
  html body #leaseModal .lease-form .form-actions { margin-top: 4px; padding: 6px 0; }
  html body #leaseModal .lease-form .form-actions .kf-btn { min-height: 40px; }
  html body #leaseModal { --enq-foot: 53px; }
  html body #leaseModal .enq-head { padding: 12px 19px 8px; }
  html body #leaseModal .enq-head .enq-sub { display: none; }
  html body #leaseModal .enq-head .adv-team { gap: 6px; margin-top: 6px; }
  html body #leaseModal .enq-head .adv-person { padding: 6px 8px; }
  html body #leaseModal .enq-company { padding-top: 6px; }
}

@media (max-width: 899px) {
  /* the close gets a row of its own: it sticks at the top on a red bar, so nothing slides under it */
  html body #leaseModal .modal-close { position: sticky !important; top: 8px !important; right: auto !important; width: 44px !important; height: 44px !important; margin: 8px 12px 8px auto !important; box-shadow: 0 0 0 100vmax var(--kf-red, #a6192e); clip-path: inset(-8px -100vmax -8px -100vmax); }
  html body #leaseModal .enq-head { padding-top: 6px; }
  html body #leaseModal.lease-modal { scroll-padding-top: 64px; }
  html body :is(.lease-modal, #lcOffer, #helpModal .agent-card) .adv-actions .adv-btn { min-height: 44px !important; }
  html body :is(.lease-modal, .help-modal, .why-dialog) { max-height: 92dvh; }
}

/* an error line scrolled into view clears the footer and any sticky bar below it */
html body :is(.g-lock-err, .hc-msg, #leaseFormError) { scroll-margin-bottom: 88px; }

/* Small controls keep their look; the hit area reaches 20px past their edge and sits above what is beside it. */
@media (max-width: 820px) {
  html body :is(.kf-tip-i, #w-space .kf-tip-i, #g-lease-wrap .kf-tip-i) { position: relative; z-index: 2; }
  html body :is(.kf-tip-i, #w-space .kf-tip-i, #g-lease-wrap .kf-tip-i)::after { inset: -16px; }
  html body :is(.path-tab, .hero-why, .hero-adviser, .kf-footer-link) { z-index: 1; }
  html body :is(.path-tab, .hero-why, .hero-adviser)::before { inset: -14px -8px; }
  html body .kf-footer-link::before { inset: -14px -8px; }
}
@media (max-width: 820px) { html body .w-custom-f label { align-items: stretch; } html body .w-custom-f label input { align-self: stretch; min-height: 44px; } }

/* Admin on a phone: Sign out stays pinned at the end of the sections row (the others scroll under it), counters and sub-labels reach 12px,
   and the Settings tab row shows when it scrolls. */
@media (max-width: 640px) {
  html body #admin-view .admin-subnav #adminSignOutBtn { position: sticky; right: 0; z-index: 2; background: var(--white, #fff); box-shadow: -10px 0 8px -4px rgba(26, 26, 26, .14); }
  html body #admin-view .admin-subnav .admin-last-updated { display: none; }
  html body #admin-view :is(.admin-last-updated, .act-source, .act-text, .act-run-label, .act-run-sub, .fm-kpi-sub, .ckb-s, .ck-legend, .fm-feed-when, .fm-feed-meta, .fm-status, .fm-card-sub, .fm-rate-meta, .ft-note, .settings-note, .ms-help, .admin-sub, .fm-kpi-label, pre, .fm-feed li, .fm-card b) { font-size: 12px !important; }
  html body #admin-view :is(p, span, li):not([class]) { font-size: 12px !important; }
  html body #admin-view svg text { font-size: 12px; }
  html body #admin-view :is(p, span, li, b, time, small, div):not(.nav-badge):not([class*="kpi-v"]) { min-height: 0; }
  html body #admin-view .settings-tabs {
    background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0)) left center / 28px 100% no-repeat local,
      linear-gradient(270deg, #fff 30%, rgba(255, 255, 255, 0)) right center / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(26, 26, 26, .22), rgba(26, 26, 26, 0)) left center / 10px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(26, 26, 26, .22), rgba(26, 26, 26, 0)) right center / 10px 100% no-repeat scroll;
  }
}

@media (max-width: 820px) { html body :is(.help-modal, .why-dialog) .modal-close { width: 44px !important; height: 44px !important; } }

/* ---- Audit fixes (workflow, accessibility) ---- */
/* Plain one-line helpers under a question, the inline "Start again?" confirm and the desk-limit note under the answer bar. */
html body .w .w-help { margin: -4px 0 10px; color: var(--v2-muted, #5e5d57); }
html body .w-confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin: 12px 0 0; }
html body .w-confirm p { margin: 0 auto 0 0; font-weight: 600; }
html body .w-confirm .v2-btn { min-height: 44px; padding: 0 20px; }
html body .w-cap { margin: 6px 0 0; color: var(--kf-red, #a6192e); }
html body .w-cap[hidden] { display: none; }
/* The lease step: the plain answer under the facts, the line that offers more, and the grade the comparison waits for. */
html body .v2-takeaway { margin: 10px 0 18px; font-size: 16px; line-height: 1.5; }
html body .g-lock-more { margin: 22px 0 10px; color: var(--v2-muted, #5e5d57); }
html body #lcGradeField.is-need :is(select, .lc-box) { border-color: var(--kf-red, #a6192e) !important; box-shadow: 0 0 0 2.7px rgba(166, 25, 46, .14); }
/* Reception + breakout: the short name on small screens; the full one stays for screen readers. */
html body .w-short { display: none; }
@media (max-width: 480px) {
  html body .w-short { display: inline; }
  html body .w-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Nothing sits under the fixed footer: the page ends a footer plus the safe area plus breathing room below the last control. */
@media (max-width: 820px) {
  html body { padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px) + 24px); }
  html { scroll-padding-bottom: calc(32px + env(safe-area-inset-bottom, 0px) + 24px); }
}
/* The rent benchmark chart (v2.js chartHTML): brand red for the rent paid, ink for the market middle, a red tint for the range. */
html body .v2-chart-wrap { margin-top: 28px; }
html body .bc { position: relative; max-width: 100%; }
html body .bc { padding: 18px 20px 14px; border: 1px solid #E4E2DD; border-radius: 12px; background: #fff; }
html body .bc-row { margin-bottom: 18px; }
html body .bc-row:last-of-type { margin-bottom: 44px; }
html body .bc-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; font-size: 14px; }
html body .bc-name { color: #5E5D57; }
html body .bc-val { font-weight: 700; color: #1A1A1A; }
html body .bc-track { position: relative; height: 18px; border-radius: 9px; background: #F3F1EC; }
html body .bc-range { position: absolute; top: 0; bottom: 0; border-radius: 9px; background: #E9BCC4; }
html body .bc-mid { position: absolute; top: 4px; bottom: 4px; width: 2px; margin-left: -1px; background: #A6192E; opacity: .55; }
html body .bc-you { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; border-radius: 2px; background: #1A1A1A; }
html body .bc-tag { position: absolute; top: calc(100% + 12px); transform: translateX(-50%); padding: 3px 9px; border-radius: 6px; background: #1A1A1A; color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
html body .bc-key { margin: 0; font-size: 13px; color: #5E5D57; }
html body .bc-cap { margin-top: 6px; }