/* Platform branding only. Tenant names, maps and access-state colors stay distinct. */
:root{--ui-bg:var(--comunara-bg);--ui-panel:#fff;--ui-text:var(--comunara-text);--ui-muted:#625667;--ui-line:#927e94;--ui-action:var(--tenant-action-bg,var(--comunara-action-bg));--ui-action-text:var(--tenant-action-text,var(--comunara-action-text));--ui-link:var(--comunara-link);--ui-focus:var(--comunara-focus);--ui-selected:#301a38;--ui-field:#fff;color-scheme:light;font-family:var(--comunara-font);background:var(--ui-bg);color:var(--ui-text)}
:root[data-theme=dark]{color-scheme:dark;--ui-bg:#19151e;--ui-panel:#261f2c;--ui-text:#f7f5ef;--ui-muted:#d4c5d8;--ui-line:#95889d;--ui-link:#ffae9a;--ui-focus:#f7f5ef;--ui-selected:#492750;--ui-field:#201a25}
body{background:var(--ui-bg);color:var(--ui-text)}header{background:var(--ui-panel);color:var(--ui-text);border-bottom:1px solid var(--ui-line);gap:16px}header>span{font-size:.9rem;color:var(--ui-muted)}.platform-brand{display:flex;align-items:center;flex:none;padding:12px;min-width:184px;min-height:68px}.platform-brand img{display:block;width:176px;height:auto;max-width:100%}.brand-dark{display:none!important}[data-theme=dark] .brand-light{display:none!important}[data-theme=dark] .brand-dark{display:block!important}a{color:var(--ui-link)}section,dialog,.monitor-card,.visit-card{background:var(--ui-panel);color:var(--ui-text)}section,dialog,.visit-card,.registry-home,.registry-stat,.account-card,.catalog-item,#capture-section,#inside-map-panel,#visit-contact-box>div,#visit-create-form fieldset,.topology-row,#topology-editor form,#ucm-scope label,#calling-app-form,.registry-contact,.directory-slot{border-color:var(--ui-line)}dialog{max-width:94vw;max-height:90dvh;overflow:auto;border-radius:14px;padding:24px}input,textarea,select{background:var(--ui-field);color:var(--ui-text);border:1px solid var(--ui-line);font:inherit;min-height:44px}input::placeholder,textarea::placeholder{color:var(--ui-muted);opacity:1}input[type=checkbox]{min-height:initial}button{background:var(--ui-action);color:var(--ui-action-text)}button:not(:disabled):not(.is-loading):hover{background:var(--comunara-dark-coral);color:white}button:disabled,button.is-loading{background:#625b68;color:#fff;opacity:1}button:disabled{cursor:not-allowed}button.is-loading{cursor:wait}.tabs .selected,.tabs button[aria-pressed=true],#registry-tabs [aria-pressed=true]{background:var(--ui-selected);color:#fff;box-shadow:0 0 0 3px var(--ui-line)}:is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid var(--ui-focus);outline-offset:3px}.registry-person{border-left-color:var(--ui-line)}#registry-review-form{border-color:var(--ui-line)}th,td{border-color:var(--ui-line)}footer,.registry-meta,.action-feedback{color:var(--ui-muted)}.notice,#newtoken,#directory-feed-secret,#message:not(:empty){color:#533a0a;background:#fff5d8}#message:not(:empty){border-color:#9d7439}#login{position:relative;overflow:hidden;padding-top:32px}#login::before{content:'';position:absolute;inset:0 0 auto;height:7px;background:var(--comunara-gradient-primary)}#account-dialog form,#resident-enrollments form{display:grid;gap:16px}label{min-width:0}button{white-space:normal;overflow-wrap:anywhere}#account-dialog,#resident-enrollments{width:min(94vw,740px)}#account-history li{overflow-wrap:anywhere}#account-dialog p{overflow-wrap:anywhere}
/* Tenant SVG and readable QR surfaces intentionally retain their own colors. */
.map-canvas,#invitation-qr-image,.resident-qr-image{background:#fff;color:#301a38}.map-canvas{border-color:var(--ui-line)}
@media(max-width:600px){header{padding:12px;gap:10px}.platform-brand{padding:12px 4px;min-width:168px}.platform-brand img{width:160px}header>span{flex:1 1 120px}header>button{flex:1 1 auto}dialog{padding:16px}h1{font-size:1.5rem}#calling-app-uri{min-width:0;width:100%}}

/* TAG actions keep their label readable inside the horizontally scrolling table. */
#registry-content .registry-tag-open{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;overflow-wrap:normal;word-break:normal;width:max-content;min-width:max-content;flex:none}
#tag-assignment-users{display:grid;gap:4px;min-width:0}
#tag-assignment-users label{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;min-height:44px;width:100%;overflow-wrap:anywhere}
#tag-assignment-users input[type=checkbox]{flex:0 0 auto;width:20px;height:20px;min-height:20px;margin:0}


#directory-people{width:min(96vw,1000px)}
#directory-people .directory-check{display:flex;flex-direction:row;align-items:center;gap:10px;min-height:44px;width:100%}
#directory-people .directory-check input[type=checkbox]{width:20px;height:20px;min-height:20px;flex:none;margin:0}
#directory-people input,#directory-people select,#directory-people textarea{width:100%;max-width:100%}
#directory-people pre{white-space:pre-wrap;overflow-wrap:anywhere}
#directory-people-list{max-height:36vh;overflow:auto;margin-block:12px}

#identity-confirm-dialog{width:min(440px,calc(100vw - 40px));max-height:calc(100dvh - 40px);box-sizing:border-box;padding:24px;border:1px solid var(--ui-line);border-radius:20px;background:var(--ui-panel);color:var(--ui-text)}#identity-confirm-dialog::backdrop{background:#100f2466}#identity-confirm-dialog h2{margin-top:0}#identity-confirm-dialog form{display:block}#identity-confirm-dialog label{display:block}#identity-confirm-password{width:100%;box-sizing:border-box;min-height:48px}.identity-confirm-actions{display:flex;flex-wrap:wrap;gap:10px}.identity-confirm-actions button{min-height:44px}#identity-confirm-feedback{min-height:1.5em}

/* Dashboard navigation: cards and consistently spaced tools. */
#tenants{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px;margin:22px 0 28px}
#tenants .tenant-card{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px 14px;align-items:center;text-align:left;padding:20px;min-height:116px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-bg);color:var(--ui-text);box-shadow:none}
.tenant-card-mark{grid-row:span 2;display:grid;place-items:center;width:48px;height:48px;border-radius:14px;background:var(--ui-soft);color:var(--ui-strong);font-size:1.4rem;font-weight:700}.tenant-card-name{font-weight:700;font-size:1.05rem}.tenant-card-hint{font-size:.85rem;color:var(--ui-muted)}
#tenants .tenant-card[aria-pressed=true]{border:2px solid var(--ui-link);padding:19px;background:var(--ui-soft);color:var(--ui-text);box-shadow:none}#tenants .tenant-card:hover{background:var(--ui-soft);color:var(--ui-text)}
#details>#guard-nav,#details>.admin-tools{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:12px;margin:18px 0}
#details :is(#guard-nav,.admin-tools)>:is(button,a){display:flex;align-items:center;justify-content:flex-start;min-height:56px;height:100%;margin:0;padding:14px 16px;border-radius:10px;box-sizing:border-box;text-align:left;font:inherit;line-height:1.4}
#details>.admin-tools{padding-top:18px;border-top:1px solid var(--ui-line);margin-bottom:24px}#details>.admin-tools>button{background:var(--ui-soft);color:var(--ui-strong);border:1px solid var(--ui-line)}#details>.admin-tools>button:hover{background:var(--ui-selected);color:white}
#theme-toggle.theme-icon-button{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-width:44px;padding:10px;border-radius:12px;flex:none}#theme-toggle svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#details :is(#guard-nav,.admin-tools)>[hidden],#tenants[hidden]{display:none}

/* Compact, searchable tenant directory for administration. */
#tenants.tenant-compact{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
#tenants.tenant-compact .tenant-card{grid-template-columns:36px minmax(0,1fr);min-height:66px;padding:12px;gap:3px 10px;border-radius:10px}
#tenants.tenant-compact .tenant-card[aria-pressed=true]{padding:11px}#tenants.tenant-compact .tenant-card-mark{width:36px;height:36px;border-radius:10px;font-size:1rem}#tenants.tenant-compact .tenant-card-name{font-size:.95rem}#tenants.tenant-compact .tenant-card-hint{font-size:.78rem}
#tenants .tenant-card[hidden]{display:none}.tenant-picker-tools{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:12px}.tenant-picker-tools label{display:grid;gap:6px;flex:1;max-width:380px;font-size:.9rem}.tenant-picker-tools input{width:100%;box-sizing:border-box}.tenant-picker-pages{display:flex;align-items:center;gap:10px;font-size:.85rem}.tenant-picker-pages button{padding:10px;background:var(--ui-soft);color:var(--ui-strong)}
@media(max-width:600px){#tenants.tenant-compact{grid-template-columns:minmax(0,1fr)}.tenant-picker-tools label{max-width:none;flex-basis:100%}.tenant-picker-pages{width:100%;justify-content:space-between}}

/* Universal entry and authorized module selection. */
.module-main{max-width:1000px;margin:clamp(24px,6vh,64px) auto;padding:0 20px}.module-main>#dashboard{padding:clamp(20px,4vw,36px);border-radius:20px}.module-main>#dashboard>h1{margin-top:0}.module-main>#dashboard>p{color:var(--ui-muted);margin-bottom:28px}#module-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.module-card{display:block;padding:24px;border:1px solid var(--ui-line);border-radius:16px;background:var(--ui-bg);color:var(--ui-text);text-decoration:none}.module-card svg{width:32px;height:32px;fill:none;stroke:var(--ui-link);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.module-card h2{margin:16px 0 8px;font-size:1.3rem}.module-card p{color:var(--ui-muted);margin:0 0 20px}.module-count{font-size:.9rem;color:var(--ui-link);font-weight:600}.module-card:hover{background:var(--ui-soft)}.modules-link{border:1px solid var(--ui-line);border-radius:10px;padding:12px 16px;text-decoration:none;color:var(--ui-text);white-space:nowrap}.modules-link[hidden]{display:none}.welcome-card{max-width:440px;margin:48px auto;padding:28px!important}.welcome-card>p{color:var(--ui-muted)}.welcome-card #central-login{width:100%}
@media(max-width:600px){#module-cards{grid-template-columns:minmax(0,1fr)}.module-card{padding:20px}.module-main{padding:0 12px}.modules-link{padding:10px}}

/* Loading indicator is an overlay, never an extra cell in a tenant card. */
#tenants .tenant-card{position:relative;--tenant-spinner-center:44px}
#tenants.tenant-compact .tenant-card{--tenant-spinner-center:30px}
#tenants .tenant-card.is-loading::before{position:absolute;left:calc(var(--tenant-spinner-center) - .5em);top:calc(50% - .5em);margin:0;pointer-events:none}
#tenants .tenant-card.is-loading .tenant-card-mark{visibility:hidden}

/* One credential form and an embedded passkey action, including narrow resident dialogs. */
#identity-confirm-dialog{width:min(440px,calc(100vw - 24px));max-height:calc(100dvh - 32px);padding:24px;overflow-y:auto;overscroll-behavior:contain;scroll-padding-block:20px}
#identity-confirm-dialog .identity-confirm-intro{margin:0 0 22px;line-height:1.5;color:var(--ui-muted)}
#identity-confirm-dialog #identity-confirm-form{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;align-items:stretch}
#identity-confirm-dialog #identity-confirm-form label{display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;line-height:1.4}
#identity-confirm-dialog #identity-confirm-form input{box-sizing:border-box;width:100%;min-width:0;min-height:48px;font-size:16px;margin:0}
#identity-confirm-dialog #identity-confirm-submit{width:100%;min-height:48px;margin:0}
#identity-confirm-dialog #identity-confirm-passkeys[hidden]{display:none}
#identity-confirm-dialog .identity-confirm-or{text-align:center;margin:20px 0 12px;color:var(--ui-muted);font-size:.9rem}
#identity-confirm-dialog #identity-confirm-passkey{display:block;width:100%;height:100px;border:0;color-scheme:normal}
#identity-confirm-dialog #identity-confirm-passkey-help{font-size:.85rem;line-height:1.4;margin:4px 0 0;color:var(--ui-muted)}
#identity-confirm-dialog #identity-confirm-feedback{min-height:0;margin:16px 0;line-height:1.5;overflow-wrap:anywhere}
#identity-confirm-dialog #identity-confirm-feedback:empty{display:none}
#identity-confirm-dialog .identity-confirm-actions{display:flex;justify-content:flex-end;margin-top:16px}
#identity-confirm-dialog #identity-confirm-cancel{min-height:44px;margin:0}
body.identity-passkey-embedded{margin:0;background:var(--ui-panel);color:var(--ui-text)}
.identity-passkey-embedded .auth-main{display:block;margin:0;padding:0;max-width:none;min-height:0}
.identity-passkey-embedded .auth-main>section{margin:0;padding:0;border:0;border-radius:0;box-shadow:none}
.identity-passkey-embedded .identity-passkey-intro,.identity-passkey-embedded h1,.identity-passkey-embedded .identity-passkey-note{display:none}
.identity-passkey-embedded #identity-passkey-start{width:100%;min-height:48px;margin:0;font-size:16px}
.identity-passkey-embedded #message{font-size:13px;line-height:1.4;margin:10px 0 0}
@media(max-width:440px){#identity-confirm-dialog{padding:20px}#identity-confirm-dialog h2{font-size:1.4rem}}

#identity-confirm-dialog #identity-confirm-passkey[data-state=ready]{height:56px}
#identity-confirm-dialog #identity-confirm-passkey[data-state=verifying]{height:120px}
#identity-confirm-dialog #identity-confirm-passkey[data-state=error]{height:180px}
body.identity-passkey-embedded .auth-main>section{background:transparent}
body.identity-passkey-embedded .auth-main #message{padding:0;border:0;background:transparent;box-shadow:none;font-size:13px;font-weight:400;color:var(--ui-muted);line-height:1.4;margin:10px 0 0}
body.identity-passkey-embedded .auth-main #message[hidden]{display:none}
body.identity-passkey-embedded #identity-passkey-start{background:var(--ui-selected,#643496);border-radius:14px}

/* Resident help uses the mint brand accent across themes. */
.resident-pane .resident-authorization-guide,
.resident-help-notice {
  margin-block: .85rem;
  border: 1px solid color-mix(in srgb, var(--comunara-mint-deep) 55%, var(--ui-line));
  border-radius: 14px;
  background: var(--ui-soft);
  background: color-mix(in srgb, var(--comunara-mint-light) 16%, var(--ui-bg));
  color: var(--ui-text);
}
.resident-pane div.resident-authorization-guide, aside.resident-help-notice { padding: 1rem; }
.resident-help-notice h3 { margin: 0 0 .6rem; }
.resident-help-notice ol { margin: 0; padding: 0 1rem 1rem 2.4rem; }
.resident-help-notice li + li { margin-top: .6rem; }
#resident-access-note:empty { display: none; }
.resident-authorization-guide summary, .resident-authorization-guide h3 {
  display: flex;
  align-items: center;
  gap: .75rem;
}
.resident-authorization-guide summary {
  min-height: 48px;
  padding: .7rem .85rem;
  border-radius: inherit;
  cursor: pointer;
  list-style: none;
}
.resident-authorization-guide summary::-webkit-details-marker { display: none; }
.resident-authorization-guide summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.resident-authorization-guide summary small { display: block; font-weight: 600; }
.resident-authorization-guide details, .resident-authorization-guide p { line-height: 1.5; }
details.resident-authorization-guide > p { margin: 0; padding: 0 1rem 1rem; }
.resident-help-icon, .resident-help-chevron {
  width: 1.35rem;
  height: 1.35rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.resident-help-icon {
  box-sizing: content-box;
  padding: .35rem;
  border-radius: 50%;
  background: var(--comunara-mint-light);
  color: var(--comunara-plum);
}
.resident-help-chevron { margin-inline-start: auto; }
details[open] > summary .resident-help-chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: no-preference) {
  .resident-help-chevron { transition: transform 180ms ease; }
  @supports selector(details::details-content) and (interpolate-size: allow-keywords) {
    details.resident-authorization-guide::details-content {
      interpolate-size: allow-keywords;
      block-size: 0;
      overflow: clip;
      opacity: 0;
      transition: block-size 180ms ease, opacity 180ms ease, content-visibility 180ms allow-discrete;
    }
    details.resident-authorization-guide[open]::details-content { block-size: auto; opacity: 1; }
  }
}

.resident-app .resident-modules-float:not([hidden]) {
  position: fixed;
  z-index: 8;
  top: calc(.65rem + env(safe-area-inset-top));
  right: calc(.65rem + env(safe-area-inset-right));
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--ui-line);
  border-radius: 14px;
  background: var(--ui-soft);
  color: var(--ui-text);
  box-shadow: 0 2px 9px #0002;
}
.resident-modules-float svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.resident-modules-float:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.resident-pane div.resident-feature-guide { padding: .85rem 0 .25rem; min-width: 0; }
.resident-pane .resident-feature-guide > h3, .resident-feature-hint { margin: 0 .9rem; }
.resident-feature-hint { font-size: .9rem; color: var(--ui-muted); }
.resident-feature-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.resident-feature-track::-webkit-scrollbar { display: none; }
.resident-feature-track article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .75rem;
  align-items: start;
  padding: .85rem .9rem;
  scroll-snap-align: start;
}
.resident-feature-track h4, .resident-feature-track p { margin: 0; }
.resident-feature-dots { display: flex; justify-content: center; }
.resident-feature-dots > button {
  display: grid;
  place-items: center;
  flex: 0 1 44px;
  min-width: 0;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
}
.resident-feature-dots > button::after {
  content: '';
  width: 8px;
  height: 8px;
  border: 1px solid var(--comunara-mint-deep);
  border-radius: 50%;
}
.resident-feature-dots > button[aria-current]::after { background: var(--comunara-mint-light); }

.resident-qr-brand { display: flex; align-items: center; justify-content: center; gap: .6rem; margin: .5rem 0 .85rem; font-weight: 700; }
.resident-qr-brand[hidden] { display: none; }
.resident-qr-brand img { width: 54px; height: 54px; object-fit: contain; background: white; border-radius: .65rem; padding: .25rem; box-sizing: border-box; }
#resident-planned-form label[hidden] { display: none; }
.resident-branded-qr { border: 1px solid var(--ui-line); border-radius: 14px; overflow: hidden; }
.resident-branded-qr .resident-qr-image { margin: 0; }
.resident-qr-initial { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 12px; background: var(--ui-soft); color: var(--ui-text); }
.resident-qr-initial[hidden] { display: none; }
.resident-qr-actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .65rem; }
.resident-qr-actions > button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin: 0; min-height: 44px; }
#resident-planned-share-status:empty { display: none; }

.resident-branded-qr .resident-qr-image { position: relative; }
.resident-branded-qr .resident-qr-image:has(svg)::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: white url('/static/brand/comunara-isotipo-b-coral.svg') center / 72% auto no-repeat;
  pointer-events: none;
}

.resident-visit-pass { width: min(100%, 34rem); margin-inline: auto; }
.resident-visit-pass > canvas,
.resident-visit-pass > svg { display: block; width: 100%; height: auto; border-radius: .75rem; background: #fff; }
#resident-planned-qr .resident-qr-actions > [hidden] { display: none; }

.resident-qr-switch { display: inline-flex; align-items: center; gap: .65rem; min-height: 44px; }
.resident-qr-switch input { appearance: none; position: relative; width: 2.6rem; height: 1.5rem; min-height: 0; margin: 0; padding: 0; border: 1px solid var(--ui-line); border-radius: 1rem; background: var(--ui-soft); flex: none; }
.resident-qr-switch input::before { content: ''; position: absolute; width: 1rem; height: 1rem; inset: .19rem auto auto .2rem; border-radius: 50%; background: var(--ui-text); }
.resident-qr-switch input:checked { background: var(--ui-action, #653399); }
.resident-qr-switch input:checked::before { transform: translateX(1.05rem); background: #fff; }

#resident-parcel-plan, #resident-parcel-preferences { display: flex; align-items: center; gap: .85rem; width: 100%; text-align: left; }
#resident-parcel-plan svg, #resident-parcel-preferences svg { flex: 0 0 1.5rem; width: 1.5rem; fill: none; stroke: currentColor; stroke-width: 1.7; }
#resident-parcel-plan small, #resident-parcel-preferences small { display: block; margin-top: .2rem; font-size: .82em; }

#resident-invitation-policy { min-inline-size: 0; margin: .8rem 0; padding: .85rem; border: 1px solid var(--ui-line); border-radius: 1rem; background: var(--ui-panel); }
#resident-invitation-policy legend { padding-inline: .4rem; font-weight: 700; }
#resident-planned-form .resident-invitation-toggle { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: .6rem; min-height: 44px; margin-block: .45rem; text-align: start; }
#resident-planned-form .resident-invitation-toggle input { inline-size: 1.25rem; min-height: 0; margin: 0; flex: none; accent-color: #653399; }
#resident-invitation-window > p { margin: .6rem 0 .45rem; font-weight: 650; }
.resident-invitation-days { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .4rem; margin-bottom: .85rem; }
#resident-planned-form .resident-invitation-days label { position: relative; display: block; margin: 0; }
#resident-planned-form .resident-invitation-days input { position: absolute; inline-size: 1px; block-size: 1px; min-height: 0; opacity: 0; }
.resident-invitation-days span { display: grid; place-items: center; min-height: 44px; border: 1px solid var(--ui-line); border-radius: .7rem; background: var(--ui-soft); font-weight: 650; }
.resident-invitation-days input:checked + span { background: #653399; color: #fff; border-color: #a87bc9; }
.resident-invitation-days input:focus-visible + span { outline: 2px solid var(--ui-text); outline-offset: 2px; }
.resident-invitation-range { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .65rem; }
#resident-planned-form .resident-invitation-range label { min-width: 0; margin: 0; }
#resident-planned-form .resident-invitation-range input { display: block; box-sizing: border-box; width: 100%; min-width: 0; max-width: 100%; min-height: 44px; padding-inline: .45rem; appearance: none; -webkit-appearance: none; }
@media(max-width: 480px) { #resident-planned-form .resident-invitation-range { grid-template-columns: minmax(0,1fr); } }

#resident-planned-form .resident-invitation-range[hidden] { display: none; }
#resident-planned-form .resident-invitation-range input::-webkit-date-and-time-value { text-align: start; }
#resident-planned-date-limit:not([hidden]), #resident-invitation-use-limit { display: block; color: var(--ui-muted, var(--ui-text)); margin-block: .4rem .65rem; }
#resident-planned-guidance p:empty { display: none; }

#resident-planned-guidance {
  background: #e1f5eb;
  border-color: #78b49b;
}
[data-theme=dark] #resident-planned-guidance {
  background: #19382f;
  border-color: #4b8d74;
}

#resident-planned #resident-planned-close { width: 100%; margin-top: .7rem; }
.resident-caseta-help { background: #e1f5eb; border-color: #78b49b; }
[data-theme=dark] .resident-caseta-help { background: #19382f; border-color: #4b8d74; }
.resident-caseta-help h4 { display:flex; align-items:center; gap:.65rem; margin:0; }
.resident-caseta-waiting { display:flex; align-items:center; gap:.65rem; }
.resident-caseta-waiting::before { content:''; width:.65rem; height:.65rem; border-radius:50%; background:#268167; flex:none; animation:resident-caseta-pulse 2s ease-out infinite; }
@keyframes resident-caseta-pulse { 50% { box-shadow:0 0 0 .28rem #26816745; } }
#resident-install-banner:not([hidden]) { position:fixed; left:calc(.75rem + env(safe-area-inset-left)); bottom:calc(6rem + env(safe-area-inset-bottom)); z-index:8; display:block; border:0; background:none; padding:0; margin:0; }
#resident-install-banner > .resident-module-icon, #resident-install-banner strong, #resident-install-banner p, #resident-install-later, #resident-install-open span { display:none; }
#resident-install-open { display:grid; place-items:center; width:48px; min-height:48px; padding:0; border-radius:15px; box-shadow:0 2px 9px #0003; }
#resident-install-open svg { width:26px; fill:none; stroke:currentColor; stroke-width:1.7; animation:resident-phone-nudge 5s ease-in-out infinite; }
@keyframes resident-phone-nudge { 4%,12% { transform:rotate(-9deg); } 8%,16% { transform:rotate(9deg); } 20% { transform:none; } }
@media (prefers-reduced-motion:reduce) { .resident-caseta-waiting::before, #resident-install-open svg { animation:none; } }

.resident-layout-toggle { display:grid; place-items:center; flex:none; width:44px; height:44px; padding:0; margin-inline-start:auto; border-radius:14px; }
.resident-layout-toggle svg { width:23px; fill:none; stroke:currentColor; stroke-width:1.7; }
.resident-app {
  --resident-float-top: calc(4.55rem + env(safe-area-inset-top));
  --resident-float-right: calc(.75rem + env(safe-area-inset-right));
}
.resident-app .resident-modules-float:not([hidden]) { top:var(--resident-float-top); right:var(--resident-float-right); }
.resident-app .resident-tenant-heading { padding-inline-end:54px; }
.resident-quick-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem; margin-bottom:.75rem; }
.resident-app .resident-quick-actions button {
  display:grid; grid-template-rows:24px 1fr; justify-items:center; align-items:center;
  gap:.35rem; min-width:0; min-height:80px; padding:.55rem .25rem;
  border-radius:14px; text-align:center; font-size:clamp(.75rem,3.2vw,.95rem); line-height:1.2;
}
.resident-quick-actions svg { width:23px; height:23px; fill:none; stroke:currentColor; stroke-width:1.7; }
#resident-pedestrian-options:not([hidden]) { margin-bottom:.75rem; }
#resident-pedestrian-options button small { display:block; }
.resident-home-mosaic:not([hidden]) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }
.resident-home-mosaic button:not([hidden]) { display:grid; grid-template-rows:auto 1fr; min-width:0; overflow:hidden; padding:0; color:var(--ui-text); background:var(--ui-panel); border:1px solid var(--ui-line); border-radius:14px; }
.resident-home-mosaic strong { display:grid; place-items:center; min-height:44px; padding:.3rem; font-size:clamp(.95rem,4vw,1.22rem); line-height:1.15; }
.resident-home-mosaic button.is-loading {
  position: relative;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
}
.resident-home-mosaic button.is-loading::before {
  position: absolute;
  inset-block-start: .5rem;
  inset-inline-end: .5rem;
  z-index: 1;
  margin: 0;
  box-shadow: 0 0 0 .25rem var(--ui-panel);
  background: var(--ui-panel);
}
.resident-home-mosaic button > strong {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--ui-panel);
}
.resident-home-mosaic button > strong::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 20%, color-mix(in srgb, var(--ui-link) 32%, transparent) 50%, transparent 80%);
  animation: resident-mosaic-label-sweep 6s linear infinite alternate;
}
@keyframes resident-mosaic-label-sweep {
  from { transform: translateX(-28%); }
  to { transform: translateX(28%); }
}
@media (prefers-reduced-motion: reduce) {
  .resident-home-mosaic button > strong::before { animation: none; }
}

.resident-mosaic-photo {
  position:relative;
  width:100%;
  aspect-ratio:1;
  max-height:clamp(42px, calc((100svh - 365px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) / 3), 165px);
  overflow:hidden;
}
.resident-mosaic-photo::before {
  content:"";
  position:absolute;
  inset-inline:0;
  top:50%;
  aspect-ratio:1;
  transform:translateY(-50%);
  background:url('/static/resident-mosaic-photos.svg') var(--mosaic-photo-position, 0 0) / 300% 200% no-repeat;
}
.resident-mosaic-photo-1 { --mosaic-photo-position:50% 0; }
.resident-mosaic-photo-2 { --mosaic-photo-position:100% 0; }
.resident-mosaic-photo-3 { --mosaic-photo-position:0 100%; }
.resident-mosaic-photo-4 { --mosaic-photo-position:50% 100%; }
.resident-mosaic-photo-5 { --mosaic-photo-position:100% 100%; }
@media (min-width:700px) {
  .resident-home-mosaic:not([hidden]) { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .resident-mosaic-photo { max-height:clamp(42px, calc((100svh - 320px) / 2), 190px); }
}

.resident-layout-lines, .resident-layout-toggle[aria-pressed=true] svg path:first-child { display:none; }
.resident-layout-toggle[aria-pressed=true] .resident-layout-lines { display:inline; }
#resident-home-overview .resident-context { display:flex; align-items:end; gap:.55rem; }
#resident-home-overview .resident-context-picker { flex:1; min-width:0; }
#resident-home-stats-toggle { width:44px; min-height:44px; flex:none; padding:0; }
#resident-home-stats-toggle svg { width:22px; fill:none; stroke:currentColor; stroke-width:2; vertical-align:middle; transition:transform .22s ease; }
#resident-home-stats-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
.resident-home-stats-panel { display:grid; grid-template-rows:1fr; transition:grid-template-rows .24s ease; }
.resident-home-stats-panel.is-collapsed { grid-template-rows:0fr; }
.resident-home-stats-clip { min-height:0; overflow:hidden; }
@media (max-width:699px) {
  .resident-home-mosaic:not([hidden]) { gap:.45rem; }
}
@media(prefers-reduced-motion:reduce) { #resident-home-stats-toggle svg, .resident-home-stats-panel { transition:none; } }

#resident-community-cards[hidden] { display:none; }
#resident-home-overview .resident-context { padding-block:.55rem; }
#resident-home-overview:has(.resident-home-stats-panel.is-collapsed) .resident-context { border-bottom:0; }

.resident-mosaic-photo-custom { background:var(--mosaic-photo) center / cover no-repeat; }
.resident-mosaic-photo-custom::before { content:none; }
.resident-mosaic-photo-workers { --mosaic-photo:url('/static/resident-mosaic-workers.svg'); }
.resident-mosaic-photo-tags { --mosaic-photo:url('/static/resident-mosaic-tags.svg'); }
.resident-mosaic-photo-notifications { --mosaic-photo:url('/static/resident-mosaic-notifications.svg'); }
.resident-mosaic-photo-calendar { --mosaic-photo:url('/static/resident-mosaic-calendar.svg'); }
.resident-mosaic-photo-account { --mosaic-photo:url('/static/resident-mosaic-account.svg'); }
.resident-mosaic-photo-workers { background-position:center 20%; }
.resident-mosaic-photo-account { background-position:center 61%; }

#resident-pedestrian-options[hidden],
.resident-welcome-season[hidden] { display:none; }
.resident-feature-guide .resident-guide-heading { margin:0 .9rem; }
#resident-guide-toggle {
  display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  width:100%; min-height:44px; padding:.35rem 0; border:0; box-shadow:none;
  background:transparent; color:inherit; font:inherit; text-align:start;
}
#resident-guide-toggle svg {
  width:22px; height:22px; flex:none; fill:none; stroke:var(--comunara-mint-light);
  stroke-width:2; transition:transform .2s ease;
}
#resident-guide-toggle[aria-expanded=true] svg { transform:rotate(180deg); }
#resident-guide-content { display:grid; grid-template-rows:1fr; transition:grid-template-rows .2s ease; }
#resident-guide-content.is-collapsed { grid-template-rows:0fr; }
.resident-guide-clip { min-height:0; overflow:hidden; }
@media (prefers-reduced-motion:reduce) {
  #resident-guide-toggle svg, #resident-guide-content { transition:none; }
}
.resident-welcome { position:relative; overflow:hidden; isolation:isolate; }
.resident-welcome-season { position:absolute; inset:0; pointer-events:none; z-index:-1; }
.resident-welcome-season span {
  position:absolute; inset-block-start:15%; inset-inline-end:8%; opacity:.32;
  font-size:1rem; animation:resident-season-drift 6s ease-in-out infinite;
}
.resident-welcome-season span:nth-child(2) { inset-block-start:63%; inset-inline-end:4%; animation-delay:.3s; }
.resident-welcome-season span:nth-child(3) { inset-block-start:12%; inset-inline-end:24%; animation-delay:.6s; }
@keyframes resident-season-drift { 50% { transform:translate(-6px,-8px) rotate(-8deg); } }
@media (prefers-reduced-motion:reduce) { .resident-welcome-season span { animation:none; } }

#resident-home-overview .resident-context { padding-inline-start:.9rem; }
.resident-bottom > button[hidden] { display:none; }
.resident-bottom:has(> button[hidden]) { grid-template-columns:repeat(3,minmax(0,1fr)); }
.resident-feature-upcoming { display:inline-block; margin-bottom:.3rem; color:var(--ui-text); background:var(--ui-soft); border:1px solid var(--ui-line); border-radius:999px; padding:.15rem .5rem; font-size:.75rem; font-weight:700; }

.resident-calendar-months { display:flex; flex-wrap:wrap; gap:.5rem; }
.resident-calendar-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:3px; text-align:center; }
.resident-calendar-grid > button { min-width:0; min-height:44px; padding:.15rem; font-size:.9rem; background:var(--ui-soft); color:var(--ui-text); border:1px solid var(--ui-line); }
.resident-calendar-grid > button[aria-current=date] { border-color:var(--ui-link); font-weight:700; }
.resident-calendar-grid > button[aria-pressed=true], .resident-calendar-months button[aria-pressed=true] { outline:2px solid var(--ui-link); outline-offset:-2px; }
.resident-calendar-markers { display:flex; justify-content:center; gap:2px; min-height:5px; }
.resident-calendar-markers i { display:block; width:8px; height:4px; border-radius:2px; background:var(--ui-link); }
#resident-calendar-month { text-transform:capitalize; }
#resident-calendar-status:empty { display:none; }
#resident-calendar-detail ul { display:grid; gap:.25rem; padding:0; list-style:none; }
#resident-calendar-detail li { display:block; border-inline-start:4px solid var(--ui-link); padding:.35rem .6rem; line-height:1.4; overflow-wrap:anywhere; }
#resident-calendar-detail li em { display:inline; margin:0; padding:0; font-style:italic; }

.resident-calendar-legend { display:flex; flex-wrap:wrap; gap:.4rem .9rem; }
.resident-calendar-legend span { border-inline-start:4px solid var(--ui-link); padding-inline-start:.4rem; }
.resident-calendar-markers i[data-kind=COMMUNITY] { background:var(--comunara-mint-deep); }
#resident-calendar-detail li[data-kind=COMMUNITY], .resident-calendar-legend span[data-kind=COMMUNITY] { border-color:var(--comunara-mint-deep); }

.resident-app header .platform-brand img { object-fit:contain; }
.resident-brand-credit { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:.5rem; padding:1rem; color:var(--ui-muted); font-size:.85rem; }
.resident-brand-credit img { width:100px; height:auto; }
.resident-brand-credit .brand-light { display:block; }