/*
  Layout language and MudBlazor re-skin for Condo Atlas.

  Tokens live in condo-atlas.css and the component classes live in the Broadsheet bundle. This file
  only holds the page scaffolding the screens repeat and the overrides that pull MudBlazor onto the
  same tokens. No new colours, fonts or spacing values.
*/

/* ---------- page scaffolding ---------- */

.page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}

.page-body {
  flex: 1;
}

/* Full bleed with the same 40px gutters as the header and footer, so the body lines up with the
   nav and the dateline rail at every width instead of stopping short on a wide display. Line
   length stays readable because prose carries its own measure. */
.shell {
  padding: 28px 40px 60px;
}

.shell-tight {
  padding: 22px 40px 40px;
}

.shell-flush {
  padding: 0;
}

/* Asymmetric by default: content hugs the left, whitespace sits on the right. */
.measure {
  max-width: 64ch;
}

.measure-wide {
  max-width: 78ch;
}

.stack {
  display: flex;
  flex-direction: column;
}

.stack-1 { gap: var(--space-1); }
.stack-2 { gap: var(--space-2); }
.stack-3 { gap: var(--space-3); }
.stack-4 { gap: var(--space-4); }
.stack-6 { gap: var(--space-6); }

.row {
  display: flex;
  align-items: center;
}

.row-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.row-baseline {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
}

.row-gap-2 { gap: var(--space-2); }
.row-gap-3 { gap: var(--space-3); }
.row-wrap { flex-wrap: wrap; }
.spacer { flex: 1; }

.grid { display: grid; }
.grid-gap-3 { gap: var(--space-3); }
.grid-gap-4 { gap: var(--space-4); }
.grid-gap-6 { gap: var(--space-6); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }
.grid-6 { grid-template-columns: repeat(6, 1fr); }

/* Directory page: filter rail on the left, results on the right. */
.grid-rail {
  display: grid;
  grid-template-columns: 264px 1fr;
  gap: 36px;
}

/* Profile page: content on the left, sticky action column on the right. */
.grid-aside {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 52px;
  align-items: start;
}

.grid-aside-wide {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 52px;
  align-items: start;
}

.grid-console {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 44px;
}

.sticky-aside {
  position: sticky;
  top: 130px;
}

/* ---------- type ---------- */

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  margin: 0;
  letter-spacing: -.02em;
}

h1 { font-size: 46px; letter-spacing: -.03em; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }

.display {
  font-size: 56px;
  letter-spacing: -.03em;
  line-height: 1.04;
}

.kicker {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

.kicker-accent {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--color-accent-700);
}

.kicker-spot {
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--color-accent-2-700);
}

.lede {
  font-size: 16.5px;
  line-height: 1.5;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}

.meta {
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 62%, transparent);
}

.meta-sm {
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 58%, transparent);
}

.numeral {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}

.spot { color: var(--color-accent-2-700); }
.accent { color: var(--color-accent-700); }

/* ---------- rules and section separation ---------- */

.rule-rail-full {
  height: 2px;
  background: var(--color-text);
}

.hairline {
  height: 1px;
  background: var(--color-divider);
}

.section {
  margin-top: 34px;
}

.section-sm {
  margin-top: 22px;
}

.divider-row {
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

/* ---------- header and footer ---------- */

.site-nav {
  padding: 14px 40px 10px;
  gap: 26px;
  align-items: center;
}

.site-nav-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  align-items: center;
}

.site-nav a,
.site-nav-link {
  font-size: 14.5px;
  text-decoration: none;
  color: var(--color-text);
}

.site-nav-link:hover {
  color: var(--color-accent-700);
}

.site-nav-link.active {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-accent-700);
}

.site-nav-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-left: auto;
}

.site-nav-button {
  font-size: 13px;
  padding: 6px 13px;
  min-height: 34px;
}

/* The design system's own `.nav a { color: inherit }` outranks a single class, so the account
   button was taking the header's ink on its accent fill. Qualify every state to keep the label
   light against the green. */
.nav a.site-nav-account,
.nav a.site-nav-account:hover,
.nav a.site-nav-account:focus,
.nav a.site-nav-account[aria-current='page'] {
  color: var(--color-neutral-100);
}

