/* =========================================================
   KZ2 C6 — house.html: the places tree as the spatial view
   of the property. Self-contained, uses shared/kz2-shell.css
   tokens for colors/spacing/type.
   ========================================================= */

.kz2-house { font-family: var(--kz2-font-sans, sans-serif); max-width: 1200px; margin: 0 auto; }

/* ── Breadcrumbs ───────────────────────────────────────── */

.kz2-house-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  margin-bottom: var(--kz2-space-4, 16px);
  font-size: var(--kz2-font-sm, 0.72rem);
}
.kz2-house-crumb {
  background: none; border: none; cursor: pointer; padding: 4px 2px;
  color: var(--kz2-muted, #686f64); font-family: inherit; font-size: inherit;
  text-decoration: underline;
}
.kz2-house-crumb:last-child { color: var(--kz2-text, #1d2520); font-weight: 600; text-decoration: none; cursor: default; }
.kz2-house-crumb-sep { color: var(--kz2-border, #d8d5cf); }

/* ── Cards grid (root + child places) ──────────────────── */

.kz2-house-cards {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: var(--kz2-space-3, 12px); margin-bottom: var(--kz2-space-5, 24px);
}
.kz2-house-card {
  background: #fff; border: 1px solid var(--kz2-border, #d8d5cf); border-radius: var(--kz2-radius-md, 8px);
  overflow: hidden; cursor: pointer; text-align: left; display: flex; flex-direction: column;
  font-family: inherit; padding: 0;
}
.kz2-house-card:hover { border-color: var(--kz2-clay, #c96a2a); }
.kz2-house-card-photo {
  width: 100%; aspect-ratio: 4/3; background: var(--kz2-warm-gray, #f0ede7);
  display: flex; align-items: center; justify-content: center; font-size: 2rem;
  color: var(--kz2-border, #d8d5cf); overflow: hidden;
}
.kz2-house-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.kz2-house-card-body { padding: var(--kz2-space-2, 8px) var(--kz2-space-3, 12px); }
.kz2-house-card-name { font-weight: 600; font-size: var(--kz2-font-base, 0.88rem); }
.kz2-house-card-meta { font-size: var(--kz2-font-sm, 0.72rem); color: var(--kz2-muted, #686f64); margin-top: 2px; }

/* ── Place detail ──────────────────────────────────────── */

.kz2-house-hero {
  width: 100%; max-height: 280px; border-radius: var(--kz2-radius-md, 8px);
  overflow: hidden; margin-bottom: var(--kz2-space-4, 16px); background: var(--kz2-warm-gray, #f0ede7);
}
.kz2-house-hero img { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.kz2-house-hero-empty {
  height: 140px; display: flex; align-items: center; justify-content: center;
  color: var(--kz2-muted, #686f64); font-size: var(--kz2-font-sm, 0.72rem);
}
.kz2-house-hero-upload { display: none; }
/* KZ2 F5: photo upload progress, indeterminate -- same pattern as
   kz2-capture.js's, quiet continuous sweep */
.kz2-house-photo-uploading { height: 140px; display: flex; align-items: center; padding: 0 16px; }
.kz2-house-photo-uploading-bar-track { }
.kz2-house-photo-uploading > .kz2-house-photo-uploading-bar {
  width: 100%; height: 3px; background: var(--kz2-border, #d8d5cf); border-radius: 2px; overflow: hidden; position: relative;
}
.kz2-house-photo-uploading > .kz2-house-photo-uploading-bar::after {
  content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: var(--kz2-clay, #c96a2a); animation: kz2-house-progress-sweep 1.2s ease-in-out infinite;
}
@keyframes kz2-house-progress-sweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}
@media (prefers-reduced-motion: reduce) {
  .kz2-house-photo-uploading > .kz2-house-photo-uploading-bar::after { animation: none; width: 100%; }
}

.kz2-house-header-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-bottom: var(--kz2-space-2, 8px);
}
.kz2-house-title { font-size: 1.3rem; font-weight: 700; }
.kz2-house-kind-badge {
  font-size: var(--kz2-font-sm, 0.72rem); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--kz2-muted, #686f64); background: var(--kz2-warm-gray, #f0ede7);
  padding: 2px 8px; border-radius: var(--kz2-radius-pill, 999px);
}

.kz2-house-section { margin-bottom: var(--kz2-space-5, 24px); }
.kz2-house-section h2 {
  font-size: var(--kz2-font-base, 0.88rem); text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--kz2-muted, #686f64); margin-bottom: var(--kz2-space-2, 8px); font-weight: 700;
}
.kz2-house-empty { font-size: var(--kz2-font-sm, 0.72rem); color: var(--kz2-muted, #686f64); font-style: italic; }
/* KZ2 F5: empty states get one real action, not just a sentence */
.kz2-house-empty-action {
  display: block; margin-top: 6px; background: none; border: none; padding: 0;
  font-family: inherit; font-size: inherit; font-style: normal; font-weight: 600;
  color: var(--kz2-clay-dark, #a85620); cursor: pointer; text-decoration: underline;
}

/* ── Editable fields — one interaction model everywhere ── */

.kz2-house-field {
  cursor: pointer; border-bottom: 1px dashed transparent;
}
.kz2-house-field:hover { border-bottom-color: var(--kz2-border, #d8d5cf); }
.kz2-house-field-input {
  font-family: inherit; padding: 2px 4px;
  border: 1px solid var(--kz2-clay, #c96a2a); border-radius: 3px; background: #fff;
  font-size: 1rem; /* KZ2 F6: was `inherit`, often under 16px in context -- under 16px triggers iOS zoom-on-focus */
}

/* ── Row lists (things / schedules / vendors / projects) ─ */

.kz2-house-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 10px 0; border-bottom: 1px solid var(--kz2-border, #d8d5cf);
  font-size: var(--kz2-font-base, 0.88rem);
}
.kz2-house-row:last-child { border-bottom: none; }
.kz2-house-row-main { flex: 1 1 160px; min-width: 0; }
.kz2-house-row-meta { font-size: var(--kz2-font-sm, 0.72rem); color: var(--kz2-muted, #686f64); }
.kz2-house-row-toggle {
  background: none; border: none; cursor: pointer; color: var(--kz2-muted, #686f64); font-size: 1rem;
}

.kz2-house-thing-row {
  width: 100%; display: flex; align-items: center; gap: 8px; text-align: left;
  background: none; border: none; padding: 10px 0; border-bottom: 1px solid var(--kz2-border, #d8d5cf);
  font-family: inherit; font-size: var(--kz2-font-base, 0.88rem); cursor: pointer;
}
.kz2-house-thing-row:last-child { border-bottom: none; }
.kz2-house-thing-row:hover { background: var(--kz2-warm-gray, #f0ede7); }
.kz2-house-thing-row-name { flex: 1 1 160px; min-width: 0; font-weight: 600; }
.kz2-house-thing-row-meta { font-size: var(--kz2-font-sm, 0.72rem); color: var(--kz2-muted, #686f64); }

.kz2-house-thing-detail label {
  display: block; font-size: var(--kz2-font-sm, 0.72rem); font-weight: 600;
  color: var(--kz2-muted, #686f64); text-transform: uppercase; letter-spacing: 0.03em;
}
.kz2-house-thing-detail input, .kz2-house-thing-detail select, .kz2-house-thing-detail textarea {
  display: block; width: 100%; margin-top: 2px; padding: 6px 8px; font-family: inherit;
  font-size: var(--kz2-font-base, 0.88rem); border: 1px solid var(--kz2-border, #d8d5cf); border-radius: 3px;
}

/* ── Thing detail drawer — KZ2 E2. A non-blocking side panel, same
   spirit as the old inventory.html modal-panel ("nothing behind it is
   disabled") but consistent about it: no aria-modal, no focus trap, no
   background dim. The overlay wrapper is pointer-events:none so clicks
   reach the page behind it; only the panel itself is interactive. ── */

.kz2-thing-drawer-overlay {
  position: fixed; top: 0; right: 0; bottom: 0; width: 480px; max-width: 100%; z-index: 300;
  pointer-events: none; display: flex; align-items: stretch; justify-content: flex-end;
}
.kz2-thing-drawer {
  pointer-events: auto; background: #fff; width: 100%; height: 100%; overflow-y: auto;
  box-shadow: -4px 0 24px rgba(0,0,0,0.14); padding: var(--kz2-space-4, 16px) var(--kz2-space-4, 16px) var(--kz2-space-6, 32px);
  position: relative;
  /* KZ2 F5: freshly created + appended each time (openThingDrawer builds a
     new overlay unless reusing one for prev/next), so this animation
     retriggers correctly without the reflow-restart trick the always-in-
     DOM inventory-legacy.html panel needed. Exit is still timed in JS
     (closeThingDrawer sets this same transform before removing the
     element, since removal can't be delayed by CSS alone). */
  animation: kz2-thing-drawer-in 0.18s ease-out;
  /* KZ2 F6: read by closeThingDrawer() so exit slides the same
     direction as entry -- right on desktop, bottom on mobile. */
  --kz2-drawer-exit: translateX(100%);
}
@keyframes kz2-thing-drawer-in {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .kz2-thing-drawer { animation: none; }
}
@media (max-width: 640px) {
  .kz2-thing-drawer-overlay { width: 100%; align-items: flex-end; }
  /* KZ2 F6: sheets slide from the bottom on mobile, not drawers from
     the right -- matches the same fix in inventory-legacy.html. */
  .kz2-thing-drawer {
    height: auto; max-height: 88vh; border-radius: 12px 12px 0 0;
    animation-name: kz2-thing-drawer-in-mobile;
    --kz2-drawer-exit: translateY(100%);
  }
}
@keyframes kz2-thing-drawer-in-mobile {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.kz2-thing-drawer-close {
  position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.5rem;
  color: var(--kz2-muted, #686f64); cursor: pointer; line-height: 1; padding: 6px;
}
.kz2-thing-drawer-photo {
  width: 100%; height: 160px; border-radius: var(--kz2-radius-md, 8px); overflow: hidden;
  background: var(--kz2-warm-gray, #f0ede7); margin-bottom: var(--kz2-space-3, 12px);
  display: flex; align-items: center; justify-content: center; color: var(--kz2-border, #d8d5cf); font-size: 2rem;
}
.kz2-thing-drawer-photo img { width: 100%; height: 100%; object-fit: cover; }
.kz2-thing-drawer-name { font-size: 1.2rem; font-weight: 700; display: block; }
.kz2-thing-drawer-path { font-size: var(--kz2-font-sm, 0.72rem); color: var(--kz2-muted, #686f64); margin: 2px 0 8px; }
.kz2-thing-drawer-path a { color: inherit; }
.kz2-thing-drawer-status-row { display: flex; align-items: center; gap: 8px; margin-bottom: var(--kz2-space-3, 12px); flex-wrap: wrap; }

.kz2-thing-drawer-primary {
  display: block; width: 100%; padding: 11px 16px; background: var(--kz2-clay-dark, #a85620); color: #fff; /* KZ2 F3: plain --kz2-clay was 3.76:1 */
  border: none; border-radius: var(--kz2-radius-sm, 3px); font-family: inherit; font-size: var(--kz2-font-base, 0.88rem);
  font-weight: 600; cursor: pointer; margin-bottom: var(--kz2-space-4, 16px);
}
.kz2-thing-drawer-primary:hover { background: var(--kz2-clay, #c96a2a); }

.kz2-thing-drawer-next-due { font-size: var(--kz2-font-sm, 0.72rem); color: var(--kz2-muted, #686f64); margin-bottom: var(--kz2-space-4, 16px); }
.kz2-thing-drawer-next-due strong { color: var(--kz2-text, #1d2520); }

.kz2-thing-timeline { margin-bottom: var(--kz2-space-4, 16px); }
.kz2-thing-timeline-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--kz2-border, #d8d5cf); font-size: var(--kz2-font-sm, 0.72rem); }
.kz2-thing-timeline-item:last-child { border-bottom: none; }
.kz2-thing-timeline-date { flex-shrink: 0; width: 78px; color: var(--kz2-muted, #686f64); }
.kz2-thing-timeline-body strong { font-size: var(--kz2-font-base, 0.88rem); color: var(--kz2-text, #1d2520); font-weight: 600; }

.kz2-thing-drawer-specs { margin-bottom: var(--kz2-space-4, 16px); }
.kz2-thing-drawer-specs summary { cursor: pointer; font-weight: 700; font-size: var(--kz2-font-base, 0.88rem); padding: 4px 0; }
.kz2-thing-drawer-specs-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-top: 8px; }

.kz2-thing-drawer-insurance-toggle {
  background: none; border: none; color: var(--kz2-clay-dark, #a85620); font-family: inherit; /* KZ2 F3: plain --kz2-clay text on light bg was ~3.5:1 */
  font-size: var(--kz2-font-sm, 0.72rem); font-weight: 600; cursor: pointer; padding: 4px 0; margin-bottom: var(--kz2-space-3, 12px);
}

.kz2-thing-drawer-nav { display: flex; justify-content: space-between; margin-top: var(--kz2-space-5, 24px); border-top: 1px solid var(--kz2-border, #d8d5cf); padding-top: var(--kz2-space-3, 12px); }
.kz2-thing-drawer-nav button:disabled { opacity: 0.4; cursor: not-allowed; }

.kz2-house-badge {
  font-size: var(--kz2-font-sm, 0.72rem); font-weight: 700; padding: 2px 8px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: 0.03em;
}
/* KZ2 F3: kept in sync with style.css's --success-fg/--warning-fg fix -- 4.42/3.77:1 failed on their own bg */
.kz2-house-badge-healthy { background: #e3f3e6; color: #2d793d; }
.kz2-house-badge-attention_needed { background: #fff2d9; color: #946309; }
.kz2-house-badge-overdue { background: #fbe0dd; color: #b13a2a; }
.kz2-house-badge-never_verified { background: #fbe0dd; color: #b13a2a; }
.kz2-house-badge-verified_recently { background: #e3f3e6; color: #2d793d; }
.kz2-house-badge-verified_long_ago { background: #fff2d9; color: #946309; }

.kz2-house-btn {
  padding: 8px 14px; border: 1px solid var(--kz2-border, #d8d5cf); border-radius: var(--kz2-radius-sm, 3px);
  background: #fff; font-family: inherit; font-size: var(--kz2-font-base, 0.88rem); cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.kz2-house-btn:hover { background: var(--kz2-warm-gray, #f0ede7); border-color: var(--kz2-muted, #686f64); }
.kz2-house-btn:active { background: var(--kz2-border, #d8d5cf); transform: translateY(1px); }
.kz2-house-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.kz2-house-btn-primary { background: var(--kz2-clay-dark, #a85620); color: #fff; border-color: var(--kz2-clay-dark, #a85620); } /* KZ2 F3: plain --kz2-clay was 3.76:1 */
.kz2-house-btn-primary:hover { background: var(--kz2-clay, #c96a2a); border-color: var(--kz2-clay, #c96a2a); }
.kz2-house-btn-primary:active { background: #8a4419; border-color: #8a4419; }
.kz2-house-add-row { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.kz2-house-add-row input, .kz2-house-add-row select {
  padding: 6px 8px; font-family: inherit; font-size: var(--kz2-font-base, 0.88rem);
  border: 1px solid var(--kz2-border, #d8d5cf); border-radius: 3px;
}
.kz2-house-status { font-size: var(--kz2-font-sm, 0.72rem); color: var(--kz2-muted, #686f64); min-height: 16px; margin-top: 4px; }

.kz2-house-shutoff-gallery { display: flex; gap: 8px; flex-wrap: wrap; }
.kz2-house-shutoff-gallery img, .kz2-house-shutoff-thumb {
  display: block; width: 80px; height: 80px; object-fit: cover; border-radius: 4px;
  background: var(--kz2-warm-gray, #f0ede7);
}

.kz2-house-finish-row { font-size: var(--kz2-font-sm, 0.72rem); color: var(--kz2-text, #1d2520); margin-bottom: 4px; }
.kz2-house-finish-row b { text-transform: capitalize; }