/* ===========================================================================
   getmy.house - the look.

   The one Craig approved on /preview, 11 September 2026, matched to his
   reference picture. Pages move onto it one at a time: a page that has moved
   extends layout.html and loads this file; one that has not yet still
   extends base.html and loads sky.css. When the last page has moved, sky.css
   and base.html go.

   Every colour here came out of Craig's reference picture. The sky, the hills,
   the cards and the icon tiles are the values Craig sampled himself. The text
   colours are the darkest pixel of each piece of text in the same picture.
   None of them is a guess.
   =========================================================================== */


/* ---------------------------------------------------------------------------
   1. The colours
   --------------------------------------------------------------------------- */

:root {
  /* Text, sampled from the reference. */
  --ink: #214160;            /* the big title in the top panel            */
  --heading: #1A4E86;        /* "What Are You Looking For ?"               */
  --heading-deep: #194082;   /* "Get Early Access" - the bold half         */
  --heading-soft: #264C83;   /* "To New Categories" - the lighter half     */
  --blue-line: #3D5F86;      /* "Tell Us What You Need"                    */
  --faint-line: #93ADC6;     /* the two quieter lines under it             */
  --soft: #527DB7;           /* the line under a section heading           */
  --muted: #7892AB;          /* small print in the top panel               */
  --grey: #8D9AA7;           /* the line under "Get Early Access"          */

  /* Cards - Craig's figures. */
  --card: rgba(255, 255, 255, 0.55);
  --card-edge: rgba(255, 255, 255, 0.6);
  --card-blur: blur(20px);
  --card-shadow: 0 8px 32px rgba(80, 110, 160, 0.10);
  --card-round: 20px;

  /* Icon tiles - Craig's figures. */
  --tile: #DCE9F6;
  --tile-icon: #3A6BB5;

  /* The thin line between two rows of figures. */
  --rule: rgba(58, 107, 181, 0.14);

  /* --- getmy.house: the wordmark and the icons ---
     The name, in the dark blue, with the dot in warm orange. Change the
     colours here and nowhere else; tools/make_icons.py reads them too.

     The dot's orange was darkened from Craig's #E8734A until it passes 3:1
     (the bar for large bold lettering) on every light background it sits on
     - the worst is the blue sky behind the home page heading. #E8734A
     itself only reached 3:1 on pure white. On the dark footer and the
     icon's dark blue square, a lighter orange of the same hue is used, as
     the darker one fails there. */
  --brand-ink: #1A4E86;
  --brand-dot: #B03E16;          /* on light: 3.06:1 at worst (the hero sky) */
  --brand-dot-on-dark: #ED9170;  /* on the footer hills 3.01:1, the icon 3.59:1 */

  --font: "Inter Tight", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}


/* ---------------------------------------------------------------------------
   2. The page, and the one sky behind all of it

   The sky is a single gradient, top to bottom, with no hard edge anywhere.
   It is pinned to the window, so it always fills the screen however long the
   page is, and everything scrolls over it. It sits on a layer of its own
   rather than on `body` because phones ignore a fixed background on body.

   Note the middle: it leaves blue altogether and passes through cream before
   settling on a soft green-grey. That warm band is what stops it feeling cold.
   --------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

/* Anything marked hidden stays hidden. The "Show all" buttons rely on it. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow-x: hidden;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink);
  background: #DEE8E2;
  -webkit-font-smoothing: antialiased;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg,
    #8EB8F1 0%,
    #89BAF1 6%,
    #96C2F3 14%,
    #90BEF4 22%,
    #89BAF1 34%,
    #96B8F7 42%,
    #ACC4F4 46%,
    #C0CEF0 50%,
    #CDD8E8 54%,
    #DDE0E7 58%,
    #E9E7E3 62%,
    #EBE8E0 66%,
    #E7E9DE 70%,
    #E0E8DA 78%,
    #DEE8E2 84%);
}

h1, h2, h3, p { margin: 0; }
a { color: inherit; }

/* The middle of the page: one width, the same side margins everywhere. */
.wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: 24px;
}

/* Anybody moving round the page with the Tab key can see where they are. */
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--tile-icon);
  border-radius: 8px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------------------
   3. The clouds

   Seven soft ones across the top of the page. Each is three or four white
   ovals of different sizes laid over each other, so no two outlines are the
   same and none is a neat circle, then blurred right down.

   Every one is centred between a fifth and four fifths of the way across,
   and never wider than a fifth of the screen, so none reaches the edge. All
   of them start below the header, so the header never cuts one off.

   The layer stops where the page stops. On a short page the lowest clouds
   are simply not drawn, rather than making the page longer than it is.
   --------------------------------------------------------------------------- */

.clouds {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  max-height: 1400px;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.cloud {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  aspect-ratio: 2.4 / 1;
  transform: translateX(-50%);
  filter: blur(var(--blur));
  opacity: var(--o);
}
.cloud i { position: absolute; background: #fff; border-radius: 50%; }

/* Three different outlines. */
.cloud.a i:nth-child(1) { left: 0;   top: 38%; width: 50%; height: 62%; }
.cloud.a i:nth-child(2) { left: 20%; top: 0;   width: 44%; height: 92%; }
.cloud.a i:nth-child(3) { left: 50%; top: 20%; width: 42%; height: 74%; }
.cloud.a i:nth-child(4) { left: 34%; top: 48%; width: 66%; height: 52%; }

.cloud.b i:nth-child(1) { left: 4%;  top: 26%; width: 40%; height: 66%; }
.cloud.b i:nth-child(2) { left: 28%; top: 6%;  width: 36%; height: 80%; }
.cloud.b i:nth-child(3) { left: 52%; top: 0;   width: 44%; height: 88%; }
.cloud.b i:nth-child(4) { left: 14%; top: 52%; width: 80%; height: 48%; }

.cloud.c i:nth-child(1) { left: 0;   top: 30%; width: 62%; height: 64%; }
.cloud.c i:nth-child(2) { left: 36%; top: 8%;  width: 40%; height: 78%; }
.cloud.c i:nth-child(3) { left: 58%; top: 36%; width: 42%; height: 56%; }

/* Where each one sits, how big, how soft and how see-through. They sit in
   the open sky - above the top panel's corners and either side of the first
   heading - because behind a frosted card a cloud is blurred away to nothing. */
.c1 { --x: 16%; --y: 100px;  --w: min(280px, 20vw); --blur: 22px; --o: .55; }
.c2 { --x: 82%; --y: 250px;  --w: min(300px, 20vw); --blur: 26px; --o: .50; }
.c3 { --x: 20%; --y: 545px;  --w: min(260px, 20vw); --blur: 22px; --o: .55; }
.c4 { --x: 80%; --y: 580px;  --w: min(280px, 20vw); --blur: 26px; --o: .50; }
.c5 { --x: 36%; --y: 1010px; --w: min(200px, 16vw); --blur: 30px; --o: .40; }
.c6 { --x: 66%; --y: 1080px; --w: min(240px, 20vw); --blur: 24px; --o: .45; }
.c7 { --x: 18%; --y: 1150px; --w: min(220px, 18vw); --blur: 20px; --o: .50; }


/* ---------------------------------------------------------------------------
   4. The header

   A rounded pill floating in the sky, with sky showing above, below and on
   both sides of it. See-through white, blurred behind, white words.
   --------------------------------------------------------------------------- */

.bar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 16px;
  width: calc(100% - 48px);
  max-width: 1080px;
  margin: 18px auto 0;
  padding: 10px 12px 10px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: #fff;
  text-shadow: 0 1px 2px rgba(30, 70, 130, .25);
}

.bar-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.03em;
  text-decoration: none;
  white-space: nowrap;
}
.bar-brand svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   The getmy.house wordmark. Extra bold, tight, lower case, the dark blue with
   an orange dot. The colours are --brand-ink, --brand-dot and
   --brand-dot-on-dark at the top of this file. See _wordmark.html.
