/* Qatar real estate dashboard on reevehayward.com.
   The dashboard's own styles (dashboard/re-dashboard.css) were written for the artifact design system and
   its first palette; this maps them to the Reeve Hayward tokens: RH Serif and Sans, Midnight / Electric /
   Cyan / Slate, square corners, no shadows. Load after re-dashboard.css. */

/* The dashboard asks for serif weights 400 and 500 in places; the owner wants all its serif text bold (29-Oct-26),
   so inside .re-dash the serif is a family whose only face is the Bold file, for every weight. */
@font-face { font-family: "RH Serif Dashboard"; src: url(/fonts/ReeveHaywardSerif-Bold.woff2) format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; }

.re-dash {
  --color-fg: var(--ink);
  --color-fg-muted: var(--grey);
  --color-panel: #fff;
  --color-bg: #fff;
  --color-border-line: var(--rule);
  --color-bad: var(--grey);
  --font-anthropic-sans: var(--sans);
  --serif: "RH Serif Dashboard", Georgia, "Times New Roman", serif;
  --font-anthropic-serif: var(--serif);
  --cds-font-size-caption: .8125rem;
  --cds-font-size-body: .9375rem;
  --cds-font-size-heading: 1.15rem;
  --cds-font-weight-medium: 500;
  --cds-gap-md: 20px;
  --cds-gap-lg: 32px;
  --cds-pad-xs: 6px;
  --cds-pad-sm: 10px;
  --cds-radius: 0;
  --cds-border: var(--rule);
  --cds-ease-out: var(--ease);
  --cds-dur-slow: 320ms;
  --cds-text-secondary: var(--grey);
  --cds-surface-popover: #fff;
  --cds-shadow-popover: 0 0 0 1px var(--rule);
  --cds-chart-grid: rgba(30, 30, 58, .08);
  --cds-chart-axis: rgba(30, 30, 58, .32);
  --cds-chart-muted: #C9CCDA;
  --cds-chart-reference: rgba(30, 30, 58, .45);
  font-size: 16px;
  line-height: 1.55;
}

/* Palette: Electric leads, Midnight and Cyan support, Slate for falls (no red). */
.re-dash .lx {
  --lx-blue: #0A31F5;
  --lx-azure: #14D4F8;
  --lx-deep: #050E7F;
  --lx-light: #8FA3FB;
  --lx-up: #0A31F5;
  --lx-down: #6B6B88;
  --lx-c1: #0A31F5;
  --lx-c2: #050E7F;
  --lx-c3: #14D4F8;
  --lx-c4: #343454;
  --lx-c5: #8FA3FB;
  --lx-ramp0: #D6DDFE;
  --lx-ramp1: #0A31F5;
  --lx-wash: rgba(10, 49, 245, .06);
  --lx-r: 0;
  max-width: none;
}

/* Hero: the profile cover gradient, Electric at the top right into Midnight and night. */
.re-dash .lx-hero {
  border-radius: 0;
  background: linear-gradient(200deg, #0A31F5 0%, #0721B8 40%, #050E7F 78%, #020732 100%);
}
.re-dash .lx-hero::before {
  background: radial-gradient(38% 38% at 74% 24%, rgba(20, 212, 248, .32), transparent 70%), radial-gradient(30% 30% at 16% 80%, rgba(255, 255, 255, .1), transparent 70%);
}
.re-dash .lx-brand { letter-spacing: .04em; text-transform: none; font-size: var(--fs-sm); }
.re-dash .lx-brand-mark { width: 26px; height: 26px; }
/* The site sets headings in Midnight; on the hero they stay white. */
.re-dash .lx-hero h1 { color: #fff; font-family: var(--serif); font-weight: 700; letter-spacing: -.016em; }
.re-dash .lx-foot h2, .re-dash .lx-foot h3 { color: #fff; }
.re-dash .lx-foot { background: linear-gradient(200deg, #0A31F5 0%, #0721B8 40%, #050E7F 78%, #020732 100%); }

/* Square corners on every panel and control; no coloured top bars on the tiles. */
.re-dash .lx-foot, .re-dash .lx-q, .re-dash .lx-pair > div, .re-dash .lx-smp, .re-dash .lx-mode,
.re-dash .lx-eff, .re-dash .lx-fbnote, .re-dash .lx-mixbar, .re-dash .lx-heat .c, .re-dash .lx-tip,
.re-dash .lx-pill, .re-dash .lx-chip-w, .re-dash .lx-btn, .re-dash .lx-nav button, .re-dash .lx-seg,
.re-dash .lx-seg button, .re-dash .lx-lgi, .re-dash .lx-chips button, .re-dash .lx-psel { border-radius: 0; }
.re-dash .lx-kpi::before { display: none; }
.re-dash .lx-pbar::before { background: var(--electric); }

.re-dash [hidden] { display: none !important; }
.re-dash .lx h2, .re-dash .lx h3, .re-dash .lx h4 { margin: 0; }
.re-dash .lx button { font: inherit; }
.re-dash .lx table { border-collapse: collapse; }
.re-dash .dash-skeleton { min-height: 140px; background: linear-gradient(90deg, var(--mist) 0%, #E6E8F3 50%, var(--mist) 100%); background-size: 200% 100%; animation: reSkeleton 1.4s ease-in-out infinite; }
span.dash-skeleton, b.dash-skeleton { min-height: 0; display: inline-block; min-width: 3ch; }
.lx-pre .re-dash [data-lx-count] { visibility: hidden; }
@keyframes reSkeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* Section tabs stick under the site header, and move up when the header hides on scroll. */
.re-dash .lx-nav { top: var(--header-h); transition: top .3s var(--ease); }
body:has(.site-header.is-hidden) .re-dash .lx-nav { top: 0; }
.re-dash .lx-sec, .re-dash .lx-hero, .re-dash .lx-foot, .re-dash #h-signposts { scroll-margin-top: calc(var(--header-h) + 70px); }

.re-page { padding-bottom: clamp(48px, 7vw, 96px); }
.re-dash .lx-foot { margin-top: clamp(32px, 5vw, 56px); }