/* PropAI Dashboard — the entry screen of the light workspace.
   Inherits the .pai colour variables; only what is unique to this screen
   lives here. */

.pdash .pside--grouped { padding-top: 20px; }

.pdash__mark {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  color: var(--gold);
}
.pdash__mark .icon { width: 30px; }

.pdash__word {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.pdash__word b { color: var(--gold); font-weight: 700; }

/* Topbar carries only the account cluster — no breadcrumb on this screen. */
.ptop--right { justify-content: flex-end; }
.pdash__back {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 14px 0 11px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--paper);
  color: var(--ink-2); font-size: 13px; font-weight: 500; text-decoration: none;
  transition: border-color 160ms var(--ease), color 160ms var(--ease), background-color 160ms var(--ease);
}
.pdash__back:hover { border-color: var(--gold); color: var(--gold); background: var(--gold-wash); }
.pdash__back .icon { width: 15px; }
.pav--plain { border: none; }
.pdash__av {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gold-wash);
  border: 1px solid var(--gold);
  font-size: 11.5px;
  font-weight: 600;
  color: var(--gold);
}

.pdash__main { padding-bottom: 50px; }

/* ---- Hero ---------------------------------------------------------------- */

/* Taller than the original band. The footage came back 4:3, not 16:9
   (Kling matched the source still's ratio), so the panel below is sized
   against 1.33 — otherwise `cover` throws away a third of the frame and
   magnifies what remains. */
.dhero {
  position: relative;
  display: flex;
  align-items: center;
  /* The band is locked to the plate's own 33:14 ratio, so `cover` has
     nothing to crop — hills, roofline and grass are all in frame at once.
     Matching the ratio is what avoids edges: `contain` would show the whole
     picture too, but would leave white bars at the sides. min-height is only
     a floor for very narrow viewports, where a small crop returns. */
  aspect-ratio: 33 / 14;
  min-height: 300px;
  margin: 8px 30px 0;
  border-radius: 16px;
  overflow: hidden;
  background: var(--paper-2);
}

/* Full-bleed. The plate is 21:9 against a ~2.95 band, so the crop is small
   and comes off sky and grass rather than the building. No mask and no
   overlay: the picture's own left half is already near-white mist, which is
   why there is nothing to feather and no seam to hide. */
.dhero__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Feathers the footage into the page so the copy sits on clean paper
   rather than on a hard edge. */
/* The white overlay that used to sit here is gone. Feathering is now done
   by the mask on .dhero__video, which cannot leave a seam the way an
   overlay does. */