--------------------------------------------------------------------------- */
.wordmark {
  font-family: var(--font);
  font-weight: 800;
  letter-spacing: -0.045em;
  line-height: 1;
  text-transform: lowercase;
  color: var(--brand-ink);
  text-shadow: none;          /* the top bar shadows its white words; not this */
  white-space: nowrap;
}
.wordmark-dot { color: var(--brand-dot); }
.wordmark--on-dark { color: #fff; }
.wordmark--on-dark .wordmark-dot { color: var(--brand-dot-on-dark); }
.bar-brand .wordmark { font-size: 1.4rem; }
.foot-brand .wordmark { font-size: 1.3rem; }
/* The home page heading. */
.wordmark--big {
  display: block;
  margin-bottom: 18px;
  font-size: clamp(2.6rem, 8vw, 4.4rem);
}

.bar-links { margin-left: auto; display: flex; gap: 4px; }
.bar-links a {
  border-radius: 999px;
  padding: 8px 15px;
  font-size: .92rem;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  transition: background .2s ease;
}
.bar-links a:hover { background: rgba(255, 255, 255, .16); }
.bar-links a[aria-current="page"] { background: rgba(255, 255, 255, .24); }

/* The number of lots on the site. Only there when there are some: with every
   auction house switched off there are none, and "0 lots" says nothing. */
.bar-count {
  margin-left: 8px;
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border-radius: 999px;
  padding: 7px 14px;
  background: #fff;
  color: var(--ink);
  text-shadow: none;
  font-size: .85rem;
  font-weight: 500;
  white-space: nowrap;
}
.bar-count b { font-weight: 600; }

/* On a narrow phone the two links go; the footer carries them instead. */
@media (max-width: 560px) {
  .bar-links { display: none; }
  .bar-count { margin-left: auto; }
}


/* ---------------------------------------------------------------------------
   5. Frosted glass: every card on the page
   --------------------------------------------------------------------------- */

.glass {
  background: var(--card);
  -webkit-backdrop-filter: var(--card-blur);
  backdrop-filter: var(--card-blur);
  border: 1px solid var(--card-edge);
  border-radius: var(--card-round);
  box-shadow: var(--card-shadow);
}

/* The small square an icon sits in. */
.tile {
  flex: 0 0 36px;
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--tile);
  color: var(--tile-icon);
}
.tile svg { width: 19px; height: 19px; }


/* ---------------------------------------------------------------------------
   6. The top panel: the address on the left, what it last sold for on the
      right, where the reference has its photograph
   --------------------------------------------------------------------------- */

.hero {
  margin-top: 44px;
  padding: 28px;
  display: grid;
  gap: 28px;
}
@media (min-width: 860px) {
  .hero { grid-template-columns: 1fr 1.05fr; padding: 36px; }
}

.back {
  font-size: .86rem;
  font-weight: 500;
  color: var(--soft);
  text-decoration: none;
}
.back:hover { color: var(--heading); }
/* "Back to 1 Southport Road" sits above "Look up another address". */
.back-to { display: table; margin-bottom: 6px; }

.hero h1 {
  margin-top: 22px;
  font-size: clamp(1.9rem, 4.2vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.08;
  color: var(--ink);
}
.hero-sub { margin-top: 8px; font-size: .9rem; color: var(--muted); }

/* Lines saying what is on the page, the first one picked out - the same
   pattern as "Tell Us What You Need" in the reference. */
.steps { margin-top: 30px; display: grid; gap: 12px; justify-items: start; }
.steps a {
  font-size: 1.05rem;
  font-weight: 500;
  color: var(--faint-line);
  text-decoration: none;
}
.steps a:hover { color: var(--blue-line); }
.steps a.is-on { color: var(--blue-line); font-weight: 600; }

.hero-note { margin-top: 30px; max-width: 42ch; font-size: .82rem; color: var(--muted); }

/* The right-hand side. */
.hero-tile {
  display: flex;
  flex-direction: column;
  min-height: 280px;
  padding: 28px;
  border-radius: 16px;
  background: linear-gradient(160deg, rgba(255, 255, 255, .78), rgba(220, 233, 246, .7));
  border: 1px solid rgba(255, 255, 255, .9);
}

.tile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: .92rem;
  font-weight: 600;
  color: var(--blue-line);
}

.big-price {
  margin-top: 26px;
  font-size: clamp(2.4rem, 5.4vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--heading);
}
.big-when { margin-top: 10px; font-size: .95rem; color: var(--soft); }
.big-none { margin-top: 26px; font-size: 1.2rem; font-weight: 600; color: var(--heading); }

/* What it might rent for: one glass card holding a plain three-column table. */
.rent-card { padding: 22px 26px; }
.rent-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rent-table th, .rent-table td { padding: 10px 0; text-align: left; vertical-align: middle; }
.rent-table thead th {
  padding-top: 0; font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--soft);
}
.rent-table td, .rent-table thead th + th { text-align: right; padding-left: 12px; }
.rent-table tbody tr { border-top: 1px solid var(--rule); }
.rent-table tbody th { font-weight: 500; color: var(--ink); }
.rent-table tbody td { font-weight: 600; color: var(--ink); white-space: nowrap; }
.rent-table .sale-tag { margin-left: 6px; }
.rent-note { margin-top: 14px; font-size: .8rem; line-height: 1.5; color: var(--muted); }

/* Freehold, Leasehold, New build: the same little pill as "Flipped" on a
   Flipometer card, a size smaller, so it reads as a label and not a button. */
.sale-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.sale-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--tile);
  color: var(--tile-icon);
  font-size: .7rem;
  font-weight: 600;
  line-height: 1.5;
  vertical-align: 1px;
}
.flip .sale-tags { margin: 0 0 6px; }

.older { margin-top: 18px; border-top: 1px solid var(--rule); }
.older-row {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 0;
  font-size: .9rem;
}
.older-row + .older-row { border-top: 1px solid var(--rule); }
.older-row span:first-child { color: var(--soft); }
.older-row span:last-child { font-weight: 500; }

.tile-small {
  margin-top: auto;
  padding-top: 22px;
  font-size: .74rem;
  line-height: 1.55;
  color: var(--muted);
}

/* A link in the small print keeps its underline. */
.credit-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.credit-link:hover { color: var(--heading); }


/* ---------------------------------------------------------------------------
   7. A section: a centred heading, a line under it, then cards
   --------------------------------------------------------------------------- */

.section { margin-top: 88px; }

/* Straight after the one above, with no heading of its own to set it apart. */
.section--tight { margin-top: 40px; }

.section-head { max-width: 62ch; margin: 0 auto 28px; text-align: center; }
.section-head h2 {
  font-size: clamp(1.6rem, 3.6vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--heading);
}
.section-head p { margin-top: 8px; font-size: .88rem; color: var(--soft); }

/* Small print under a set of cards. */
.center-small {
  max-width: 76ch;
  margin: 20px auto 0;
  text-align: center;
  font-size: .76rem;
  line-height: 1.55;
  color: var(--muted);
}

