/* Property Outlook — PropertyView styles (Phase 4.x)
   Renders the four state variants of /property/:id for properties created
   via createAndReserve: pending / completed / failed / canceled. Mock
   fixture IDs (`__mock__`, `chelmsford`) bypass these styles entirely —
   they continue to render via outlook.css.

   Class prefix `.prop-*` namespaces all rules to avoid collisions with
   `.acard-*` (home dashboard list items) and the rich `.outlook-*` (Phase C
   fixture chrome). Layout token usage stays consistent with home.css and
   shell.css so visual rhythm holds across surfaces. */

@keyframes prop-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes prop-breathe {
  0%, 100% { opacity: 0.65; }
  50% { opacity: 1; }
}

.prop-page {
  background: var(--g50);
  min-height: calc(100vh - 64px);
  padding: 28px 24px 60px;
}
.prop-doc {
  max-width: 920px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ─────────────────────────────────────────────────────────────────────
   Loading + error shells (rare — mostly covered by reactive variants)
   ───────────────────────────────────────────────────────────────────── */
.prop-status-shell {
  max-width: 560px;
  margin: 60px auto 0;
  padding: 36px 28px;
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  text-align: center;
  color: var(--g600);
  font-size: 13px;
}
.prop-spin {
  width: 52px;
  height: 52px;
  margin: 0 auto 16px;
  display: grid;
  place-items: center;
  border-radius: var(--r-md);
  background: var(--g100);
  border: 1px solid var(--g200);
  color: var(--brand);
}
.prop-spin [data-lucide] {
  width: 20px;
  height: 20px;
  animation: prop-spin 1.6s linear infinite;
}

.prop-error {
  max-width: 560px;
  margin: 60px auto 0;
  padding: 32px;
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-sm);
  text-align: center;
}
.prop-error h2 {
  font: 700 20px var(--f);
  color: var(--g900);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.prop-error p {
  font-size: 13.5px;
  color: var(--g600);
  line-height: 1.55;
}
.prop-error a {
  color: var(--brand);
}

/* ─────────────────────────────────────────────────────────────────────
   Pending state — focused vertical card with spinner + status + actions.
   Different from the home dashboard's horizontal pending row because the
   /property/:id page is a single-property focus surface, not a list view.
   ───────────────────────────────────────────────────────────────────── */
.prop-pending-card {
  max-width: 560px;
  margin: 40px auto 0;
  padding: 36px 32px 32px;
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  text-align: center;
}
.prop-pending-spinner {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: var(--g100);
  border: 1px solid var(--g200);
  color: var(--brand);
}
.prop-pending-spinner [data-lucide] {
  width: 26px;
  height: 26px;
  animation: prop-spin 1.6s linear infinite;
}
.prop-pending-title {
  font: 700 19px var(--f);
  color: var(--g900);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.3;
}
/* "Taking longer than usual" — stuck-state copy, reused across surfaces */
.prop-pending-stuck {
  display: inline-block;
  padding: 6px 12px;
  margin-bottom: 10px;
  background: var(--warn-wash);
  color: #B45309;
  border-radius: var(--r-md);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
}
.prop-pending-status {
  font-size: 13px;
  color: var(--g600);
  line-height: 1.5;
  margin-bottom: 6px;
  animation: prop-breathe 2.4s ease-in-out infinite;
}
.prop-pending-meta {
  font: 500 11.5px var(--m);
  color: var(--g500);
  letter-spacing: 0.02em;
  margin-bottom: 24px;
}
.prop-pending-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.prop-pending-error {
  margin-top: 14px;
  font-size: 12px;
  color: var(--err);
}

/* ─────────────────────────────────────────────────────────────────────
   Failed / canceled view — same structural pattern, different palette.
   ───────────────────────────────────────────────────────────────────── */
.prop-failed-card {
  max-width: 560px;
  margin: 40px auto 0;
  padding: 36px 32px 32px;
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.04) 0%, transparent 60%);
  border: 1px solid rgba(239, 68, 68, 0.2);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-md);
  text-align: center;
}
.prop-failed-mark {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px;
  display: grid;
  place-items: center;
  border-radius: var(--r-lg);
  background: rgba(239, 68, 68, 0.08);
  border: 1px solid rgba(239, 68, 68, 0.25);
  color: var(--err);
}
.prop-failed-mark [data-lucide] {
  width: 26px;
  height: 26px;
}
.prop-failed-title {
  font: 700 19px var(--f);
  color: var(--g900);
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  line-height: 1.3;
}
.prop-failed-reason {
  font-size: 13px;
  color: #B91C1C;
  line-height: 1.5;
  margin-bottom: 8px;
}
.prop-failed-meta {
  font-size: 12px;
  color: var(--g500);
  margin-bottom: 24px;
  line-height: 1.5;
}
.prop-failed-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ─────────────────────────────────────────────────────────────────────
   Completed view — header (temp pill + address + meta), metric strip,
   blob sections, footer. Layout intentionally simpler than the
   Chelmsford-fixture Outlook (deferred).
   ───────────────────────────────────────────────────────────────────── */
