/* Dream Villa Connect app shell stylesheet (host-owned).

   Loaded AFTER the RCL's dream-villa.css so its :root tokens and host classes win
   (the RCL rules live in @layer dvc.*; these rules are unlayered). Conventions:
   every normal declaration value is a var(--dvc-*) / var(--app-*) reference or a
   keyword / unitless / percentage value; raw hex/px/length literals appear ONLY in
   --app-* custom-property definitions (the host tokenization points below).

   SHARED COMPOSITION CONTRACT (cross-agent; do not rename):
     .app-page         centered content column (max 1180px) + page padding
     .app-page-wide    wider centered column for dashboard/table screens
     .app-hero         full-bleed photo hero: .app-hero-media (the <dvc-photo>),
                       .app-hero-dim (darkening overlay), .app-hero-content
                       (centered display-serif content), .app-hero-title
     .app-panel-ink    dark ink panel card (ink bg, white text; eyebrows readable)
     .app-row          icon/photo tile + title/meta + trailing slot row:
                       .app-row-tile / .app-row-body / .app-row-title /
                       .app-row-meta / .app-row-trail
     .app-choice-card  <label> wrapping a radio input; checked = coral ring via :has()
     .app-range        styled input[type=range] (token accent-color)
     .app-grid-2/3/4   responsive card grids (4 -> 2 -> 1 and 3 -> 2 -> 1 collapse)
     .app-side-layout  content + sticky right rail; stacks below 900px
     .app-eyebrow      uppercase coral eyebrow (.app-eyebrow-ocean / -muted variants)
     .app-eyebrow-step numbered step section header ("Step 1 - Listing type" eyebrow
                       with inter-step spacing)
     .app-tone-coral / .app-tone-ocean / .app-tone-green / .app-tone-muted
                       icon/text tone helpers (token-consuming) */

:root {
  /* page chrome */
  --app-page-max: 1180px;
  --app-page-wide-max: 1400px;
  --app-page-pad-block: 2rem;
  --app-page-pad-inline: 1.5rem;
  --app-main-min-block: calc(100vh - var(--dvc-topnav-block-size));
  --app-transition: 0.16s ease;

  /* top nav */
  --app-topnav-layer: 60;
  --app-topnav-links-gap: 2px;
  --app-topnav-actions-gap: 18px;
  --app-iconbtn-size: 40px;
  --app-iconbtn-dot-size: 8px;
  --app-iconbtn-dot-block: 7px;
  --app-iconbtn-dot-inline: 8px;
  --app-iconbtn-dot-ring: 2px;
  --app-avatar-trigger-gap: 9px;
  --app-avatar-trigger-pad-block: 5px;
  --app-avatar-trigger-pad-start: 12px;
  --app-avatar-trigger-pad-end: 6px;

  /* nav popover menus */
  --app-nav-menu-block-start: calc(var(--dvc-topnav-block-size) + var(--dvc-space-2));
  --app-menu-head-pad: 6px 12px 8px;
  --app-menu-head-size: 11px;
  --app-menu-head-tracking: 0.06em;
  --app-menu-hr-margin: 4px;
  --app-persona-pad: 10px 12px 8px;
  --app-persona-name-size: 14px;
  --app-persona-role-size: 12.5px;
  --app-account-menu-min: 230px;
  --app-notif-width: 340px;
  --app-notif-head-pad-block: 14px;
  --app-notif-head-pad-inline: 16px;
  --app-notif-title-size: 15px;
  --app-notif-mark-size: 12.5px;
  --app-notif-row-pad-block: 13px;
  --app-notif-row-pad-inline: 16px;

  /* rows */
  --app-row-gap: 12px;
  --app-row-tile-size: 34px;
  --app-row-tile-radius: 9px;
  --app-row-body-gap: 3px;
  --app-row-title-size: 13.5px;
  --app-row-meta-size: 11.5px;

  /* hero */
  --app-hero-min-block: 22rem;
  --app-hero-pad: var(--dvc-space-8) var(--dvc-space-6);
  --app-hero-fg: #fff;
  --app-hero-dim: rgba(20, 16, 12, 0.45);
  --app-hero-measure: 40rem;
  --app-hero-title-size: clamp(2rem, 5vw, 2.75rem);

  /* ink panel */
  --app-panel-ink-fg: #fff;
  --app-panel-ink-eyebrow: rgba(255, 255, 255, 0.66);
  --app-panel-pad: var(--dvc-space-6);

  /* choice card + range */
  --app-choice-pad: var(--dvc-space-4);
  --app-choice-ring: 3px;

  /* grids + side layout */
  --app-grid-gap: 18px;
  --app-rail-size: 360px;
  --app-side-gap: 26px;
  --app-rail-top: calc(var(--dvc-topnav-block-size) + var(--dvc-space-6));

  /* steps */
  --app-step-gap: 28px;

  /* error card */
  --app-error-measure: 30rem;
  --app-error-title-size: 26px;

  /* reduced motion */
  --app-motion-off: 0.01ms;
}