/* The "Show all" button. */
.more { display: flex; justify-content: center; margin-top: 20px; }
.more-btn {
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  padding: 9px 20px;
  background: rgba(255, 255, 255, .75);
  font: inherit;
  font-size: .86rem;
  font-weight: 600;
  color: var(--heading);
  cursor: pointer;
  box-shadow: var(--card-shadow);
}
.more-btn:hover { background: #fff; }


/* ---------------------------------------------------------------------------
   8. The small fact cards - three across on a laptop, like the reference's
      six, each with its icon tile
   --------------------------------------------------------------------------- */

.minis { display: grid; gap: 16px; }
@media (min-width: 560px) { .minis { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .minis { grid-template-columns: repeat(3, 1fr); } }

.mini { display: flex; align-items: flex-start; gap: 14px; padding: 24px; }
.mini-label { font-size: .8rem; color: var(--soft); }
.mini-value { margin-top: 3px; font-size: 1rem; font-weight: 600; line-height: 1.3; color: var(--ink); }

/* The building's cards sit in a box of their own so they can be swapped in
   when they arrive. The box itself takes no room: its cards line up in the
   grid exactly as if it were not there. */
.minis-part { display: contents; }

/* The little spinner in an icon tile, while the building's cards are fetched. */
.spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(58, 107, 181, .25);
  border-top-color: var(--tile-icon);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.5s; } }


/* ---------------------------------------------------------------------------
   8b. What it looks like - the street photo and the satellite picture
   --------------------------------------------------------------------------- */

/* One under the other on a phone, side by side from 700px - the same width
   the Flipometer's cards pair up at, so the page breaks in one rhythm. */
.looks { display: grid; gap: 16px; }
@media (min-width: 700px) { .looks { grid-template-columns: 1fr 1fr; } }

.look { margin: 0; padding: 12px; }

/* The frame's box. The height is fixed so the page does not jump when
   Google's picture arrives - the box is already the size it will end up. */
.look-frame {
  position: relative;
  display: grid;
  place-items: center;
  height: 300px;
  overflow: hidden;
  border-radius: calc(var(--card-round) - 10px);
  background: var(--tile);
}
@media (min-width: 700px) { .look-frame { height: 340px; } }

/* Google's own frame fills the box. Its attribution and its controls are
   inside the frame and are left exactly as Google draws them. */
.look-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

.look-waiting {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: .85rem;
  color: var(--soft);
}

/* "No street photo for this address", and the same box if Google cannot be
   reached. A plain box, never a broken frame. */
.look-none {
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-size: .88rem;
  color: var(--soft);
}

.look figcaption {
  margin-top: 10px;
  padding: 0 4px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--blue-line);
}

/* The honest limit, under both boxes. */
.look-note {
  max-width: 62ch;
  margin: 16px auto 0;
  text-align: center;
  font-size: .78rem;
  line-height: 1.5;
  color: var(--muted);
}


/* ---------------------------------------------------------------------------
   9. Sold nearby - four small cards across
   --------------------------------------------------------------------------- */

.sales { display: grid; gap: 16px; }
@media (min-width: 560px) { .sales { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) { .sales { grid-template-columns: repeat(4, 1fr); } }

.sale { display: flex; flex-direction: column; padding: 24px; }
.sale-where { font-size: .95rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.sale-when { margin-top: 3px; font-size: .8rem; color: var(--soft); }
.sale-price {
  margin-top: auto;
  padding-top: 16px;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--heading);
}


/* ---------------------------------------------------------------------------
   9b. The little maps
   -------------------------------------------------------------------------

   A frosted card like everything else on the page, with the map inside it and
   the "these are postcodes, not front doors" line underneath.

   The whole card starts hidden and is only shown once the map has drawn. If
   the map cannot load, none of this is ever seen and the panel is the list it
   always was.
   --------------------------------------------------------------------------- */

.map-holder {
  margin: 0 auto 20px;
  padding: 10px 10px 4px;
  background: var(--card);
  -webkit-backdrop-filter: var(--card-blur);
  backdrop-filter: var(--card-blur);
  border: 1px solid var(--card-edge);
  border-radius: var(--card-round);
  box-shadow: var(--card-shadow);
}

/*
  THE MAP'S HEIGHT IS SET HERE AND NOWHERE ELSE, AND IT MATTERS.

  A map measures the box it is put in. Given a box with no height it draws
  itself a few pixels tall - a squashed strip with the streets and the dots
  flattened into it - and it looks broken rather than missing, which is worse.

  So the height is stated twice on purpose. `height` is the size we want;
  `min-height` is the floor it can never fall through, whatever else on the
  page might try to squeeze it. Nothing in any script sets a height - a script
  that ran late, or not at all, would bring the strip straight back.
*/
.map-canvas {
  position: relative;
  height: 320px;
  min-height: 320px;
  border-radius: 12px;
  overflow: hidden;
  /* Something to look at for the half-second before the first squares arrive,
     in the sky's own colours rather than MapLibre's grey. */
  background: linear-gradient(180deg, #DCE9F6 0%, #EAF2FA 100%);
}

/*
  ON A PHONE THE MAP GETS BIGGER, NOT SMALLER, AND THAT IS THE WHOLE POINT.

  It used to be cut to 240px on a phone so it would not push the list out of
  sight. That was right when the map was a picture of the list. It is wrong
  now that the map IS the control: a small map is a fiddly map, and Craig
  found exactly that with his thumb.

  So it goes edge to edge and taller. The card loses its side padding and its
  round corners at this width, and the holder is pulled out past the page's
  own 24px gutters, so the map is the full width of the phone. Nothing pokes
  out sideways because it is pulled out by exactly the gutter it is inside.
*/
@media (max-width: 560px) {
  .map-holder {
    margin-inline: -24px;
    padding: 0;
    border-radius: 0;
    border-left: 0;
    border-right: 0;
  }
  .map-canvas {
    height: 62vh;
    min-height: 360px;
    border-radius: 0;
  }
  .map-note { padding: 12px 20px 10px; }
}

/*
  MapLibre's own two-finger hint, brought into the sky look.

  It is the message that appears when somebody tries to move the map with one
  finger - see the cooperative gestures note in panel-map.js. Left alone it is
  black and square and looks like another company's software.
*/
.maplibregl-cooperative-gesture-screen {
  border-radius: 0;
  background: rgba(33, 65, 96, .55);
  font-family: var(--font);
  font-weight: 600;
}

.map-note {
  padding: 10px 8px 8px;
  text-align: center;
  font-size: .74rem;
  line-height: 1.5;
  color: var(--muted);
}
.map-note b { font-weight: 600; color: var(--soft); }

/* One dot. Drawn by the browser, so there is no picture to fetch. */
.map-dot {
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(32, 54, 79, .45);
  cursor: pointer;
}
/* A dot with more than one property at it wears the number. */
.map-dot-many {
  display: grid;
  place-items: center;
  font: 600 11px/1 var(--font);
  color: #fff;
}
/* The property itself: a ring round it so it is never mistaken for a sale. */
.map-dot-mine { box-shadow: 0 0 0 4px rgba(200, 85, 61, .25), 0 1px 5px rgba(32, 54, 79, .5); }

/* The little box that opens when a dot is clicked. */
.map-pop-count {
  margin-bottom: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule);
  font-size: .78rem;
  font-weight: 600;
  color: var(--soft);
}
.map-pop-where { font-size: .86rem; font-weight: 600; line-height: 1.3; color: var(--ink); }
.map-pop-where + .map-pop-where { margin-top: 8px; }
.map-pop-when { margin-top: 2px; font-size: .78rem; color: var(--soft); }
.map-pop-when + .map-pop-where { margin-top: 8px; }
/* A name in the box that opens that property's own page. */
.map-pop-link { display: block; text-decoration: none; }
.map-pop-link:hover { color: var(--heading); text-decoration: underline; }
/* A long list scrolls inside the box instead of running off the map. How
   tall it may be is worked out for each box - see openBox in panel-map.js. */
.map-pop-scrolls {
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(58, 107, 181, .35) transparent;
}

/* Our own zoom buttons, sat on top of the map in its top right corner. */
.map-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--card-shadow);
}
.map-zoom button {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border: 0;
  padding: 0;
  background: rgba(255, 255, 255, .92);
  color: var(--heading);
  cursor: pointer;
}
.map-zoom button:hover { background: #fff; }
.map-zoom svg { width: 16px; height: 16px; }

/* On a phone these are the zoom control, so they are thumb-sized. 32px is a
   mouse target; a finger wants 44. */
@media (max-width: 560px) {
  .map-zoom { top: 12px; right: 12px; gap: 2px; }
  .map-zoom button { width: 44px; height: 44px; }
  .map-zoom svg { width: 20px; height: 20px; }
}

/* ---------------------------------------------------------------------------
   The map as a control

   The draw-your-own circle used to live here. It was replaced by the map
   itself on 18 September 2026 - see HANDOVER.md - so everything that drew it
   and its two handles has gone. What is left is the quiet "updating" chip and
   the lines the panels show when a view is empty or was too long to print
   whole.
   --------------------------------------------------------------------------- */

/*
  Shown while new cards are being worked out. Deliberately small and quiet:
  moving a map is a small thing and should not make the page flash.
*/
.map-working {
  position: absolute;
  left: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .92);
  box-shadow: var(--card-shadow);
  color: var(--heading);
  font: 600 .78rem/1 var(--font);
}

