/* ============================================================================
   PUBLIC-GLASS — Liquid Glass for the brokerage's public pages
   (templates/public/** on public/base_sky.html, and every page of the brokerage
   website, brokerage_site/, which carries a byte copy of this file).
   ---------------------------------------------------------------------------
   The pages are built from Tailwind utilities (public-sky.css, whose theme maps
   every colour, size, corner and shadow to a --lg-* token). This layer turns the
   recurring utility idioms into the Liquid Glass components (SPEC §3, §5): cards
   are opaque surfaces with the material's edge and shadow (no borders), floating
   chrome is glass, buttons are pills (accent fill or glass), fields are fills.
   Every value is a --lg-* token from static/css/lg-core.css; the pages render the
   "Midnight" palette (<html class="dark" data-theme="dark">).

   Loaded after public-sky.css. Tailwind's utilities sit in @layer utilities, so
   these un-layered rules win without !important. Scoped to `.sky-public`, the
   <body> class of both shells.
   ============================================================================ */

.sky-public {
  /* The local names the page stylesheets read (public-sky-pages.css,
     fluid-glass-home.css, buildings.css), pointed at the system. */
  --r-xs: var(--lg-r-xs);
  --r-sm: var(--lg-r-sm);
  --r-md: var(--lg-r-xl);
  --r-lg: var(--lg-r-xl);
  --r-xl: var(--lg-r-2xl);
  --r-pill: var(--lg-r-pill);

  --glass-fill: var(--lg-glass-2);
  --glass-fill-strong: var(--lg-glass-3);
  --glass-fill-dark: var(--lg-glass-3);
  --glass-border: var(--lg-separator);
  --glass-border-strong: var(--lg-separator-strong);
  --glass-hi: var(--lg-highlight);
  --glass-hi-lo: var(--lg-hairline);
  --glass-shadow: var(--lg-shadow-md);
  --glass-shadow-lg: var(--lg-shadow-lg);
  --glass-filter: var(--lg-blur);
}

/* ── Page: the flat Liquid Glass background ── */
body.sky-public { background: var(--lg-bg); }

/* ── Headlines and labels ── */
.sky-public .font-display {
  font-family: var(--lg-font-display);
  font-weight: 700;
  letter-spacing: var(--lg-tracking-title);
  line-height: var(--lg-leading-tight);
}
.sky-public .font-display-italic,
.sky-public .font-display .italic,
.sky-public .italic { font-style: italic; }

.sky-public .eyebrow {
  font-family: var(--lg-font);
  letter-spacing: 0.08em;
  color: var(--lg-text-tertiary);
}

/* ════════════════════════════════════════════════════════════════════════
   SURFACES
   ════════════════════════════════════════════════════════════════════════ */

/* Glass (over the film, photos or content). */
.sky-public .glass {
  background: var(--lg-glass-2);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-color: transparent;
  border-radius: var(--lg-r-xl);
  box-shadow: var(--lg-elev-2);
}
.sky-public .glass-strong {
  background: var(--lg-glass-3);
  -webkit-backdrop-filter: var(--lg-blur-strong);
  backdrop-filter: var(--lg-blur-strong);
  border-color: transparent;
  border-radius: var(--lg-r-xl);
  box-shadow: var(--lg-elev-3);
}

/* `bg-card` is always a real panel (forms, pricing, tiles, the listing sidebar,
   the about blocks): an opaque card, the material's edge instead of a border. */
.sky-public .bg-card {
  background: var(--lg-surface);
  border-color: transparent;
  box-shadow: var(--lg-elev-2);
}
/* `bg-card-elevated` mostly backs full-bleed bands: a quiet fill, no edge. */
.sky-public .bg-card-elevated {
  background: var(--lg-fill-ink);
}
/* ... and is a card when the markup draws it as one. */
.sky-public .bg-card-elevated.border,
.sky-public .bg-card-elevated[class*="ring-"] {
  background: var(--lg-surface);
  border-color: transparent;
  box-shadow: var(--lg-elev-2);
  --tw-ring-color: transparent;
}

/* Cards that respond to the pointer: the shadow deepens; nothing moves. */
.sky-public .lift-on-hover,
.sky-public .glass-hover {
  transition: box-shadow var(--lg-dur) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease);
}
.sky-public .glass-hover:hover { box-shadow: var(--lg-elev-3); }
.sky-public .glass-hover:active { transform: scale(.98); }

/* ════════════════════════════════════════════════════════════════════════
   FIELDS — the Liquid Glass field: a fill, no border; solid on focus.
   ════════════════════════════════════════════════════════════════════════ */