.dhero__copy { position: relative; z-index: 1; padding: 40px 44px; max-width: 560px; }
.dhero__welcome { margin: 0; font-size: 27px; font-weight: 600; color: var(--ink); }
.dhero__title {
  margin: 2px 0 0;
  font-size: 42px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.dhero__title em { font-style: normal; color: var(--gold); }
.dhero__lede { margin: 16px 0 0; font-size: 17px; font-weight: 500; color: var(--ink); }
.dhero__sub { margin: 11px 0 0; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }

.pgen--hero { display: inline-flex; margin-top: 22px; padding: 0 26px; height: 50px; }
.pgen--hero .icon { width: 16px; }

/* ---- Sections -------------------------------------------------------------- */

.dsec { margin: 30px 30px 0; }
.dsec__head { display: flex; align-items: baseline; justify-content: space-between; }
.dsec__t { margin: 0; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.dsec__s { margin: 7px 0 0; font-size: 13.5px; color: var(--ink-2); }
.dsec__link { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--ink-2); text-decoration: none; }
.dsec__link:hover { color: var(--ink); }
.dsec__link .icon { width: 13px; }

/* AI Studio cards */

.dstudio { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 15px; margin-top: 16px; }

.dcard {
  position: relative;
  display: block;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  text-decoration: none;
  transition: transform 180ms var(--ease), border-color 180ms var(--ease), box-shadow 180ms var(--ease);
}
.dcard:hover {
  transform: translateY(-3px);
  border-color: rgba(217, 164, 65, 0.45);
  box-shadow: 0 16px 34px -18px rgba(23, 24, 26, 0.26);
}

.dcard__i {
  display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 11px; background: var(--gold-wash); color: var(--gold);
}
.dcard__t { display: block; margin-top: 14px; font-size: 15.5px; font-weight: 600; color: var(--ink); }
.dcard__s { display: block; margin-top: 8px; font-size: 12.5px; font-style: normal; line-height: 1.55; color: var(--ink-2); min-height: 39px; }
.dcard__go {
  position: absolute; right: 18px; bottom: 92px;
  color: var(--gold);
}
.dcard__go .icon { width: 15px; }
.dcard:hover .dcard__go { transform: translateX(3px); }

.dcard__shot {
  display: grid;
  place-items: center;
  /* 16:9 to match the stills (owner frame-fit sweep, 2026-07-25) — the
     fixed 76px strip was a 3.6:1 slit that cover-cropped half the picture.
     car2 has a dedicated 16:9 crop (car2-wide.jpg) so the row stays even. */
  aspect-ratio: 16 / 9;
  margin-top: 12px;
  border-radius: 9px;
  overflow: hidden;
}
.dcard__shot .icon { width: 20px; color: var(--ink-3); }

/* Real stills. The gradient stays as a second layer so a tile never falls
   back to bare white if an image is slow or missing. */
.dsh--land,
.dsh--interior,
.dsh--hosts,
.dsh--report,
.dsh--villa,
.dsh--beach,
.dsh--penthouse,
.dsh--canvas,
.dsh--showroom {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.dsh--land { background-image: url('/ds-land.jpg'), linear-gradient(160deg, #9fc98a, #4b7d55); }
.dsh--interior { background-image: url('/ds-interior.jpg'), linear-gradient(160deg, #e6d7c4, #8e7458); }
.dsh--hosts { background-image: url('/ds-hosts.jpg'), linear-gradient(160deg, #a8b6c6, #4d5a6b); }
.dsh--report { background-image: url('/ds-report.jpg'), linear-gradient(160deg, #eef1f4, #d5dbe2); }
.dsh--villa { background-image: url('/ds-villa.jpg'), linear-gradient(160deg, #c9955f, #2f2519); }
.dsh--beach { background-image: url('/ds-beach.jpg'), linear-gradient(160deg, #a9cfe0, #4d6f8c); }
.dsh--penthouse { background-image: url('/ds-penthouse.jpg'), linear-gradient(160deg, #dcc9ae, #5d4a37); }
.dsh--showroom { background-image: url('/ds-showroom.jpg'), linear-gradient(160deg, #b9c6d2, #47566a); }

/* Host Studio is a portrait — bias the crop upward so faces are not
   sliced by a short tile. */
.dsh--hosts { background-position: center 22%; }

/* Open Canvas — the car-dealer example, since it is the clearest "one image
   in, a finished ad out" result the tool produces. car2-wide.jpg is a 16:9
   centre crop of car2.jpg (generated 2026-07-25, System.Drawing) so this
   tile fits its frame exactly like the other four; the 3:2 original is
   still used by the Open Canvas page's own 3:2 example frames. */
.dsh--canvas { background-image: url('/prop%20ai/car2-wide.jpg'), linear-gradient(160deg, #b9c6d2, #47566a); }

.dsh--empty { background: var(--paper-2); border: 1px dashed #dcdddf; }

/* Featured creations */

.dfeat { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 15px; margin-top: 16px; }
/* Display only, like the dark app's Client Projects — no link, and no
   hover lift that would imply one. */
.dfcard { display: block; }
.dfcard__shot {
  position: relative;
  display: grid;
  place-items: center;
  /* 16:9 like all four ds-* stills — 128px fixed was a 3:1 letterbox. */
  aspect-ratio: 16 / 9;
  border-radius: 11px;
  overflow: hidden;
}
.dfcard__shot .pplay { width: 40px; height: 40px; }
.dfcard__shot .pplay .icon { width: 14px; }
.dfcard__row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 11px; }
.dfcard__row b { font-size: 14px; font-weight: 500; color: var(--ink); }
.dfcard__row i { font-size: 12.5px; font-style: normal; color: var(--ink-3); }

/* Empty state */

.dempty {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper-2);
}
.dempty__i {
  display: grid; place-items: center; width: 46px; height: 46px; flex-shrink: 0;
  border-radius: 11px; background: var(--paper); border: 1px solid var(--line); color: var(--ink-3);
}
.dempty__x { display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.dempty__x b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.dempty__x i { font-size: 13px; font-style: normal; color: var(--ink-2); }
.dempty__cta { margin: 0; flex-shrink: 0; padding: 0 22px; }