/* HOME — the My properties page: the organisation node, the manager branches, the property cards with their thick
   health bands (green / amber / red / grey, a soft sheen that stops when the reader prefers reduced motion), the
   Managers and Who-looks-after-what tables, and the sidebar's My properties button. Colours come from the status
   variables in styles.css; nothing new is introduced. */

/* ---------- sidebar button ---------- */
.side-home{margin:0 0 var(--space-4)}
.side-home .home-btn{
  display:flex;align-items:center;gap:10px;width:100%;text-align:left;cursor:pointer;
  padding:10px 12px;border-radius:var(--radius);
  background:linear-gradient(135deg,var(--navy),var(--navy-3));
  color:var(--white);border:1.5px solid color-mix(in srgb,var(--navy) 60%,#fff);
  font:inherit;font-weight:800;font-size:13px;letter-spacing:.01em;
  box-shadow:var(--shadow);
}
.side-home .home-btn:hover{filter:brightness(1.08)}
.side-home .home-btn svg{flex:none}
.side-home .home-btn small{display:block;font-weight:500;font-size:11px;opacity:.8}
body[data-tab="home"] .side-home .home-btn{outline:3px solid color-mix(in srgb,var(--g1) 55%,#fff);outline-offset:2px}

/* ---------- the organisation node ---------- */
.band-legend{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:var(--text-xs);color:var(--muted);margin:0 0 var(--space-4)}
.band-key{display:inline-flex;align-items:center;gap:7px}
.band-key::before{content:'';width:22px;height:10px;border-radius:5px;background:var(--faint)}
.band-key.green::before{background:var(--green)}
.band-key.amber::before{background:var(--amber-dot)}
.band-key.red::before{background:var(--red)}
.home-tree{display:flex;flex-direction:column;align-items:stretch}
.org-node{
  align-self:center;min-width:420px;max-width:720px;text-align:center;
  background:linear-gradient(160deg,var(--white),color-mix(in srgb,var(--g1) 8%,#fff));
  border:2px solid var(--line);border-radius:var(--radius-lg);padding:var(--space-5) var(--space-6);box-shadow:var(--shadow);
}
.org-kind{font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.org-node h2{margin:4px 0 6px;font-size:var(--text-xl);font-weight:900;color:var(--navy)}
.org-counts{margin:0 0 10px;color:var(--muted);font-size:var(--text-sm)}
.org-tally{display:flex;justify-content:center;flex-wrap:wrap;gap:6px}
.tree-trunk{width:3px;height:28px;margin:0 auto;background:var(--line)}
.tree-branches{
  display:grid;gap:var(--space-4);position:relative;padding-top:var(--space-4);
  border-top:3px solid var(--line);
}

/* ---------- a manager's branch ---------- */
.mgr-branch{
  border:2px solid var(--line);border-radius:var(--radius-lg);background:var(--surface);
  box-shadow:var(--shadow);overflow:hidden;
}
.mgr-branch.unassigned{border-style:dashed}
.mgr-head{
  display:flex;align-items:center;gap:var(--space-4);padding:var(--space-4) var(--space-5);
  background:linear-gradient(160deg,var(--white),color-mix(in srgb,var(--g1) 5%,#fff));
  border-left:8px solid var(--faint);
}
.mgr-head.green{border-left-color:var(--green)}
.mgr-head.amber{border-left-color:var(--amber-dot)}
.mgr-head.red{border-left-color:var(--red)}
.mgr-head > div:first-child{flex:1;min-width:0}
.mgr-k{font-size:var(--text-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.mgr-head h3{margin:2px 0;font-size:var(--text-lg);font-weight:900;color:var(--navy)}
.mgr-meta{font-size:var(--text-xs);color:var(--muted)}
.mgr-dots{display:flex;gap:5px;flex-wrap:wrap;max-width:220px;justify-content:flex-end}
.mgr-dots .dot,.band-dot{
  display:inline-block;width:14px;height:14px;border-radius:50%;background:var(--faint);
  border:2px solid #fff;box-shadow:0 0 0 1px var(--line);
}
.dot.green,.band-dot.green{background:var(--green)}
.dot.amber,.band-dot.amber{background:var(--amber-dot)}
.dot.red,.band-dot.red{background:var(--red)}
.band-dot{width:10px;height:10px;margin-right:8px;vertical-align:middle}
.mgr-branch .prop-grid{padding:var(--space-4) var(--space-5) var(--space-5);border-top:1px solid var(--line)}

/* ---------- property cards ---------- */
.prop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:var(--space-4)}
.home-tree > .prop-grid{margin-top:var(--space-4)}
.prop{
  border-radius:var(--radius-lg);background:var(--white);overflow:hidden;min-width:0;
  border:3px solid var(--faint);box-shadow:var(--shadow);display:flex;flex-direction:column;
}
.prop.green{border-color:var(--green)}
.prop.amber{border-color:var(--amber-dot)}
.prop.red{border-color:var(--red)}
.prop-band{
  position:relative;padding:12px 16px 12px 18px;color:var(--white);
  background:var(--faint);display:flex;flex-direction:column;gap:6px;
}
.prop.green .prop-band{background:linear-gradient(120deg,var(--green),color-mix(in srgb,var(--green) 70%,#fff))}
.prop.amber .prop-band{background:linear-gradient(120deg,var(--amber-dot),color-mix(in srgb,var(--amber-dot) 70%,#fff))}
.prop.red .prop-band{background:linear-gradient(120deg,var(--red),color-mix(in srgb,var(--red) 70%,#fff))}
.prop.grey .prop-band{background:linear-gradient(120deg,var(--faint),color-mix(in srgb,var(--faint) 70%,#fff))}
.prop-band::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.28) 50%,transparent 65%);
  background-size:260% 100%;animation:band-sheen 5.5s ease-in-out infinite;
}
@keyframes band-sheen{0%{background-position:130% 0}60%,100%{background-position:-130% 0}}
@media (prefers-reduced-motion:reduce){.prop-band::after{animation:none;display:none}}
.prop-word{font-size:var(--text-xs);font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.95}
.prop-name{margin:0;font-size:var(--text-base);font-weight:900;line-height:1.25;color:var(--white)}
.prop-band .chip{align-self:flex-start;background:rgba(255,255,255,.92);border-color:transparent}
.prop-body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.prop-meta{font-size:var(--text-xs);color:var(--muted);display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.prop-flags{display:inline-flex;gap:4px}
.prop-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 14px}
.prop-kpis div{display:flex;flex-direction:column}
.prop-kpis b{font-size:var(--text-base);font-weight:900;color:var(--navy);font-variant-numeric:tabular-nums}
.prop-kpis b.neg{color:var(--red)}
.prop-kpis b.pos{color:var(--green)}
.prop-kpis span{font-size:var(--text-xs);color:var(--muted)}
.prop-issues{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:var(--text-sm)}
.prop-issues li{display:flex;gap:8px;align-items:flex-start}
.prop-issues .chip{flex:none}
.prop-note{margin:0;font-size:var(--text-sm);color:var(--muted)}
.prop-actions{display:flex;gap:8px;margin-top:auto;padding-top:var(--space-2)}
.home-asof{margin-top:var(--space-4)}

/* ---------- tables and the invite form ---------- */
.home-tbl{width:100%;border-collapse:collapse;font-size:var(--text-sm)}
.home-tbl th{
  text-align:left;font-size:var(--text-xs);text-transform:uppercase;letter-spacing:.06em;color:var(--faint);
  padding:10px 12px;border-bottom:2px solid var(--line);
}
.home-tbl td{padding:12px;border-bottom:1px solid var(--line);vertical-align:middle}
.home-tbl tr:nth-child(even) td{background:var(--surface-2)}
.home-tbl td.r,.home-tbl th.r{text-align:right}
.home-tbl select{min-width:200px}
.home-form{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3) var(--space-4);margin-top:var(--space-4)}
.home-form label{display:flex;flex-direction:column;gap:4px;font-size:var(--text-xs);font-weight:700;color:var(--muted)}
.home-form input{
  font:inherit;font-size:var(--text-sm);padding:9px 10px;border:1.5px solid var(--line);border-radius:8px;background:var(--white);
}
.home-form-actions{grid-column:1 / -1;display:flex;align-items:center;gap:var(--space-4)}
.btn-sm.danger,.btn.danger{border-color:var(--red);color:var(--red);background:var(--red-bg)}