/*
  The cards while they are being replaced.

  Faded, never emptied. An empty space where a list was reads as "there is
  nothing here", which would be a wrong answer shown for half a second on
  every single nudge of the map.
*/
#cards-sales.is-updating,
#cards-flips.is-updating {
  opacity: .45;
  transition: opacity .15s ease;
}

/* A view with nothing in it, or one too big to list. Says what to do next. */
.area-empty {
  margin: 0 auto;
  max-width: 60ch;
  padding: 22px 16px;
  text-align: center;
  font-size: .92rem;
  line-height: 1.6;
  color: var(--soft);
}
.area-empty b { color: var(--heading); }

/* Owning up to a panel that was too long to print whole. */
.area-trimmed {
  margin: 0 0 16px;
  text-align: center;
  font-size: .8rem;
  color: var(--muted);
}

/* MapLibre's own furniture, brought into the sky look. */
.maplibregl-popup-content {
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
  font-family: var(--font);
}


/* ---------------------------------------------------------------------------
   10. The Flipometer - two across
   --------------------------------------------------------------------------- */

.flips { display: grid; gap: 16px; }
@media (min-width: 700px) { .flips { grid-template-columns: 1fr 1fr; } }

.flip { padding: 24px; }

/* A card that opens that property's own page. It looks exactly like the
   others until the pointer is on it, and then lifts a little. */
a.card-link { display: block; color: inherit; text-decoration: none; transition: transform .15s, box-shadow .15s; }
a.sale.card-link { display: flex; }
a.card-link[hidden] { display: none; }
a.card-link:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(80, 110, 160, .18); }
a.card-link:focus-visible { outline: 3px solid var(--tile-icon); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { a.card-link { transition: none; } a.card-link:hover { transform: none; } }

/* A card whose address link is stretched over the whole of it, so the links
   inside it - the planning lines - still work. Looks and lifts exactly like
   the cards above. */
.card-host { position: relative; transition: transform .15s, box-shadow .15s; }
.card-host:hover { transform: translateY(-2px); box-shadow: 0 12px 36px rgba(80, 110, 160, .18); }
.card-stretch { display: block; color: inherit; text-decoration: none; }
.card-stretch::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.card-stretch:focus-visible { outline: none; }
.card-host:focus-within { outline: 3px solid var(--tile-icon); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .card-host { transition: none; } .card-host:hover { transform: none; } }

/* Planning applications, one to a line: on a Flipometer card and in the
   Planning history panel. */
.plan-lines { list-style: none; margin: 0; padding: 0; }
.plan-line { padding: 7px 0; border-top: 1px solid var(--rule); }
.plan-line:first-child { border-top: 0; }
.plan-what {
  display: block;
  font-size: .84rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
  text-decoration: none;
}
a.plan-what:hover { color: var(--heading); text-decoration: underline; }
.plan-meta { display: block; margin-top: 2px; font-size: .76rem; color: var(--soft); }
.plan-outcome { font-weight: 600; color: var(--heading); }
/* On a card, the lines and "See all" sit above the stretched link, so they
   open their own pages rather than the card's. */
.flip-plans { position: relative; z-index: 1; margin-top: 12px; padding-top: 8px; border-top: 1px solid var(--rule); }
.plan-more { display: inline-block; margin-top: 4px; font-size: .78rem; font-weight: 600; color: var(--soft); text-decoration: none; }
.plan-more:hover { color: var(--heading); text-decoration: underline; }

/* The Planning history panel on a house page: the lines in one frosted card. */
.plan-card { padding: 14px 24px; }
.plan-card .plan-line { padding: 12px 0; }
.plan-card .plan-what { font-size: .95rem; }
.plan-card .plan-meta { font-size: .8rem; }
.plan-none { padding: 22px 24px; font-size: .92rem; color: var(--soft); }
.flip-where { margin-bottom: 10px; font-size: .98rem; font-weight: 600; color: var(--ink); }

.flip-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
  font-size: .88rem;
}
.flip-line span:first-child { color: var(--soft); }

.flip-gain {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
}
.flip-gain b { font-size: 1.45rem; font-weight: 600; letter-spacing: -0.03em; color: var(--heading); }
/* The gain sits on the left; how long it was held and what to call it sit
   together on the right. */
.flip-gain span { margin-left: auto; font-size: .82rem; color: var(--soft); }

/* "Flipped", or "Developed" where permission was granted between the two
   sales. A quiet tile, the same family as the icon tiles, so it reads as a
   label on the card rather than as a claim about the property. */
