/* Community shares the same rooftop banner and pale workspace frame. */
body[data-planner-view="community"] { --rooftop-frame: #e8eef8; }
body[data-planner-view="community"],
body[data-planner-view="community"] .main { min-height: 100vh; background: #e8eef8; color: #243454; color-scheme: light; }
body[data-planner-view="community"] .main { max-width: none; margin: 0; padding: 0 0 56px; }
body[data-planner-view="community"] .rooftop-banner { height: clamp(230px,22vw,315px); margin: 0; }
body[data-planner-view="community"] .banner-copy { left: max(5vw, calc((100vw - 1300px) / 2)); }
body[data-planner-view="community"] .banner-roof-link { right: max(5vw, calc((100vw - 1300px) / 2)); text-decoration: none; }
body[data-planner-view="community"] .dashboard-content { margin-bottom: 0; }
.community-heading { margin-bottom: 17px; }
.community-button { display: inline-grid; place-items: center; min-height: 34px; padding: 0 15px; border: 0; border-radius: 7px; background: #3b4dc7; color: #fff; font-size: 11px; font-weight: 650; text-decoration: none; white-space: nowrap; }
.community-button:hover { background: #2d3eae; color: #fff; }
.community-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 11px; margin-bottom: 11px; }
.community-summary-card,
.community-panel { border: 1px solid #d6deec; border-radius: 9px; background: #fff; box-shadow: 0 5px 15px #6880ad12; }
.community-summary-card { min-height: 116px; padding: 16px 17px; }
.community-summary-card span { display: block; color: #566889; font-size: 11px; }
.community-summary-card strong { display: block; margin-top: 8px; color: #26395b; font-size: 20px; font-weight: 650; }
.community-summary-card p { margin: 7px 0 0; color: #8090aa; font-size: 10px; line-height: 1.45; }
.community-statusbar { display: flex; align-items: center; gap: 10px; min-height: 43px; margin-bottom: 12px; padding: 5px 11px; border: 1px solid #d8e0ed; border-radius: 8px; background: #fff; }
.community-statusbar > span:nth-child(2) { display: grid; gap: 2px; }
.community-statusbar strong { color: #2e3c5b; font-size: 10px; }
.community-statusbar small,
.community-status { color: #7d8ca5; font-size: 9px; }
.community-status { margin-left: auto; white-space: nowrap; }
.community-grid { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(250px,.75fr); gap: 12px; }
.community-panel { min-height: 340px; padding: 19px; }
.community-panel .eyebrow { color: #5266b5; }
.community-panel h2 { margin: 7px 0 9px; color: #29395b; font-size: 19px; font-weight: 630; }
.community-panel > p:not(.eyebrow) { max-width: 620px; color: #657692; font-size: 12px; line-height: 1.7; }
.community-mini-roof { position: relative; height: 170px; margin: 18px 0 13px; overflow: hidden; border-radius: 8px; background: linear-gradient(#849393,#c3bdab 66%,#4e6254 67%,#354239); }
.community-mini-roof .mini-sky,
.community-mini-roof .mini-city,
.community-mini-roof .mini-floor,
.community-mini-roof .mini-person,
.community-mini-roof .mini-fire,
.community-mini-roof .mini-plant { position: absolute; }
.community-mini-roof .mini-sky { inset: 0 0 42%; background: radial-gradient(ellipse at 68% 27%,#f0d7aa 0 5%,transparent 24%); }
.community-mini-roof .mini-city { inset: 17% 0 28%; display: flex; justify-content: space-around; align-items: end; opacity: .7; }
.community-mini-roof .mini-city i { width: 9%; height: 70%; background: #627679; }
.community-mini-roof .mini-city i:nth-child(2) { height: 95%; width: 12%; }
.community-mini-roof .mini-floor { left: 7%; right: 4%; bottom: -24%; height: 70%; transform: perspective(110px) rotateX(13deg); background: linear-gradient(130deg,#74806a,#3f5046); clip-path: polygon(10% 0,88% 0,100% 100%,0 100%); }
.community-mini-roof .mini-person { left: 48%; bottom: 23%; width: 12px; height: 27px; border-radius: 8px 8px 2px 2px; background: #304048; box-shadow: 0 -8px 0 -1px #bb8a68; }
.community-mini-roof .mini-fire { left: 56%; bottom: 25%; width: 17px; height: 17px; border-radius: 50%; background: #f78b3e; box-shadow: 0 0 13px #ffa04c; }
.community-mini-roof .mini-plant { left: 20%; bottom: 17%; color: #a6ba7b; font-size: 20px; }
.community-note { display: flex; flex-direction: column; }
.community-note #account-state { margin-top: auto; padding-top: 16px; border-top: 1px solid #e5ebf4; font-size: 10px; }
.community-note > a { margin-top: 14px; color: #334ac1; font-size: 11px; text-decoration: none; }
.community-note > a:hover { text-decoration: underline; }
@media (max-width: 780px) {
  .community-grid { grid-template-columns: 1fr; }
  .community-panel { min-height: 0; }
}
@media (max-width: 540px) {
  body[data-planner-view="community"] .rooftop-banner { height: 230px; }
  .community-heading h1 { font-size: 22px; }
  .community-heading .community-button { padding: 0 8px; font-size: 9px; }
  .community-summary { gap: 5px; }
  .community-summary-card { min-height: 102px; padding: 10px 7px; }
  .community-summary-card span { font-size: 8px; }
  .community-summary-card strong { font-size: 14px; }
  .community-summary-card p { font-size: 8px; }
  .community-statusbar { flex-wrap: wrap; }
}