/* Same clash anywhere a link is styled as a filled button: the global `a:hover` rule outranks
   `.btn-primary`, so the label would go dark on the accent fill. */
a.btn-primary,
a.btn-primary:hover,
a.btn-primary:focus,
a.btn-primary:active {
  color: var(--color-neutral-100);
}

/* ---------- account menu ---------- */

/* Open and close is the details element's own job, so the menu works on the statically rendered
   auth screens as well as the interactive ones. */
.account-menu {
  position: relative;
}

.account-menu > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.account-menu > summary::-webkit-details-marker {
  display: none;
}

.account-menu-caret {
  font-size: 10px;
  margin-left: 2px;
}

.account-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  z-index: 60;
  min-width: 244px;
  padding: 6px 0;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
}

.account-menu-head {
  padding: 10px 16px 12px;
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: 6px;
}

.account-menu-name {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 15px;
}

.account-menu-email {
  font-size: 12.5px;
  color: var(--color-neutral-700);
  word-break: break-all;
}

.account-menu-roles {
  margin-top: 4px;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--color-neutral-600);
}

.nav .account-menu-panel a,
.account-menu-signout button {
  display: block;
  width: 100%;
  padding: 8px 16px;
  font-size: 14px;
  text-align: left;
  text-decoration: none;
  color: var(--color-text);
  background: none;
  border: 0;
  cursor: pointer;
}

.nav .account-menu-panel a:hover,
.account-menu-signout button:hover {
  background: var(--color-surface);
  color: var(--color-accent-700);
}

.account-menu-rule {
  height: 1px;
  margin: 6px 0;
  background: var(--color-divider);
}

.account-menu-signout button {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-accent-700);
}

.site-nav-bell {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  color: var(--color-text);
}

.site-footer {
  margin-top: 60px;
}

.site-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding: 30px 40px 20px;
}

.site-footer-brand {
  font-size: 19px;
  margin-bottom: 8px;
}

.site-footer-blurb {
  font-size: 13px;
  max-width: 46ch;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  margin: 0;
}

.site-footer-links {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 12px;
  font-size: 13.5px;
}

.site-footer-links a {
  text-decoration: none;
}

.site-footer-legal {
  display: flex;
  justify-content: space-between;
  padding: 14px 40px 26px;
  font-size: 11.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}

/* ---------- imagery ---------- */