.flip-label {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--tile);
  color: var(--tile-icon);
  font-size: .72rem;
  font-style: normal;
  font-weight: 600;
  letter-spacing: .01em;
}
/* "Developed" is the rarer of the two and the one worth noticing. */
.flip-label-built { background: #D7E7D8; color: #35673B; }

/* "Sold as part of a portfolio" - a quiet caveat under the gain, not a
   warning. It qualifies the figure above it, so it sits right under it. */
.flip-note { margin: 8px 0 0; font-size: .78rem; line-height: 1.45; color: var(--muted); }

.flip-planning { margin-top: 8px; font-size: .8rem; line-height: 1.45; color: var(--muted); }


/* ---------------------------------------------------------------------------
   11. A two-line heading under a round icon, the way the reference does
       "Get Early Access / To New Categories" - used for the calculator and
       for the address search
   --------------------------------------------------------------------------- */

.orb {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  margin: 0 auto 20px;
  border-radius: 50%;
  color: #fff;
  background: radial-gradient(circle at 35% 30%, #9CC6F5, var(--tile-icon));
  box-shadow: 0 12px 26px -12px rgba(58, 107, 181, .8), inset 0 1px 0 rgba(255, 255, 255, .6);
}
.orb svg { width: 26px; height: 26px; }

.two-line h1,
.two-line h2 {
  font-size: clamp(1.9rem, 4.6vw, 2.7rem);
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.two-line h1 b, .two-line h2 b { display: block; font-weight: 600; color: var(--heading-deep); }
.two-line h1 span, .two-line h2 span { display: block; font-weight: 400; color: var(--heading-soft); }
.two-line .section-head p { margin-top: 12px; color: var(--grey); }


/* ---------------------------------------------------------------------------
   12. The calculator
   --------------------------------------------------------------------------- */

.sums { max-width: 920px; margin: 0 auto; padding: 28px; }

.sums-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .sums-grid { grid-template-columns: repeat(3, 1fr); } }
.sums-grid + .sums-grid { margin-top: 16px; }

.field-label { display: block; margin-bottom: 6px; font-size: .8rem; color: var(--soft); }

/* A £ sign and a number in one rounded box, like the reference's email box. */
.money {
  display: flex;
  align-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .95);
  background: rgba(255, 255, 255, .85);
  padding: 0 18px;
  box-shadow: 0 6px 18px -10px rgba(80, 110, 160, .35);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.money:focus-within {
  border-color: var(--tile-icon);
  box-shadow: 0 0 0 3px rgba(58, 107, 181, .18);
}
.money > span { color: var(--muted); }
.money input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 0 12px 6px;
  font: inherit;
  font-size: .98rem;
  color: var(--ink);
  outline: none;
}
.money input:focus-visible { outline: none; box-shadow: none; }
/* The same 16px rule as the search box, and for the same reason: a phone
   zooms the page in on a box with smaller text than this. */
@media (max-width: 760px) {
  .money input { font-size: 16px; }
}

/* The total, in a tinted pill the same size as the boxes beside it. */
.total {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-height: 47px;
  border-radius: 999px;
  background: var(--tile);
  padding: 0 20px;
}
.total b { font-size: 1.3rem; font-weight: 600; letter-spacing: -0.03em; color: var(--heading); }

.sums-note { margin-top: 14px; font-size: .76rem; line-height: 1.5; color: var(--muted); }

.answers { display: grid; gap: 16px; margin-top: 22px; }
@media (min-width: 640px) { .answers { grid-template-columns: 1fr 1fr; } }

.answer {
  padding: 24px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .9);
}
.answer h3 {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: .95rem;
  font-weight: 600;
  color: var(--blue-line);
}

.answer-line {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: .88rem;
}
.answer-line span:first-child { color: var(--soft); }

.answer-result {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--rule);
  font-size: .88rem;
}
.answer-result span:first-child { color: var(--soft); }

.answer-figure {
  flex: 0 0 auto;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--heading);
}
/* Your own money left in the house is a plain figure, not a highlighted one. */
.answer-figure.is-plain { color: var(--ink); }


/* ---------------------------------------------------------------------------
   13. The address search: one rounded box with its button inside it, like
       the reference's email box, and the list of addresses under it
   --------------------------------------------------------------------------- */

.search-page { margin-top: 96px; }
.search-page .section-head { margin-bottom: 30px; }

/* The grey under "Get Early Access" sits on cream in the reference. Up here
   it sits on blue sky, where it is too faint to read, so these two lines take
   the darker blue from the same picture instead. */
.search-page .section-head p { color: var(--blue-line); font-size: .95rem; }

.search-box {
  position: relative;          /* the guesses hang off this */
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  padding: 6px 6px 6px 22px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  border: 1px solid rgba(255, 255, 255, .95);
  box-shadow: var(--card-shadow);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.search-box:focus-within {
  border-color: var(--tile-icon);
  box-shadow: 0 0 0 3px rgba(58, 107, 181, .18), var(--card-shadow);
}

.search-field { flex: 1; min-width: 0; display: flex; }
.search-field input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  padding: 12px 0;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  outline: none;
}
/*
  SIXTEEN PIXELS, AND IT IS NOT A LOOK DECISION.

  A phone zooms the whole page in when somebody taps a box whose text is
  smaller than 16px, and then leaves them zoomed. The base size on this site
  is 15px, so every box on it did exactly that. This is the fix and it has to
  stay: anything under 16px here brings the zoom straight back.
*/
@media (max-width: 760px) {
  .search-field input { font-size: 16px; }
}
.search-field input::placeholder { color: var(--muted); }
.search-field input:focus-visible { outline: none; box-shadow: none; }