.sky-public input:not([type=checkbox]):not([type=radio]):not([type=range]),
.sky-public select,
.sky-public textarea {
  border-radius: var(--lg-r-sm);
  background-color: var(--lg-field-bg);
  border-color: transparent;
  color: var(--lg-text);
  box-shadow: none;
  transition: background-color var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease);
}
.sky-public textarea { border-radius: var(--lg-r-md); }
.sky-public input:not([type=checkbox]):not([type=radio]):not([type=range]):hover,
.sky-public select:hover,
.sky-public textarea:hover { background-color: var(--lg-field-bg-hover); }
.sky-public input::placeholder,
.sky-public textarea::placeholder { color: var(--lg-text-tertiary); }
.sky-public input:focus,
.sky-public select:focus,
.sky-public textarea:focus {
  outline: 2px solid var(--lg-focus-ring);
  outline-offset: 3px;
  background-color: var(--lg-surface-solid);
  box-shadow: var(--lg-hairline);
}
.sky-public select option,
.sky-public select optgroup { color: var(--lg-text); background-color: var(--lg-surface-solid); }
.sky-public select {
  -webkit-appearance: none; appearance: none;
  padding-right: 2.4em;
  background-image: var(--lg-chevron);
  background-position: right 12px center;
  background-size: 16px 16px;
  background-repeat: no-repeat;
}
.sky-public input[type=checkbox],
.sky-public input[type=radio] { accent-color: var(--lg-accent); }

/* ════════════════════════════════════════════════════════════════════════
   BUTTONS (SPEC §5.8) — every call to action is a pill:
     accent fill (bg-accent)  -> the primary button
     bg-foreground / bg-white -> the glass button
     bordered links           -> the glass button
   ════════════════════════════════════════════════════════════════════════ */
.sky-public :is(a, button).bg-accent,
.sky-public :is(a, button).bg-foreground,
.sky-public :is(a, button).bg-white {
  border-radius: var(--lg-r-pill);
  font-weight: 600;
  transition: transform var(--lg-dur-fast) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease), box-shadow var(--lg-dur) var(--lg-ease);
}
.sky-public :is(a, button).bg-accent {
  background-color: var(--lg-accent-fill);
  color: var(--lg-on-accent);
  box-shadow: var(--lg-button-shadow);
}
.sky-public :is(a, button).bg-accent:hover { background-color: var(--lg-accent-fill-pressed); }
.sky-public :is(a, button):is(.bg-foreground, .bg-white) {
  background-color: var(--lg-glass-solid);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  color: var(--lg-text);
  box-shadow: var(--lg-elev-1);
}
.sky-public :is(a, button):is(.bg-foreground, .bg-white):hover { background-color: var(--lg-surface-solid); }
.sky-public :is(a, button):is(.bg-accent, .bg-foreground, .bg-white):active { transform: scale(.95); }

/* Bordered links -> glass pill */
.sky-public a.border.border-white\/30,
.sky-public a.border.border-border {
  border-radius: var(--lg-r-pill);
  border-color: transparent;
  background-color: var(--lg-glass-1);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-elev-1);
  color: var(--lg-text);
  transition: transform var(--lg-dur-fast) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease);
}
.sky-public a.border.border-white\/30:hover,
.sky-public a.border.border-border:hover { background-color: var(--lg-glass-solid); color: var(--lg-text); }
.sky-public a.border.border-white\/30:active,
.sky-public a.border.border-border:active { transform: scale(.95); }

/* The listing card's "Request a tour" (a <span> inside the card link). */
.sky-public .group\/btn {
  border-radius: var(--lg-r-pill);
  color: var(--lg-on-accent);
  box-shadow: var(--lg-button-shadow);
}

/* The page kit's button (glass), and its primary variant. */
.sky-public .g-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--lg-control-h);
  padding: 0 22px;
  border: 0;
  border-radius: var(--lg-r-pill);
  font-family: var(--lg-font);
  font-size: var(--lg-t-control);
  font-weight: 600;
  cursor: pointer;
  color: var(--lg-text);
  background: var(--lg-glass-2);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-elev-1);
  transition: transform var(--lg-dur-fast) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease);
}
.sky-public .g-btn:hover { background: var(--lg-glass-solid); }
.sky-public .g-btn:active { transform: scale(.95); }
.sky-public .g-btn--accent {
  background: var(--lg-accent-fill); color: var(--lg-on-accent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
  box-shadow: var(--lg-button-shadow);
}
.sky-public .g-btn--accent:hover { background: var(--lg-accent-fill-pressed); }
.sky-public .g-btn .lg-icon { --lg-icon-size: 18px; }

/* ════════════════════════════════════════════════════════════════════════
   CHIPS / BADGES
   ════════════════════════════════════════════════════════════════════════ */
/* A label on the accent fill reads the fill's label colour. */
.sky-public :is(span, div, p).bg-accent { background-color: var(--lg-accent-fill); color: var(--lg-on-accent); }

/* The small glass label above a heading. */
.sky-public .g-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  border-radius: var(--lg-r-pill);
  font-family: var(--lg-font);
  font-size: var(--lg-t-secondary);
  font-weight: 600;
  color: var(--lg-text);
  background: var(--lg-glass-1);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  box-shadow: var(--lg-elev-1);
}
.sky-public .g-eyebrow .lg-icon { color: var(--lg-accent-text); }