.photo {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: linear-gradient(160deg, #E7D6B7 0 55%, #C7E1D8 55%);
}

.photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.photo-caption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  background: var(--color-bg);
  padding: 6px 11px;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.photo-empty {
  display: grid;
  place-items: center;
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  background: var(--color-surface);
}

/* ---------- small pieces ---------- */

.bar-track {
  height: 16px;
  background: var(--color-neutral-200);
  display: block;
}

.bar-fill {
  height: 16px;
  background: var(--color-accent);
  display: block;
}

.bar-track-thin {
  height: 3px;
  background: var(--color-neutral-300);
}

.bar-fill-thin {
  height: 3px;
  background: var(--color-accent);
}

.sponsored-row {
  background: linear-gradient(90deg, var(--color-accent-100), transparent 70%);
}

.panel {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

.note-rail {
  display: flex;
  gap: 11px;
  padding: 16px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: color-mix(in srgb, var(--color-text) 75%, transparent);
}

.note-rail-mark {
  width: 3px;
  background: var(--color-accent);
  flex: none;
}

.paywall {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.paywall-blur {
  filter: blur(5px);
  opacity: .55;
  pointer-events: none;
  user-select: none;
}

.paywall-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  background: color-mix(in srgb, var(--color-bg) 72%, transparent);
}

.link-plain {
  text-decoration: none;
  color: inherit;
  display: block;
}

.link-plain:hover h2,
.link-plain:hover .numeral {
  color: var(--color-accent-700);
}

/* ---------- MudBlazor, pulled onto Broadsheet ---------- */

.mud-input-control .mud-input,
.mud-input-control .mud-input-slot,
.mud-typography,
.mud-button-root,
.mud-table,
.mud-dialog,
.mud-menu-item,
.mud-snackbar {
  font-family: var(--font-body);
}

.mud-input.mud-input-outlined .mud-input-outlined-border {
  border-color: var(--color-neutral-400);
  border-radius: var(--radius-md);
}

.mud-input-control.mud-input-required label.mud-input-label::after {
  color: var(--color-accent-2-700);
}

.mud-table-container .mud-table-head .mud-table-cell {
  font-family: var(--font-body);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 400;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  border-bottom: 2px solid var(--color-text);
}

.mud-table-container .mud-table-cell {
  font-size: 14px;
  border-bottom: 1px solid var(--color-divider);
}

.mud-table-root {
  background: transparent;
}

.mud-table.mud-table-outlined {
  border: none;
  background: transparent;
}

.mud-elevation-1,
.mud-paper {
  background-color: var(--color-bg);
}

.mud-dialog {
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.mud-dialog-title {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
}

.mud-chip {
  border-radius: calc(var(--radius-md) * 0.75);
  font-size: 11px;
  letter-spacing: .02em;
}

.mud-slider .mud-slider-track-fill {
  background: var(--color-accent);
}

.mud-rating-item {
  color: var(--color-accent);
}

.mud-tabs .mud-tab {
  font-family: var(--font-body);
  text-transform: none;
  font-size: 14px;
}

.mud-tabs-toolbar {
  background: transparent;
}

.mud-expand-panel {
  background: transparent;
  border-bottom: 1px solid var(--color-divider);
}

.mud-expand-panel .mud-expand-panel-header {
  padding-left: 0;
  padding-right: 0;
}

.mud-snackbar {
  border-radius: var(--radius-md);
}

/* The image treatments need a real box to work on. */
.halftone,
.cmyk {
  background-color: var(--color-surface);
}

/* ---------- responsive ---------- */

@media (max-width: 1180px) {
  .shell,
  .shell-tight {
    padding-left: 24px;
    padding-right: 24px;
  }

  .site-nav,
  .dateline,
  .site-footer-grid,
  .site-footer-legal {
    padding-left: 24px;
    padding-right: 24px;
  }

  .page-header .rule-hair,
  .page-header .rule-rail {
    margin-left: 24px;
    margin-right: 24px;
  }

  .grid-rail,
  .grid-aside,
  .grid-aside-wide,
  .grid-console {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .sticky-aside {
    position: static;
  }

  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 820px) {
  .site-nav-links {
    gap: 14px;
    font-size: 13px;
  }

  .grid-3,
  .grid-4,
  .grid-5,
  .grid-6 {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer-grid {
    grid-template-columns: 1fr 1fr;
  }

  .display {
    font-size: 40px;
  }

  h1 {
    font-size: 34px;
  }
}

/* ---------- auth screens ---------- */

.auth-layout {
  display: grid;
  grid-template-columns: 1fr 460px;
  min-height: calc(100vh - 240px);
}

.auth-pitch {
  padding: 48px 44px;
}

.auth-form {
  padding: 48px 44px;
  background: var(--color-surface);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 22px 0;
}

.auth-divider .hairline {
  flex: 1;
}

.field-error {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  color: var(--color-accent-2-700);
}

.auth-narrow {
  max-width: 560px;
  margin: 0 auto;
  padding: 56px 24px 80px;
  text-align: center;
}

@media (max-width: 1180px) {
  .auth-layout {
    grid-template-columns: 1fr;
  }

  .auth-pitch,
  .auth-form {
    padding: 30px 24px;
  }
}

/* ---------- consoles ---------- */

.console-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  margin: 0 -10px;
  border-radius: 2px;
  text-decoration: none;
  color: inherit;
}

.console-link:hover {
  background: var(--color-neutral-200);
}

.console-link-active {
  background: var(--color-accent-100);
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  color: var(--color-accent-800);
}

.kpi-band {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 26px;
  padding: 20px 0;
  border-top: 2px solid var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}

.kpi-band-6 {
  grid-template-columns: repeat(6, 1fr);
}

.lead-row {
  display: grid;
  grid-template-columns: 1fr 150px 110px 110px 90px;
  gap: 16px;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}

.trend {
  display: flex;
  align-items: flex-end;
  gap: 5px;
  height: 110px;
}

.trend-bar {
  flex: 1;
  background: var(--color-accent);
  min-height: 2px;
}

@media (max-width: 1180px) {
  .kpi-band,
  .kpi-band-6 {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }

  .lead-row {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}