.search-btn {
  flex: 0 0 auto;
  border: 0;
  border-radius: 999px;
  padding: 11px 22px;
  background: var(--tile);
  color: var(--heading);
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s ease;
}
.search-btn:hover { background: #CFE0F3; }

@media (max-width: 480px) {
  .search-box { padding-left: 16px; }
  .search-btn { padding: 11px 16px; }
}

/* ---------------------------------------------------------------------------
   The guesses under the search box

   A short list of the addresses and postcodes we already hold that start the
   way somebody has started typing. It is a shortcut and never a gate: with no
   script the list is never drawn at all and the box is the plain form it has
   always been.
   --------------------------------------------------------------------------- */

.guesses {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 20;
  margin: 0;
  padding: 6px;
  list-style: none;
  /* Frosted, like every other card on the site. */
  background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: var(--card-blur);
  backdrop-filter: var(--card-blur);
  border: 1px solid var(--card-edge);
  border-radius: 18px;
  box-shadow: 0 16px 40px rgba(80, 110, 160, .18);
  /* Long lists scroll inside themselves rather than running off the screen.
     The script narrows this further when a phone keyboard is in the way - see
     `room` in suggest.js. */
  max-height: 60vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.guess a {
  display: block;
  padding: 11px 16px;
  border-radius: 12px;
  text-decoration: none;
  /* A THUMB WANTS 44 PIXELS. Eleven of padding either side of two lines of
     text comes to about 58, so a row is comfortably bigger than a fingertip
     and two rows are never mistaken for one another. */
  min-height: 44px;
}
.guess a:hover,
.guess.is-on a {
  background: var(--tile);
}

.guess-what {
  display: block;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.guess-where {
  display: block;
  margin-top: 2px;
  font-size: .8rem;
  color: var(--soft);
}

/* Something went wrong, or something is missing: said plainly, in a card. */
.notice {
  max-width: 640px;
  margin: 18px auto 0;
  padding: 16px 22px;
  text-align: center;
  font-size: .95rem;
}

/* Every address in the postcode, two columns on a laptop. */
.addresses { padding: 24px 28px; }
.addresses h2 { font-size: 1.15rem; font-weight: 600; color: var(--heading); }

.address-list { list-style: none; margin: 14px 0 0; padding: 0; }
@media (min-width: 760px) { .address-list { columns: 2; column-gap: 32px; } }
.address-list li { break-inside: avoid; border-top: 1px solid var(--rule); }
.address-list a {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 2px;
  font-size: .95rem;
  color: var(--ink);
  text-decoration: none;
}
.address-list a:hover { color: var(--tile-icon); }
.address-list a span { color: var(--muted); }

/* "Not there?" and its own box. */
.look-anyway { margin-top: 28px; text-align: center; }
.look-anyway p { margin-bottom: 14px; font-size: .95rem; color: var(--blue-line); }


/* ---------------------------------------------------------------------------
   14. The footer: the page ends in five layers of hills

   Back to front, each a little lower and a little darker than the one behind
   it. The words sit on the front layer, in white.
   --------------------------------------------------------------------------- */

.foot {
  position: relative;
  margin-top: auto;
  padding-top: 110px;
}

.foot-hills {
  position: relative;
  height: 280px;
}
/* Only the hills drawing itself - not the little logo in the footer words,
   which would otherwise be pinned to the corner along with it. */
.foot-hills > svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.foot-words {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding-bottom: 22px;
  color: #fff;
}

.foot-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 28px;
}

.foot-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-decoration: none;
}
.foot-brand svg { width: 20px; height: 20px; }

.foot-links { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.foot-links a { font-size: .92rem; font-weight: 500; text-decoration: none; }
.foot-links a:hover { text-decoration: underline; }

.foot-small { margin-top: 10px; font-size: .78rem; color: rgba(255, 255, 255, .85); }

@media (max-width: 640px) {
  .foot { padding-top: 80px; }
  .foot-hills { height: 200px; }
  .foot-words { padding-bottom: 14px; }
  .foot-small { margin-top: 6px; }
}


/* ---------------------------------------------------------------------------
   Planning nearby - filters, a count, and cards three across
   --------------------------------------------------------------------------- */

/* The three rows of filter buttons. Each is a set of radio buttons drawn as
   the site's own round pills. */
.plan-filters { display: grid; gap: 10px; margin: 18px 0 16px; }
.plan-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; padding: 0; border: 0; }
.plan-filter legend {
  float: left;
  width: 5.5em;
  margin-right: 4px;
  padding: 0;
  font-size: .8rem;
  font-weight: 600;
  color: var(--soft);
}
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-block;
  padding: 6px 14px;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  background: rgba(255, 255, 255, .55);
  font-size: .8rem;
  font-weight: 500;
  color: var(--heading);
  transition: background .15s;
}
.chip:hover span { background: rgba(255, 255, 255, .85); }
.chip input:checked + span { background: var(--heading); border-color: var(--heading); color: #fff; font-weight: 600; }
.chip input:focus-visible + span { outline: 2px solid #fff; box-shadow: 0 0 0 4px var(--tile-icon); }

/* How many are showing. Changes with the map and with every filter. */
/* The odds line under the filters: one glass strip, the same ink as a card. */
.plan-odds {
  margin: 0 0 14px; padding: 14px 20px; text-align: center;
  font-size: .9rem; line-height: 1.5; font-weight: 500; color: var(--blue-line);
}

.plan-count { margin: 0 0 14px; text-align: center; font-size: .84rem; font-weight: 600; color: var(--soft); }

.plan-grid { display: grid; gap: 16px; }
@media (min-width: 620px) { .plan-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 960px) { .plan-grid { grid-template-columns: repeat(3, 1fr); } }

.plan-near { display: flex; flex-direction: column; padding: 22px 24px; }
.plan-kind { font-size: .74rem; font-weight: 600; letter-spacing: .02em; color: var(--soft); }
.plan-near-where {
  display: block;
  margin-top: 4px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-decoration: none;
}
/* The description and its link sit above the card's stretched link. */
.plan-near-body { position: relative; z-index: 1; margin-top: 8px; }
.plan-near-body .plan-line { padding: 0; border: 0; }

@media (max-width: 560px) {
  .plan-filter legend { float: none; width: 100%; }
}


/* ---------------------------------------------------------------------------
   "What's moving in the mortgage market" - Craig's own updates.
   One glass card, one row per update, the same ink and rules as the
   older-sales rows in the top panel.
--------------------------------------------------------------------------- */
.updates { padding: 8px 26px; }
.update { padding: 14px 0; }
.update + .update { border-top: 1px solid var(--rule); }
.update-line { font-size: .95rem; line-height: 1.5; color: var(--ink); }
.update-line b { font-weight: 600; color: var(--heading); }
.update-when { margin-top: 3px; font-size: .78rem; color: var(--muted); }

.page-title { font-size: clamp(1.7rem, 4vw, 2.3rem); font-weight: 600; letter-spacing: -0.03em; color: var(--heading); }

/* Craig's posting page. The boxes are the calculator's rounded white boxes. */
.update-form, .update-edit { padding: 22px 26px; }
.update-form { display: grid; gap: 14px; max-width: 640px; margin: 0 auto; }
.update-form input, .update-edit input {
  width: 100%;
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  padding: 11px 18px;
  font: inherit;
  font-size: 16px;            /* 16px: a phone does not zoom in on the box */
  color: var(--ink);
  box-shadow: 0 6px 18px -10px rgba(80, 110, 160, .35);
}
.update-form input:focus-visible, .update-edit input:focus-visible {
  outline: none;
  border-color: var(--tile-icon);
  box-shadow: 0 0 0 3px rgba(58, 107, 181, .18);
}
.update-form .search-btn { justify-self: start; }
.update-edit + .update-edit { margin-top: 14px; }
.update-edit-row { display: grid; gap: 12px; margin-top: 10px; }
@media (min-width: 760px) {
  .update-edit-row { grid-template-columns: 1fr 2fr 1fr auto; align-items: end; }
}
.update-delete { margin-top: 10px; }
.more-btn--quiet { color: var(--muted); font-weight: 500; }
.notice-good { color: #35673B; }


/* ---------------------------------------------------------------------------
   Broker Sense - the live chat button, bottom right on every page. Ours,
   in the site's own glass; tawk.to's chat replaces it once pressed.
--------------------------------------------------------------------------- */
.chat-btn {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 50;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  border-radius: 999px;
  padding: 11px 20px;
  /* The same see-through glass as the market updates panel above it -
     see ".market-panel, .market-pill, .chat-btn" further down. */
  font: inherit;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);          /* readable over the hills as well as the sky */
  cursor: pointer;
}
.chat-btn:hover { background: rgba(255, 255, 255, .5); }
.chat-btn[hidden] { display: none; }
.chat-dot { width: 9px; height: 9px; border-radius: 50%; background: #4FA35A; }
.chat-btn.is-loading { opacity: .7; cursor: progress; }


/* ---------------------------------------------------------------------------
   "What's moving in the mortgage market" - the floating panel.

   Fixed to the right of the screen, ABOVE the Broker Sense button: the button
   is 16px off the bottom and about 44px tall, so the panel's bottom edge is
   at 76px and the two can never touch. The same glass as every card.
--------------------------------------------------------------------------- */
.market-float {
  position: fixed;
  right: 16px;
  /* 76px: above the Broker Sense button. Raised by the chat's own script
     once tawk.to's bubble holds the corner - see _chat.html. */
  bottom: var(--float-bottom, 76px);
  z-index: 49;                        /* just under the Broker Sense button */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  transition: opacity .2s ease, visibility .2s ease;
}
.market-float[hidden] { display: none; }
/* Stepping out of the way while a map's controls pass underneath. */
.market-float.is-dodging { opacity: 0; visibility: hidden; }

.market-panel {
  position: relative;
  width: 300px;
  max-width: calc(100vw - 32px);
  /* Never taller than the screen above the button, less the header's room. */
  max-height: max(160px, calc(100vh - var(--float-bottom, 76px) - 96px));
  overflow-y: auto;
  padding: 16px 18px 14px;
}

/*
  REAL GLASS, WHEREVER IT FLOATS.

  The cards' glass is 55% white, which reads as glass over the blue sky at
  the top of a page. Down in the bottom corner - where this panel lives - the
  sky fades to nearly white, and 55% white over nearly white is a flat white
  box. So the floating panel and its pill are much more see-through, like
  the header bar: about a third white, fading across, with a stronger blur
  that also deepens the colour behind it, a bright top edge catching the
  light, and a soft shadow underneath.
*/
.market-panel, .market-pill, .chat-btn {
  /* Enough white to be read over ANYTHING it floats above. On a short page
     these sit over the dark hills in the footer, where a thinner glass left
     the small print barely visible (22 September 2026). At 64% fading to
     50%, the "Posted ..." line is 4.6:1 there, past the 4.5:1 bar for small
     print - and the blur, the deepened colour behind, the fade across and
     the bright top edge keep it glass over the sky. */
  background: linear-gradient(135deg, rgba(255, 255, 255, .64) 0%, rgba(255, 255, 255, .50) 100%);
  -webkit-backdrop-filter: blur(22px) saturate(170%);
  backdrop-filter: blur(22px) saturate(170%);
  border: 1px solid rgba(255, 255, 255, .55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .75),
    0 14px 40px -10px rgba(40, 70, 120, .35);
}
.market-float.is-pill .market-panel { display: none; }
.market-float.is-open .market-pill { display: none; }

.market-title {
  margin: 0 26px 6px 0;
  font-size: .9rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--heading);
}
.market-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
}
.market-close:hover { background: rgba(255, 255, 255, .7); color: var(--heading); }

.market-update { padding: 9px 0; }
.market-update + .market-update { border-top: 1px solid var(--rule); }
.market-line { font-size: .84rem; line-height: 1.45; color: var(--ink); }
.market-line b { font-weight: 600; color: var(--heading); }
/* The site's pale grey cannot be read on anything but white, and this panel
   floats over the hills as well as the sky. Its small print is the ink. */
.market-when { margin-top: 2px; font-size: .72rem; color: var(--ink); opacity: .75; }
.market-all {
  display: inline-block;
  margin-top: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--heading);
  text-decoration: none;
}
.market-all:hover { text-decoration: underline; }
.market-note { margin-top: 8px; font-size: .68rem; line-height: 1.45; color: var(--ink); opacity: .8; }