/* ---------- page chrome ---------- */
.app-main {
  min-block-size: var(--app-main-min-block);
}

.app-page,
.app-page-wide {
  margin-inline: auto;
  padding-block: var(--app-page-pad-block);
  padding-inline: var(--app-page-pad-inline);
}

.app-page {
  max-inline-size: var(--app-page-max);
}

.app-page-wide {
  max-inline-size: var(--app-page-wide-max);
}

/* ---------- top nav (host composition around <dvc-topnav>) ---------- */
.app-topnav {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--app-topnav-layer);
}

.app-brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.app-topnav-links {
  display: flex;
  align-items: center;
  gap: var(--app-topnav-links-gap);
  margin-inline-end: auto;
}

.app-topnav-actions {
  display: flex;
  align-items: center;
  gap: var(--app-topnav-actions-gap);
  margin-inline-start: auto;
}

.app-currency-trigger {
  font-weight: 600;
  color: var(--dvc-ink-2);
}

.app-iconbtn {
  position: relative;
  display: grid;
  place-items: center;
  inline-size: var(--app-iconbtn-size);
  block-size: var(--app-iconbtn-size);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line-2);
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-surface);
  color: var(--dvc-ink);
  cursor: pointer;
}

.app-iconbtn-dot {
  position: absolute;
  inset-block-start: var(--app-iconbtn-dot-block);
  inset-inline-end: var(--app-iconbtn-dot-inline);
  inline-size: var(--app-iconbtn-dot-size);
  block-size: var(--app-iconbtn-dot-size);
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-coral);
  border: var(--app-iconbtn-dot-ring) solid var(--dvc-surface);
}

.app-avatar-trigger {
  display: flex;
  align-items: center;
  gap: var(--app-avatar-trigger-gap);
  padding-block: var(--app-avatar-trigger-pad-block);
  padding-inline: var(--app-avatar-trigger-pad-start) var(--app-avatar-trigger-pad-end);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line-2);
  border-radius: var(--dvc-radius-pill);
  background: var(--dvc-surface);
  color: var(--dvc-ink);
  cursor: pointer;
}

.app-avatar-owner {
  background: var(--dvc-coral);
}

/* ---------- nav popover menus (zero-JS, anchored under the sticky bar) ---------- */
.app-nav-menu {
  position: fixed;
  inset: auto;
  inset-block-start: var(--app-nav-menu-block-start);
  inset-inline-end: var(--dvc-space-4);
  margin: 0;
}

.app-menu-head {
  padding: var(--app-menu-head-pad);
  font-size: var(--app-menu-head-size);
  font-weight: 700;
  letter-spacing: var(--app-menu-head-tracking);
  color: var(--dvc-faint);
}

.app-menu-grow {
  flex: 1;
}

.app-menu-item-active {
  font-weight: 700;
}

.app-menu-hr {
  block-size: var(--dvc-border-width-hairline);
  background: var(--dvc-line);
  border: 0;
  margin-block: var(--app-menu-hr-margin);
  margin-inline: 0;
}

.app-menu-persona {
  display: flex;
  flex-direction: column;
  padding: var(--app-persona-pad);
}

.app-menu-persona-name {
  font-weight: 700;
  font-size: var(--app-persona-name-size);
}

.app-menu-persona-role {
  color: var(--dvc-muted);
  font-size: var(--app-persona-role-size);
}

.app-menu-switch {
  color: var(--dvc-coral-ink);
  font-weight: 700;
}

.app-account-menu {
  min-inline-size: var(--app-account-menu-min);
}

.app-notif-menu {
  padding: 0;
  inline-size: var(--app-notif-width);
  max-inline-size: var(--dvc-dialog-max-inline-size);
  overflow: hidden;
}

.app-notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: var(--app-notif-head-pad-block);
  padding-inline: var(--app-notif-head-pad-inline);
  border-block-end: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

.app-notif-title {
  font-size: var(--app-notif-title-size);
  font-weight: 700;
}

.app-notif-mark {
  font-size: var(--app-notif-mark-size);
  color: var(--dvc-muted);
}

.app-notif-menu .app-row {
  padding-block: var(--app-notif-row-pad-block);
  padding-inline: var(--app-notif-row-pad-inline);
}

.app-notif-menu .app-row + .app-row {
  border-block-start: var(--dvc-border-width-hairline) solid var(--dvc-line);
}

/* ---------- shared row recipe ---------- */
.app-row {
  display: flex;
  align-items: center;
  gap: var(--app-row-gap);
}

.app-row-tile {
  display: grid;
  place-items: center;
  flex: none;
  inline-size: var(--app-row-tile-size);
  block-size: var(--app-row-tile-size);
  border-radius: var(--app-row-tile-radius);
  background: var(--dvc-sand);
  overflow: hidden;
}

.app-row-body {
  display: flex;
  flex-direction: column;
  gap: var(--app-row-body-gap);
  flex: 1;
  min-inline-size: 0;
}