/* ════════════════════════════════════════════════════════════════════════
   CHROME — a glass top bar; the nav is a segmented track whose current page is
   the raised segment (SPEC §5.1, §5.2); the calls to action are the primary pill.
   ════════════════════════════════════════════════════════════════════════ */
.sky-public #skyHeader {
  background: var(--lg-glass-3);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  border-color: transparent;
  box-shadow: none;
}
.sky-public #skyHeader.bg-background\/90 { background: var(--lg-glass-3); box-shadow: var(--lg-elev-1); }

/* The top utility strip stays hidden (as before). */
.sky-public #skyHeader > .hidden.md\:block:first-child { display: none; }

.sky-public #skyHeader nav.md\:flex {
  gap: 2px;
  padding: 4px;
  border-radius: var(--lg-r-pill);
  background: var(--lg-nav-track);
}
.sky-public #skyHeader nav.md\:flex a {
  padding: 6px 14px;
  border-radius: var(--lg-r-pill);
  color: var(--lg-text-secondary);
  transition: color var(--lg-dur) var(--lg-ease), background-color var(--lg-dur) var(--lg-ease);
}
.sky-public #skyHeader nav.md\:flex a:hover { color: var(--lg-text); }
.sky-public #skyHeader nav.md\:flex a:has(> .bg-accent) {
  color: var(--lg-text);
  font-weight: 600;
  background: var(--lg-glass-solid);
  box-shadow: var(--lg-indicator-shadow);
}
.sky-public #skyHeader nav.md\:flex a > .bg-accent { display: none; }

/* ════════════════════════════════════════════════════════════════════════
   READABILITY — words the markup draws at low opacity over photos.
   ════════════════════════════════════════════════════════════════════════ */
.sky-public .text-white\/60,
.sky-public .text-white\/50,
.sky-public .text-white\/40 { color: color-mix(in srgb, var(--lg-white) 74%, transparent); }
.sky-public .text-foreground\/85,
.sky-public .text-foreground\/80 { color: var(--lg-text); }

/* ════════════════════════════════════════════════════════════════════════
   CORNERS — the markup's small radii were the old soft scale. On Liquid Glass
   a photo frame or tile is 24, a card 28 (SPEC §2); pills stay pills, fields
   keep the field radius (above).
   ════════════════════════════════════════════════════════════════════════ */
.sky-public :is(.rounded-sm, .rounded, .rounded-md, .rounded-lg) { border-radius: var(--lg-r-lg); }
.sky-public :is(.bg-card, .bg-card-elevated.border):is(.rounded-sm, .rounded, .rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl) { border-radius: var(--lg-r-xl); }

/* Call-to-action pills read as Liquid Glass buttons: 15/600, sentence case. */
.sky-public :is(a, button):is(.bg-accent, .bg-foreground, .bg-white),
.sky-public a.border.border-white\/30,
.sky-public a.border.border-border {
  font-size: var(--lg-t-control);
  text-transform: none;
  letter-spacing: normal;
}

/* "Virtually staged", on the photo itself. */
.sky-public .sky-staged {
  position: absolute; left: 8px; bottom: 8px;
  padding: 2px 8px;
  border-radius: var(--lg-r-pill);
  background: color-mix(in srgb, var(--lg-black) 62%, transparent);
  -webkit-backdrop-filter: var(--lg-blur);
  backdrop-filter: var(--lg-blur);
  color: var(--lg-white);
  font-size: var(--lg-t-caption);
  font-weight: 600;
  line-height: 1.4;
  pointer-events: none;
}

/* A listing with no photos yet: a quiet tinted panel in the photo's place. */
.sky-public .sky-nophoto-hero {
  height: clamp(260px, 40vh, 440px);
  background:
    radial-gradient(80% 120% at 20% -10%, var(--lg-accent-softer), transparent 60%),
    var(--lg-surface);
}
.sky-public .sky-nophoto-hero.sky-nophoto-hero--short { height: clamp(220px, 32vh, 360px); }

/* Navigation labels, buttons and the card's call to action: sentence case (SPEC §4, §5.8). */
.sky-public #skyHeader nav.md\:flex a { font-size: var(--lg-t-label); text-transform: none; letter-spacing: normal; }
.sky-public .group\/btn,
.sky-public .g-btn { font-size: var(--lg-t-control); font-weight: 600; text-transform: none; letter-spacing: normal; }
.sky-public .group\/btn { min-height: 36px; }

/* Boxes the markup outlines with a 1px border: the material's hairline edge instead (SPEC §3);
   on the page colour they are cards (surface + elevation). */
.sky-public .border.border-border:not(a):not(input):not(select):not(textarea) {
  border-color: transparent;
  box-shadow: var(--lg-hairline);
}
.sky-public .border.border-border:is(.bg-background, .bg-card, .bg-card-elevated):not(a):not(input):not(select):not(textarea) {
  background-color: var(--lg-surface);
  box-shadow: var(--lg-elev-2);
}