.market-pill {
  border-radius: 999px;
  padding: 8px 16px;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--heading);
  cursor: pointer;
}
.market-pill:hover { background: rgba(255, 255, 255, .5); }


/* A street's houses, or the places a street name is in - from a paste with
   no full postcode. The same card and list as a postcode's addresses. */
.street-place { margin-top: 4px; font-size: .86rem; color: var(--soft); }
.street-choices { columns: 1; }                  /* one place a line */
.street-count { margin-left: 6px; font-size: .78rem; color: var(--muted); }


/* ---------------------------------------------------------------------------
   Crime nearby: one glass card, a bar per category, biggest first.
--------------------------------------------------------------------------- */
.crime-card { padding: 22px 26px; }
.crime-head { font-size: .95rem; line-height: 1.5; color: var(--ink); }
.crime-head b { font-weight: 600; color: var(--heading); }
.crime-head .spinner { margin-right: 8px; vertical-align: middle; }
.crime-list { list-style: none; margin: 14px 0 0; padding: 0; }
.crime-list li {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr 3rem;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-top: 1px solid var(--rule);
  font-size: .88rem;
}
.crime-name { color: var(--ink); }
.crime-bar { height: 8px; border-radius: 999px; background: rgba(58, 107, 181, .12); overflow: hidden; }
.crime-bar i { display: block; height: 100%; border-radius: 999px; background: var(--tile-icon); }
.crime-count { text-align: right; font-weight: 600; color: var(--heading); }
.crime-streets { margin-top: 12px; font-size: .82rem; line-height: 1.5; color: var(--muted); }
/* Each kind is a button: click to show only that kind, click again for all.
   The row keeps the look of the plain bar it replaced. */
.crime-list li { display: block; padding: 0; }
.crime-row {
  display: grid;
  grid-template-columns: minmax(0, 11rem) 1fr 3rem;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 7px 6px;
  margin: 0 -6px;
  border: 0;
  border-radius: 8px;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.crime-row:hover { background: rgba(58, 107, 181, .07); }
.crime-row:focus-visible { outline: 2px solid var(--tile-icon); outline-offset: 1px; }
.crime-row.is-chosen { background: rgba(58, 107, 181, .14); }
.crime-row.is-chosen .crime-name { font-weight: 600; color: var(--heading); }
.crime-row.is-chosen .crime-bar i { background: var(--heading); }
.crime-hint { margin-top: 8px; font-size: .78rem; color: var(--soft); }
.crime-line { margin-top: 12px; font-size: .9rem; line-height: 1.5; color: var(--ink); }
.crime-line + .crime-line { margin-top: 4px; }

/* The crimes themselves, newest first. */
.crime-items { list-style: none; margin: 16px 0 0; padding: 8px 22px; }
.crime-items li {
  display: grid;
  grid-template-columns: 7.5rem 1fr;
  gap: 2px 14px;
  padding: 9px 0;
  border-top: 1px solid var(--rule);
  font-size: .86rem;
  line-height: 1.4;
}
.crime-items li:first-child { border-top: 0; }
.crime-when { color: var(--soft); }
.crime-what { color: var(--ink); }
.crime-what b { font-weight: 600; color: var(--heading); }
.crime-outcome { grid-column: 2; font-size: .78rem; color: var(--soft); }
.crime-small { margin-top: 10px; font-size: .76rem; line-height: 1.5; color: var(--muted); text-align: center; }

/* In a map dot's little box: what a police map point is. */
.map-pop-note { margin: 2px 0 8px; font-size: .74rem; line-height: 1.35; color: var(--muted); }

@media (max-width: 480px) {
  .crime-row { grid-template-columns: minmax(0, 8rem) 1fr 2.5rem; font-size: .82rem; }
  .crime-items { padding: 6px 16px; }
  .crime-items li { grid-template-columns: 1fr; }
  .crime-outcome { grid-column: 1; }
}


/* What the rules say about this land: the same small cards as the building,
   with the ones that apply first. */
.rules-none { padding: 18px 24px; font-size: .92rem; color: var(--ink); }
.rule-link { font-size: .78rem; color: var(--soft); text-decoration: none; }
.rule-link:hover { text-decoration: underline; }


/* ---------------------------------------------------------------------------
   Sharing: the Share row on a house page, the small share icon on a card,
   and the "Link copied" note. See auctions/web/share.py.
--------------------------------------------------------------------------- */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 13px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  color: var(--heading);
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.share-btn svg { width: 16px; height: 16px; }
.share-btn:hover { background: #fff; }
.share-btn:focus-visible { outline: 2px solid var(--tile-icon); outline-offset: 2px; }
.share-btn[hidden] { display: none; }
.share-main { background: var(--heading); border-color: var(--heading); color: #fff; }
.share-main:hover { background: var(--brand-ink); }

/* On a card: top right, above the link that covers the whole card. */
.card-share {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: rgba(255, 255, 255, .85);
  color: var(--heading);
  cursor: pointer;
}
.card-share svg { width: 16px; height: 16px; }
.card-share:hover { background: #fff; }
.card-share:focus-visible { outline: 2px solid var(--tile-icon); outline-offset: 2px; }
.card-host .flip-where, .card-host .plan-kind { padding-right: 40px; }

.share-note {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 50;
  transform: translate(-50%, 20px);
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--heading);
  color: #fff;
  font-size: .88rem;
  font-weight: 600;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s, transform .2s;
}
.share-note.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .share-note { transition: none; } }


/* /rents/edit: the form two boxes to a row on a laptop, one on a phone. */
.rents-form { grid-template-columns: 1fr 1fr; max-width: 720px; }
.rents-form .search-btn { grid-column: 1 / -1; }
@media (max-width: 560px) { .rents-form { grid-template-columns: 1fr; } }
.rent-card { overflow-x: auto; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}


/* ---------------------------------------------------------------------------
   The deal calculator: one box, the left side typed once, the right side
   the exit. See templates/_calc.html and static/js/calc.js.
--------------------------------------------------------------------------- */
.calc { max-width: 1040px; margin: 0 auto; padding: 26px; }
.calc [hidden] { display: none !important; }

.calc-headline {
  display: grid;
  gap: 4px;
  margin-bottom: 18px;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--tile);
  text-align: center;
}
.calc-headline-label { font-size: .85rem; font-weight: 600; color: var(--soft); }
.calc-headline-figure { font-size: 2.2rem; font-weight: 700; letter-spacing: -0.03em; color: var(--heading); }
.calc-headline-note { font-size: .78rem; color: var(--soft); }

.calc-top { display: flex; justify-content: flex-end; margin-bottom: 14px; }
.calc-view, .calc-choice, .calc-switchboard { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.calc-view, .calc-switchboard {
  padding: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .6);
  border: 1px solid rgba(255, 255, 255, .9);
}
.calc-pill {
  padding: 7px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--soft);
  font: inherit;
  font-size: .84rem;
  font-weight: 600;
  cursor: pointer;
}
.calc-choice .calc-pill { border: 1px solid var(--rule); background: rgba(255, 255, 255, .7); }
.calc-pill.is-on { background: var(--heading); color: #fff; }
.calc-pill:focus-visible, .calc-switch:focus-visible, .calc-bin:focus-visible {
  outline: 2px solid var(--tile-icon); outline-offset: 2px;
}

.calc-sides { display: grid; gap: 18px; }
@media (min-width: 880px) { .calc-sides { grid-template-columns: 1fr 1fr; align-items: start; } }
.calc-side { display: grid; gap: 14px; }
.calc-switchboard { justify-content: center; width: 100%; box-sizing: border-box; }

.calc-block {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 18px 20px;
  min-width: 0;
  border: 1px solid rgba(255, 255, 255, .9);
  border-radius: 16px;
  background: rgba(255, 255, 255, .6);
}
.calc-block legend {
  display: flex;
  align-items: center;
  gap: 10px;
  float: left;
  width: 100%;
  margin-bottom: 4px;
  padding: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--heading);
}
.calc-block legend + * { clear: both; }