.app-row-title {
  font-size: var(--app-row-title-size);
  line-height: 1.4;
}

.app-row-meta {
  font-size: var(--app-row-meta-size);
  color: var(--dvc-muted);
}

.app-row-trail {
  flex: none;
  margin-inline-start: auto;
}

/* ---------- hero ---------- */
.app-hero {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  text-align: center;
  min-block-size: var(--app-hero-min-block);
  padding: var(--app-hero-pad);
  color: var(--app-hero-fg);
}

.app-hero-media {
  position: absolute;
  inset: 0;
  border-radius: 0;
}

.app-hero-dim {
  position: absolute;
  inset: 0;
  background: var(--app-hero-dim);
}

.app-hero-content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dvc-space-4);
  max-inline-size: var(--app-hero-measure);
}

.app-hero-title {
  font-family: var(--dvc-font-display);
  letter-spacing: var(--dvc-display-spacing);
  font-weight: 500;
  font-size: var(--app-hero-title-size);
  line-height: 1.06;
}

/* ---------- ink panel ---------- */
.app-panel-ink {
  background: var(--dvc-ink);
  color: var(--app-panel-ink-fg);
  border-radius: var(--dvc-radius-lg);
  padding: var(--app-panel-pad);
}

.app-panel-ink .app-eyebrow,
.app-panel-ink .app-eyebrow-step {
  color: var(--app-panel-ink-eyebrow);
}

/* ---------- eyebrows ---------- */
.app-eyebrow,
.app-eyebrow-step {
  display: block;
  font-size: var(--dvc-eyebrow-size);
  font-weight: 700;
  letter-spacing: var(--dvc-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--dvc-color-action-ink);
}

.app-eyebrow-ocean {
  color: var(--dvc-ocean);
}

.app-eyebrow-muted {
  color: var(--dvc-faint);
}

* + .app-eyebrow-step {
  margin-block-start: var(--app-step-gap);
}

/* ---------- choice card ---------- */
.app-choice-card {
  display: block;
  position: relative;
  cursor: pointer;
  background: var(--dvc-surface);
  border: var(--dvc-border-width-hairline) solid var(--dvc-line-2);
  border-radius: var(--dvc-radius-md);
  padding: var(--app-choice-pad);
  transition: border-color var(--app-transition), box-shadow var(--app-transition);
}

.app-choice-card > input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.app-choice-card:has(input:checked) {
  border-color: var(--dvc-color-action);
  box-shadow: 0 0 0 var(--app-choice-ring) var(--dvc-coral-soft);
}

.app-choice-card:has(input:focus-visible) {
  outline: var(--dvc-space-1) solid var(--dvc-color-action);
  outline-offset: var(--dvc-focus-offset);
}

/* ---------- range ---------- */
.app-range {
  inline-size: 100%;
  accent-color: var(--dvc-color-action);
}

/* ---------- responsive grids ---------- */
.app-grid-2,
.app-grid-3,
.app-grid-4 {
  display: grid;
  gap: var(--app-grid-gap);
}

.app-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

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

.app-grid-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* ---------- content + sticky rail ---------- */
.app-side-layout {
  display: grid;
  grid-template-columns: 1fr var(--app-rail-size);
  gap: var(--app-side-gap);
  align-items: start;
}

.app-side-layout > :last-child {
  position: sticky;
  inset-block-start: var(--app-rail-top);
}

/* ---------- tone helpers ---------- */
.app-tone-coral {
  color: var(--dvc-coral);
}

.app-tone-ocean {
  color: var(--dvc-ocean);
}

.app-tone-green {
  color: var(--dvc-green);
}

.app-tone-muted {
  color: var(--dvc-muted);
}

/* ---------- error card ---------- */
.app-error-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--dvc-space-4);
  max-inline-size: var(--app-error-measure);
  margin-inline: auto;
  text-align: center;
}

.app-error-title {
  font-family: var(--dvc-font-display);
  letter-spacing: var(--dvc-display-spacing);
  font-size: var(--app-error-title-size);
  font-weight: 500;
}

.app-error-copy {
  color: var(--dvc-muted);
}

.app-error-meta {
  color: var(--dvc-faint);
  font-size: var(--app-row-meta-size);
}

/* ---------- responsive layer (1024 / 900 / 640 px in em) ---------- */
@media (max-width: 64em) {
  .app-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 56.25em) {
  .app-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }

  .app-side-layout {
    grid-template-columns: 1fr;
  }

  .app-side-layout > :last-child {
    position: static;
  }

  .app-topnav-links {
    display: none;
  }
}

@media (max-width: 40em) {
  .app-grid-2,
  .app-grid-3,
  .app-grid-4 {
    grid-template-columns: 1fr;
  }

  .app-page,
  .app-page-wide {
    padding-inline: var(--dvc-space-4);
  }

  .app-currency-trigger {
    display: none;
  }
}

/* ---------- honor reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: var(--app-motion-off) !important;
    transition-duration: var(--app-motion-off) !important;
  }
}