.prop-header {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-xl);
  padding: 22px 24px;
  display: flex;
  align-items: center;
  gap: 18px;
  box-shadow: var(--sh-sm);
}
.prop-temp {
  width: 64px;
  height: 64px;
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  flex-shrink: 0;
  font-family: var(--m);
  font-weight: 700;
}
.prop-temp.hot {
  background: var(--temp-hot-wash);
  color: var(--temp-hot);
  border: 1px solid rgba(16, 185, 129, 0.22);
}
.prop-temp.warm {
  background: var(--temp-warm-wash);
  color: #059669;
  border: 1px solid rgba(52, 211, 153, 0.25);
}
.prop-temp.cool {
  background: var(--temp-cool-wash);
  color: #1D4ED8;
  border: 1px solid rgba(59, 130, 246, 0.2);
}
.prop-temp.cold {
  background: var(--temp-cold-wash);
  color: #B45309;
  border: 1px solid rgba(245, 158, 11, 0.25);
}
.prop-temp.frozen {
  background: var(--temp-frozen-wash);
  color: #B91C1C;
  border: 1px solid rgba(239, 68, 68, 0.25);
}
.prop-temp-v {
  font-size: 22px;
  line-height: 1;
}
.prop-temp-l {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
  margin-top: 3px;
}
.prop-header-body {
  flex: 1;
  min-width: 0;
}
.prop-header-addr {
  font: 700 19px var(--f);
  color: var(--g900);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 4px;
}
.prop-header-meta {
  font-size: 12.5px;
  color: var(--g500);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.prop-header-meta .sep {
  color: var(--g300);
}

.prop-metrics {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-xl);
  padding: 18px 24px;
  display: flex;
  gap: 36px;
  flex-wrap: wrap;
  box-shadow: var(--sh-sm);
}
.prop-metric {
  min-width: 100px;
}
.prop-metric-l {
  font: 700 9.5px var(--m);
  color: var(--g500);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}
.prop-metric-v {
  font-family: var(--m);
  font-weight: 700;
  font-size: 18px;
  color: var(--g900);
  line-height: 1;
}
.prop-metric-v.ok {
  color: var(--ok);
}
.prop-metric-v.warn {
  color: #B45309;
}
.prop-metric-v.err {
  color: var(--err);
}
.prop-metric-v.sm {
  font-size: 14px;
  font-weight: 600;
  color: var(--g700);
}
.prop-metric-v .u {
  font-family: var(--f);
  font-size: 12px;
  color: var(--g500);
  font-weight: 500;
  margin-left: 3px;
}

.prop-blob {
  background: var(--w);
  border: 1px solid var(--g200);
  border-radius: var(--r-xl);
  padding: 20px 24px 22px;
  box-shadow: var(--sh-sm);
}
.prop-blob-h {
  font: 700 14px var(--f);
  color: var(--g900);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prop-blob-h [data-lucide] {
  width: 16px;
  height: 16px;
  color: var(--brand);
}
.prop-blob-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 6px 24px;
}
.prop-blob-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px solid var(--g100);
  font-size: 12.5px;
  min-width: 0;
}
.prop-blob-row dt {
  font-family: var(--m);
  color: var(--g500);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  flex-shrink: 0;
  min-width: 100px;
}
.prop-blob-row dd {
  color: var(--g800);
  flex: 1;
  word-break: break-word;
  font-weight: 500;
}
.prop-blob-row dd em {
  color: var(--g400);
  font-style: italic;
  font-weight: 400;
}

.prop-blob-empty {
  background: var(--w);
  border: 1px dashed var(--g300);
  border-radius: var(--r-xl);
  padding: 28px;
  text-align: center;
  color: var(--g500);
  font-size: 13px;
  line-height: 1.55;
}

.prop-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 4px 0;
  flex-wrap: wrap;
}
.prop-footer-meta {
  font: 500 11px var(--m);
  color: var(--g400);
}
.prop-footer-meta code {
  font: 600 11px var(--m);
  color: var(--g600);
  background: var(--g100);
  padding: 1px 6px;
  border-radius: 3px;
}

@media (max-width: 760px) {
  .prop-page { padding: 18px 14px 40px; }
  .prop-header { flex-direction: column; align-items: flex-start; padding: 18px; }
  .prop-temp { width: 52px; height: 52px; }
  .prop-temp-v { font-size: 18px; }
  .prop-metrics { padding: 14px 18px; gap: 18px; }
  .prop-metric-v { font-size: 16px; }
  .prop-blob { padding: 16px 18px; }
  .prop-blob-list { grid-template-columns: 1fr; }
}