.calc-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 11rem);
  align-items: center;
  gap: 12px;
  font-size: .88rem;
  color: var(--ink);
}
.calc-row small, .calc-line small { display: block; font-size: .74rem; color: var(--soft); }
.calc-row .money { padding: 0 14px; }
.calc-row .money input { padding: 9px 0 9px 6px; text-align: right; }
.money-after input { padding-left: 0; padding-right: 6px; }
.calc-choice { justify-content: flex-end; }

.calc-line, .calc-total, .calc-result {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .88rem;
  color: var(--ink);
}
.calc-line span:last-child { font-weight: 600; color: var(--heading); white-space: nowrap; }
.calc-total { padding-top: 8px; border-top: 1px solid var(--rule); font-weight: 600; }
.calc-total b { font-size: 1.1rem; color: var(--heading); }
.calc-result {
  align-items: center;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--tile);
  font-weight: 600;
}
.calc-result b { font-size: 1.35rem; letter-spacing: -0.02em; color: var(--heading); }
.calc .is-minus { color: #9B3A2F !important; }

.calc-hint { margin: 0; font-size: .78rem; line-height: 1.45; color: var(--soft); }
.calc-stress { margin: 0; font-size: .82rem; line-height: 1.45; color: var(--ink); }
.calc-stress:empty { display: none; }

/* The On / Off switch on a section's heading. */
.calc-switch {
  margin-left: auto;
  padding: 4px 12px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  background: rgba(255, 255, 255, .8);
  color: var(--soft);
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
}
.calc-switch.is-on { background: var(--heading); border-color: var(--heading); color: #fff; }

/* HMO rooms: one a line, a bin to take one out. */
.calc-rooms { display: grid; gap: 8px; }
.calc-room { grid-template-columns: minmax(0, 1fr) minmax(0, 9rem) 36px; }
.calc-bin {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--rule);
  border-radius: 50%;
  background: rgba(255, 255, 255, .8);
  color: var(--soft);
  cursor: pointer;
}
.calc-bin svg { width: 16px; height: 16px; }
.calc-bin:hover { color: #9B3A2F; }
.calc-add { justify-self: start; }

@media (max-width: 480px) {
  .calc { padding: 16px; }
  .calc-block { padding: 14px; }
  .calc-row { grid-template-columns: minmax(0, 1fr) minmax(0, 9rem); }
  .calc-room { grid-template-columns: minmax(0, 1fr) minmax(0, 7.5rem) 36px; }
  .calc-headline-figure { font-size: 1.8rem; }
}


/* ---------------------------------------------------------------------------
   How this area has changed. See templates/_area_change.html.
--------------------------------------------------------------------------- */
.area-card { padding: 22px 26px; }
.area-card + .area-card { margin-top: 16px; }
.area-table-wrap { overflow-x: auto; }
.area-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.area-table th, .area-table td { padding: 9px 10px; text-align: left; vertical-align: top; border-top: 1px solid var(--rule); }
.area-table thead th { border-top: 0; font-size: .78rem; font-weight: 600; color: var(--soft); }
.area-table tbody th { font-weight: 600; color: var(--heading); }
.area-table td b { color: var(--heading); }
.area-change { display: block; font-size: .76rem; font-weight: 600; }
.area-change.is-up { color: #2E7D4F; }
.area-change.is-down { color: #9B3A2F; }
.area-few { font-size: .76rem; color: var(--soft); }

.area-chart { margin: 20px 0 0; }
.area-chart svg { display: block; width: 100%; height: auto; }
.area-grid { stroke: var(--rule); stroke-width: 1; }
.area-axis { font-size: 11px; fill: var(--soft); }
.area-line { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.area-line-here { stroke: var(--heading); }
.area-line-council { stroke: #C8553D; stroke-dasharray: 6 4; }
.area-dot-here { fill: var(--heading); }
.area-dot-council { fill: #C8553D; }
.area-key { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: .8rem; color: var(--ink); }
.area-key-here::before, .area-key-council::before {
  content: ""; display: inline-block; width: 18px; height: 3px; margin: 0 6px 3px 0;
  vertical-align: middle; border-radius: 2px;
}
.area-key-here::before { background: var(--heading); }
.area-key-council::before { background: #C8553D; }
.area-key-note { flex-basis: 100%; font-size: .74rem; color: var(--soft); }
.area-habits { margin: 6px 0 0; padding-left: 18px; font-size: .88rem; line-height: 1.6; color: var(--ink); }
.money-after > span { padding-left: 5px; white-space: nowrap; }