/* Base styles: layout, forms, chat, listings, map, cards.
   Used by the tools page (/app), frontend/index.html; loaded in the order the page lists it. */

/* Arrival from the Gemma intro (script above): the intro's dark blue fades first, then the blur under it clears.
       Both layers ignore clicks and are removed once the page is sharp. */
html.app-entry::before,
html.app-entry::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2147483646
}
html.app-entry::before {
  background: #eaf1ff1f;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: opacity .6s cubic-bezier(.2, .7, .2, 1) .15s
}
html.app-entry::after {
  z-index: 2147483647;
  transition: opacity .4s ease;
  background: radial-gradient(60% 50% at 20% 25%, #2f55b566, transparent 70%), radial-gradient(50% 45% at 80% 75%, #6f8fd64d, transparent 70%), linear-gradient(135deg, #081029, #0d1738 45%, #16306f)
}
html.app-entry-clear::before,
html.app-entry-clear::after {
  opacity: 0
}
/* Text can be selected and copied everywhere. */
a[href],
a[href] *,
input:not([type]),
input:is([type="text"], [type="search"], [type="email"], [type="url"], [type="tel"], [type="password"], [type="number"]),
textarea,
[contenteditable="true"],
[contenteditable="true"] *,
[contenteditable=""],
[contenteditable=""] *,
[contenteditable="plaintext-only"],
[contenteditable="plaintext-only"] * {
  -webkit-user-select: text;
  user-select: text;
}

:root {
  --bg: #f6f7f9;
  --ink: #20262e;
  --muted: #515b68;
  --green: #285344;
  --line: #d9dee5;
  --sage: #edf1f5;
  --white: #fff;
  --peach: #f9eee3;
  --red: #9b3d35;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-size: 15px;
  line-height: 1.6;
  font-synthesis: none
}
* {
  box-sizing: border-box
}
body {
  margin: 0
}
button,
input,
textarea {
  font: inherit
}
button,
a {
  -webkit-tap-highlight-color: transparent
}
button {
  cursor: pointer
}
a {
  color: inherit
}
button {
  color: inherit
}
button svg,
a svg {
  flex-shrink: 0
}
svg {
  vertical-align: middle
}
button:disabled {
  cursor: wait;
  opacity: .65
}
button,
a,
input,
textarea {
  transition: background .15s, border-color .15s, box-shadow .15s
}
:focus-visible {
  outline: 3px solid #8b6fb2;
  outline-offset: 4px
}
[hidden] {
  display: none !important
}
h1,
h2,
h3,
p {
  margin: 0
}
button {
  border: 0
}
a {
  text-underline-offset: 4px
}
.skip-link {
  position: absolute;
  left: 20px;
  top: -100px;
  padding: 12px 20px;
  background: var(--green);
  color: white;
  z-index: 10
}
.skip-link:focus {
  top: 12px
}
.container {
  width: min(1440px, calc(100% - 64px));
  margin-inline: auto
}
.site-header {
  border-bottom: 1px solid var(--line);
  background: #fff
}
.header-inner {
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 750;
  font-size: 24px;
  letter-spacing: -1px
}
.brand-mark {
  width: 39px;
  height: 41px;
  display: grid;
  place-items: center;
  background: var(--green);
  border-radius: 12px;
  color: white
}
.brand-dot {
  color: #657080;
  margin-left: -9px
}
.header-links {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 13px
}
.header-links a {
  text-decoration: none;
  color: var(--muted)
}
.header-links a:hover {
  color: var(--green)
}
.header-links .emergency-link {
  color: #765539;
  display: flex;
  align-items: center;
  gap: 8px;
  background: #fbf5ec;
  border: 1px solid #eadfce;
  border-radius: 7px;
  padding: 9px 13px
}
.region-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px
}
.hero {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 45px;
  align-items: center;
  padding: 53px 0 40px
}
.eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 650;
  letter-spacing: 1.7px;
  color: #515f70
}
.eyebrow-dot {
  width: 6px;
  height: 6px;
  background: #77889d;
  border-radius: 50%
}
h1 {
  font-size: clamp(34px, 3.6vw, 48px);
  line-height: 1.2;
  letter-spacing: -1.8px;
  font-weight: 650;
  margin: 17px 0
}
h1 span {
  color: #3f4b5c
}
.hero-copy>p {
  font-size: 15px;
  line-height: 1.85;
  color: var(--muted);
  max-width: 470px
}
.hero-tags {
  display: flex;
  gap: 20px;
  margin-top: 23px;
  font-size: 12px;
  color: #515f70
}
.hero-tags span {
  display: flex;
  align-items: center;
  gap: 6px
}
.hero-art {
  background: #eff1f4;
  border: 1px solid #dfe3e9;
  border-radius: 18px;
  height: 262px;
  position: relative;
  overflow: hidden
}
.hero-art>svg {
  width: 100%;
  height: 100%;
  filter: saturate(.15)
}
.art-note {
  position: absolute;
  bottom: 21px;
  left: 24px;
  display: flex;
  align-items: center;
  gap: 7px;
  background: #fffef9;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 12px;
  color: #495768;
  box-shadow: 0 4px 15px #263d3308
}
.section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px
}
.section-heading h2 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -.5px
}
.section-heading p {
  font-size: 12px;
  color: var(--muted)
}
.tools {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 28px;
  align-items: start
}
.tool-workspace {
  min-width: 0
}
.tabs {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-bottom: 15px
}
.tab {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 15px 12px;
  text-align: left;
  display: flex;
  gap: 10px;
  align-items: center;
  min-height: 75px
}
.tab:hover {
  border-color: #8b9cb0;
  background: #f4f6f9
}
.tab[aria-selected=true] {
  background: var(--sage);
  border-color: #6b7e96;
  box-shadow: inset 0 0 0 1px #6b7e96
}
.tab-icon {
  display: grid;
  place-items: center;
  background: #eef1f5;
  border-radius: 8px;
  flex: 0 0 32px;
  height: 34px;
  color: #56667b
}
.tab[aria-selected=true] .tab-icon {
  background: #dde5ed;
  color: #354c66
}
.tab strong {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 650
}
.tab small {
  display: block;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  margin-top: 2px
}
.tool-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 27px
}
.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-bottom: 8px
}
.panel-heading h3 {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -.5px
}
.step-label {
  font-size: 12px;
  letter-spacing: 1px;
  color: #526175;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 4px 7px;
  white-space: nowrap
}
.panel-description {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-bottom: 20px
}
label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px
}
.input-row {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 14px;
  margin-bottom: 19px
}
.input-wrapper {
  display: flex;
  gap: 8px;
  align-items: center;
  border: 1px solid #b8c2ce;
  border-radius: 7px;
  padding: 0 11px;
  background: #ffffff;
  color: #566475
}
.input-wrapper:focus-within {
  outline: 3px solid #8b6fb2;
  outline-offset: 3px
}
.input-wrapper input {
  border: 0;
  outline: 0;
  background: transparent;
  min-width: 0;
  width: 100%;
  padding: 11px 0;
  font-size: 13px;
  color: var(--ink)
}
.input-wrapper span {
  font-size: 12px;
  white-space: nowrap
}
textarea {
  display: block;
  width: 100%;
  min-height: 145px;
  resize: vertical;
  line-height: 1.75;
  padding: 13px 15px;
  border: 1px solid #b8c2ce;
  border-radius: 8px;
  background: #ffffff;
  font-size: 13px;
  color: var(--ink)
}
textarea::placeholder,
input::placeholder {
  color: #626d7b
}
.textarea-hint {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 15px;
  font-size: 12px;
  color: #515d6b;
  margin-top: 7px
}
.character-count {
  white-space: nowrap
}
.examples {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  font-size: 12px;
  color: var(--muted);
  margin-top: 16px
}
.examples button {
  border: 1px solid #d7dee7;
  background: #f5f7fa;
  border-radius: 20px;
  padding: 5px 10px;
  font-size: 12px;
  color: #465b73
}
.examples button:hover {
  background: #edf1f5;
  border-color: #8b9cb0
}
.form-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  margin-top: 22px;
  border-top: 1px solid #e0e5eb;
  padding-top: 20px
}
.privacy-note {
  font-size: 12px;
  color: var(--muted);
  display: flex;
  gap: 6px;
  align-items: center
}
.assistant-privacy {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--muted);
  margin: -6px 20px 16px
}
.find-or-note {
  font-size: 14px;
  line-height: 1.45;
  color: var(--muted);
  text-align: center;
  margin: -4px auto 18px;
  max-width: 560px
}
.primary {
  display: inline-flex;
  gap: 9px;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  padding: 11px 17px;
  min-height: 45px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 550
}
.primary:hover {
  background: #193e30;
  box-shadow: 0 4px 10px #254f401a
}
.result:empty {
  display: none
}
.result {
  margin-top: 20px;
  border-radius: 8px;
  padding: 18px;
  font-size: 14px;
  line-height: 1.85;
  background: #f1f4f8;
  border: 1px solid #ccd6e2;
  overflow-wrap: anywhere;
  white-space: pre-wrap
}
.result[data-state=error] {
  background: #fff3ef;
  border-color: #eed1c9;
  color: #8c3e30
}
.result[data-state=loading] {
  color: #4c5d73;
  background: #f1f4f8
}
.result[data-state=loading]:before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  border: 2px solid #c2ccd9;
  border-top-color: var(--green);
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 8px;
  animation: spin .8s linear infinite
}
@keyframes spin {
  to {
    transform: rotate(360deg)
  }
}
.support-sidebar {
  display: grid;
  gap: 16px
}
.guidance-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #f0f2f5;
  padding: 23px
}
.guidance-card h3 {
  font-size: 16px;
  letter-spacing: -.3px;
  font-weight: 600;
  margin: 13px 0 8px
}
.guidance-card>p {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted)
}
.guidance-icon {
  width: 35px;
  height: 35px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #e0e6ee;
  color: #50627b
}
.steps {
  list-style: none;
  padding: 0;
  margin: 22px 0 0;
  display: grid;
  gap: 17px
}
.steps li {
  display: flex;
  gap: 10px;
  align-items: start
}
.step-number {
  height: 21px;
  width: 21px;
  flex-shrink: 0;
  background: #e0e6ee;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 12px;
  color: #465d78
}
.steps strong {
  font-size: 12px;
  display: block;
  font-weight: 600
}
.steps p {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin-top: 3px
}
.emergency-card {
  border: 1px solid #eadfce;
  border-radius: 12px;
  padding: 21px 22px;
  background: #fdf7ee;
  scroll-margin-top: 25px
}
.emergency-card h3 {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #845f3c
}
.emergency-card p {
  font-size: 12px;
  line-height: 1.85;
  color: #806b54;
  margin: 10px 0 15px
}
.call-links {
  display: flex;
  gap: 8px
}
.call-links a {
  border: 1px solid #e7d6bf;
  border-radius: 6px;
  background: #fffaf2;
  padding: 7px 10px;
  text-decoration: none;
  font-size: 12px;
  display: flex;
  gap: 6px;
  align-items: center
}
.call-links a:hover {
  background: #f2e7d6
}
.emergency-card small {
  display: block;
  font-size: 12px;
  color: #806b54;
  margin-top: 10px
}
.trust-banner {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 32px 0 29px;
  padding: 22px 25px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff
}
.trust-banner>svg {
  color: #53647c;
  flex-shrink: 0
}
.trust-banner h2 {
  font-size: 13px;
  font-weight: 600
}
.trust-banner p {
  font-size: 12px;
  line-height: 1.9;
  color: var(--muted);
  margin-top: 3px
}
.site-footer {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 35px;
  border-top: 1px solid var(--line);
  padding: 22px 0 30px;
  color: var(--muted);
  font-size: 12px
}
.footer-notes p:first-child {
  max-width: 660px
}
.footer-notes p:last-child {
  white-space: nowrap;
  color: #5c6877
}
.panel-safety {
  padding: 12px 14px;
  background: #f8f5ee;
  border-radius: 7px;
  font-size: 12px;
  color: #7b6b50;
  line-height: 1.8;
  margin-bottom: 18px
}
.reset-link {
  display: block;
  margin: 12px 0 0 auto;
  background: none;
  color: #506078;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 3px
}
@media(max-width:1050px) {
  .container {
    width: calc(100% - 44px)
  }
  .tools {
    grid-template-columns: minmax(0, 1fr) 255px;
    gap: 18px
  }
  .tab {
    gap: 7px;
    padding: 12px 9px
  }
  .tab-icon {
    flex-basis: 27px;
    height: 30px
  }
  .tab small {
    font-size: 12px
  }
  .tab strong {
    font-size: 12px
  }
  .tool-panel {
    padding: 23px
  }
  .privacy-note {
    max-width: 170px;
    align-items: start
  }
  .hero {
    gap: 25px
  }
  .hero-art {
    height: 250px
  }
  .guidance-card {
    padding: 21px
  }
  .form-bottom {
    gap: 10px
  }
}
@media(max-width:820px) {
  .tools {
    grid-template-columns: 1fr
  }
  .support-sidebar {
    grid-template-columns: 1.2fr 1fr
  }
  .guidance-card {
    padding: 22px
  }
  .steps {
    gap: 11px;
    margin-top: 16px
  }
  .hero {
    padding: 35px 0 32px;
    gap: 20px;
    grid-template-columns: 1.2fr 1fr
  }
  h1 {
    font-size: 35px
  }
  .hero-copy>p {
    font-size: 13px
  }
  .hero-tags {
    gap: 14px;
    font-size: 12px
  }
  .hero-art {
    height: 245px
  }
  .header-links {
    gap: 15px
  }
  .region-label {
    display: none
  }
  .section-heading p {
    font-size: 12px
  }
  .tab {
    padding: 14px;
    gap: 11px
  }
  .tab strong {
    font-size: 13px
  }
  .tab small {
    font-size: 12px
  }
  .tab-icon {
    flex-basis: 35px;
    height: 36px
  }
  .privacy-note {
    max-width: none
  }
  .emergency-card {
    display: flex;
    flex-direction: column;
    justify-content: center
  }
  .site-footer {
    gap: 20px
  }
}
@media(max-width:560px) {
  .container {
    width: calc(100% - 36px)
  }
  .header-inner {
    height: 73px
  }
  .brand {
    font-size: 22px;
    gap: 8px
  }
  .brand-mark {
    width: 33px;
    height: 36px;
    border-radius: 10px
  }
  .brand-mark svg {
    width: 21px
  }
  .header-links>a:first-child {
    display: none
  }
  .header-links .emergency-link {
    font-size: 12px;
    padding: 8px 10px;
    gap: 6px
  }
  .hero {
    grid-template-columns: 1fr;
    padding: 31px 0 28px;
    gap: 23px
  }
  .eyebrow {
    font-size: 12px;
    letter-spacing: 1.5px
  }
  h1 {
    font-size: 37px;
    letter-spacing: -1.5px;
    margin: 15px 0
  }
  .hero-copy>p {
    font-size: 14px;
    max-width: 100%
  }
  .hero-tags {
    font-size: 12px;
    margin-top: 18px
  }
  .hero-art {
    height: 175px
  }
  .hero-art>svg {
    position: absolute;
    height: 255px;
    bottom: -17px;
    right: -35px;
    width: 90%
  }
  .art-note {
    bottom: 21px;
    left: 17px;
    max-width: 120px;
    line-height: 1.6;
    align-items: start;
    font-size: 12px;
    padding: 10px
  }
  .art-note svg {
    margin-top: 2px;
    flex-shrink: 0
  }
  .section-heading {
    display: block;
    margin-bottom: 15px
  }
  .section-heading h2 {
    font-size: 21px
  }
  .section-heading p {
    margin-top: 5px
  }
  .tabs {
    gap: 7px
  }
  .tab {
    flex-direction: column;
    align-items: start;
    padding: 12px 10px;
    gap: 8px;
    min-height: 105px
  }
  .tab strong {
    font-size: 12px
  }
  .tab small {
    font-size: 12px
  }
  .tab-icon {
    flex: 0 0 30px;
    width: 30px;
    height: 30px;
    border-radius: 7px
  }
  .tab-icon svg {
    width: 17px
  }
  .tool-panel {
    padding: 21px 18px
  }
  .panel-heading h3 {
    font-size: 19px
  }
  .step-label {
    font-size: 8px
  }
  .panel-description {
    font-size: 12px
  }
  .input-row {
    grid-template-columns: 1fr;
    gap: 15px
  }
  .input-wrapper input {
    font-size: 14px
  }
  textarea {
    font-size: 14px;
    min-height: 170px
  }
  .textarea-hint {
    font-size: 12px;
    gap: 10px
  }
  .examples {
    gap: 7px;
    font-size: 12px
  }
  .examples>span {
    width: 100%
  }
  .examples button {
    font-size: 12px;
    padding: 6px 11px
  }
  .form-bottom {
    flex-direction: column-reverse;
    gap: 12px;
    align-items: stretch;
    margin-top: 19px;
    padding-top: 17px
  }
  .privacy-note {
    font-size: 12px;
    justify-content: center
  }
  .primary {
    font-size: 13px;
    min-height: 47px
  }
  .support-sidebar {
    grid-template-columns: 1fr;
    gap: 15px
  }
  .guidance-card {
    padding: 22px
  }
  .guidance-card h3 {
    margin-top: 0
  }
  .guidance-icon {
    float: right;
    margin-left: 12px
  }
  .steps {
    gap: 13px
  }
  .steps strong,
  .steps p {
    font-size: 12px
  }
  .steps p {
    margin-top: 2px
  }
  .emergency-card {
    padding: 21px 22px
  }
  .emergency-card h3 {
    font-size: 14px
  }
  .emergency-card p {
    font-size: 12px
  }
  .call-links a {
    font-size: 12px;
    flex: 1;
    justify-content: center;
    padding: 10px
  }
  .trust-banner {
    margin: 24px 0;
    padding: 19px 17px;
    gap: 12px;
    align-items: start
  }
  .trust-banner>svg {
    width: 23px;
    margin-top: 3px
  }
  .trust-banner h2 {
    font-size: 12px
  }
  .trust-banner p {
    font-size: 12px
  }
  .site-footer {
    flex-direction: column;
    gap: 12px;
    font-size: 12px;
    padding-top: 20px
  }
  .panel-safety {
    font-size: 12px
  }
  .result {
    font-size: 13px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important
  }
}
.upload-box {
  padding: 16px;
  border: 1px dashed #9cabbc;
  border-radius: 8px;
  background: #f5f7fa;
  margin-bottom: 20px
}
.upload-box label {
  margin: 0 0 8px
}
.upload-box input {
  width: 100%;
  font-size: 12px;
  color: var(--muted)
}
.upload-box input::file-selector-button {
  background: #e6ebf2;
  border: 1px solid #b7c4d3;
  border-radius: 5px;
  padding: 8px 12px;
  margin-right: 10px;
  color: var(--green);
  cursor: pointer;
  font: inherit
}
.upload-hint {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin-top: 9px
}
.upload-status:not(:empty) {
  font-size: 12px;
  line-height: 1.8;
  margin-top: 10px;
  color: #405c51
}
.upload-status[data-state=error] {
  color: var(--red)
}

:root {
  color-scheme: light
}
@media(max-width:380px) {
  .header-links .emergency-label {
    display: none
  }
  .header-links .emergency-link {
    padding: 10px
  }
  .header-links .emergency-link svg {
    width: 18px;
    height: 18px
  }
}
/* Keep supporting information readable at every screen size. */
.panel-description,
.steps p,
.guidance-card>p {
  font-size: 13px
}
.tab small,
.step-label,
.textarea-hint,
.privacy-note,
.upload-hint,
.emergency-card small,
.trust-banner p,
.site-footer {
  font-size: 12px
}
.examples,
.examples button {
  font-size: 12px
}
.emergency-card p {
  font-size: 12px
}
.steps strong {
  font-size: 12px
}
:root .trust-banner>svg {
  color: var(--muted)
}

.browse-link {
  display: inline-flex;
  gap: 14px;
  align-items: center;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--muted);
  margin-top: 20px;
  padding-bottom: 3px
}
.listings-section {
  margin-top: 42px;
  scroll-margin-top: 24px
}
.listings-section .section-heading p {
  margin-top: 7px
}
.catalog-label {
  font-size: 12px;
  letter-spacing: 1px;
  color: var(--muted);
  white-space: nowrap
}
.catalog-notice {
  padding: 14px 17px;
  background: #edf1f5;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 20px
}
.browse-filters {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  align-items: end
}
.browse-filters>div {
  min-width: 0
}
.browse-filters :is(input, select) {
  width: 100%;
  min-width: 0;
  min-height: 48px;
  border: 1px solid #b8c2ce;
  border-radius: 7px;
  background: #fff;
  color: var(--ink);
  padding: 11px 12px;
  font-size: 14px
}
/* Safari ignores height on native selects, so draw them ourselves with a chevron. */
:is(.browse-filters, #find-form) select:not(.location-pick) {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23526079' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px 8px
}
.browse-hint {
  font-size: 12px;
  color: var(--muted);
  margin-top: 12px;
  line-height: 1.8
}
.browse-message {
  margin: 20px 0 15px;
  font-size: 13px;
  color: var(--muted)
}
.browse-message[data-state=error] {
  padding: 17px;
  background: #fff3ef;
  color: #8c3e30;
  border: 1px solid #eed1c9;
  border-radius: 8px
}
.listings-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  align-items: start
}
.housing-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 23px;
  display: flex;
  flex-direction: column;
  min-width: 0
}
.housing-status {
  display: inline-flex;
  align-self: start;
  padding: 4px 8px;
  background: #edf1f5;
  border-radius: 5px;
  font-size: 12px;
  font-weight: 600;
  color: #465b73;
  margin-bottom: 14px
}
.housing-status[data-status=waitlist_open] {
  background: #f8efdf;
  color: #7a592b
}
.housing-card h3 {
  font-size: 17px;
  line-height: 1.45;
  letter-spacing: -.3px;
  margin-bottom: 5px
}
.housing-plan {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 9px
}
.housing-location {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.8
}
.housing-rent {
  font-size: 19px;
  font-weight: 650;
  letter-spacing: -.4px;
  margin: 16px 0 5px
}
.housing-rent small {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0
}
.housing-features {
  font-size: 12px;
  line-height: 1.8;
  color: var(--muted);
  margin: 0 0 15px
}
.housing-age {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 7px
}
.housing-card details {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: auto
}
.housing-card summary {
  font-size: 12px;
  font-weight: 550;
  cursor: pointer
}
.housing-card details p {
  font-size: 12px;
  line-height: 1.85;
  color: var(--muted);
  margin: 11px 0;
  overflow-wrap: anywhere
}
.housing-actions {
  display: flex;
  gap: 15px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 17px
}
.housing-actions a {
  font-size: 12px;
  font-weight: 550
}
.housing-reviewed {
  font-size: 12px;
  color: var(--muted);
  margin-top: 14px
}
.listing-reveal-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 24px
}
.more-listings {
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--white);
  min-height: 44px
}
#show-more-listings {
  width: auto;
  max-width: 100%;
  min-height: 46px;
  padding: 11px 24px;
  background: var(--ink);
  color: var(--bg);
  font-size: 15px;
  font-weight: 650
}
#show-more-listings:hover {
  filter: brightness(1.15)
}
#show-all-listings {
  padding: 8px 14px;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 4px
}
#show-all-listings:hover {
  color: var(--ink);
  background: var(--sage)
}
.more-listings {
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease
}
.more-listings:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px #23408f1f;
  border-color: #6f8fd6;
  background: #f3f6fd
}
.more-listings:active {
  transform: translateY(0);
  box-shadow: none
}
.card-reveal {
  animation: card-in .4s ease-out both
}
/* All listings / Favorites switch, and the save button on each card. */
.listing-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  margin: 4px 0 18px;
  background: #edf1f5;
  border-radius: 10px
}
.listing-tabs button {
  min-height: 40px;
  padding: 8px 16px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: #465b73;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer
}
.listing-tabs button[aria-pressed=true] {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 4px #182c541f
}
.listing-tabs .favorite-count {
  display: inline-block;
  min-width: 20px;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #dfe6ee;
  font-size: 12px;
  text-align: center
}
.listing-tabs button[aria-pressed=true] .favorite-count {
  background: #fbe3e3;
  color: #a3343a
}
.listings-section[data-list=favorites] :is(#browse-form, .budget-shortcut, .browse-hint) {
  display: none
}
.favorite-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease
}
.favorite-btn:hover {
  border-color: #d9a3a6;
  background: #fdf3f3
}
.favorite-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8
}
.favorite-btn[aria-pressed=true] {
  border-color: #e7b7ba;
  background: #fbe3e3;
  color: #a3343a
}
.favorite-btn[aria-pressed=true] svg {
  fill: currentColor
}
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 32px;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease
}
.share-btn:hover {
  border-color: #a9c1dc;
  background: #f1f6fc
}
.share-btn svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round
}
.housing-card.shared-highlight {
  outline: 3px solid #2f6fb5;
  outline-offset: 4px;
  scroll-margin-top: 24px
}
.share-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  z-index: 1000;
  max-width: calc(100% - 32px);
  padding: 11px 18px;
  border-radius: 999px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  background: linear-gradient(140deg, #14203fd9 0%, #14203fb8 55%, #14203fcc 100%);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border: 1px solid #ffffff3d;
  box-shadow: inset 0 1px 0 #ffffff47, inset 0 -1px 0 #ffffff14, inset 0 0 18px #ffffff12, 0 12px 32px #0b143347;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease
}
.share-toast.show {
  opacity: 1;
  transform: translate(-50%, 0)
}
/* Darkened liquid glass: a smoky navy pane the page shows through, with a light rim and a soft glare. */
.share-toast::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 80% at 18% 0%, #ffffff30 0%, #ffffff00 55%)
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .share-toast {
    background: #14203ff2
  }
}
@keyframes card-in {
  from {
    opacity: 0;
    transform: translateY(12px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@media(prefers-reduced-motion:reduce) {
  .card-reveal {
    animation: none
  }
  .more-listings:hover {
    transform: none
  }
}
@media(max-width:1050px) {
  .listings-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .browse-filters {
    grid-template-columns: 1fr 1fr
  }
  .browse-filters .primary {
    min-height: 45px
  }
  .header-links {
    gap: 16px
  }
}
@media(max-width:560px) {
  .listings-grid {
    grid-template-columns: 1fr
  }
  .housing-card {
    padding: 22px
  }
  .browse-filters {
    grid-template-columns: 1fr
  }
  .listings-section {
    margin-top: 30px
  }
  .catalog-label {
    display: none
  }
  .header-links .browse-nav,
  .header-links>a[href="/"] {
    display: none
  }
  .housing-card h3 {
    font-size: 18px
  }
  .catalog-notice {
    font-size: 12px
  }
  .housing-location,
  .housing-features {
    font-size: 12px
  }
}
/* Trees sway gently from the base of the trunk. */
/* Fly in from the left, out past the right edge, then wait out of sight before the next pass. */

/* Blue theme, matching the about page. The logo badge keeps its green. */
:root {
  --bg: #eef3fc;
  --ink: #14203f;
  --muted: #4b5a7a;
  --line: #d2dcf0;
  --sage: #e2eafb;
  --blue: #23408f
}
:focus-visible {
  outline-color: #315fbd
}
:root .site-header {
  background: #0d1738;
  border-color: #0d1738
}
:root .brand,
:root .header-links a:not(.emergency-link) {
  color: #eef3ff
}
/* Header links: medium weight, even spacing, and a short underline that slides in on hover and keyboard focus. */
.header-links {
  gap: 6px
}
.header-links a:not(.emergency-link) {
  position: relative;
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .01em;
  color: #dfe7fb !important;
  transition: color .18s ease, background-color .18s ease
}
.header-links a:not(.emergency-link)::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 5px;
  height: 2px;
  border-radius: 2px;
  background: #ffd66b;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease
}
.header-links a:not(.emergency-link):is(:hover, :focus-visible) {
  color: #fff !important;
  background: #ffffff12
}
.header-links a:not(.emergency-link):is(:hover, :focus-visible)::after {
  transform: scaleX(1)
}
.header-links a:not(.emergency-link):active {
  background: #ffffff1f
}
.header-links a:not(.emergency-link):focus-visible {
  outline: 2px solid #315fbd;
  outline-offset: 2px
}
.header-links .emergency-link {
  margin-left: 10px
}
#listings:focus {
  outline: none
}
/* focused only so keyboard users continue from the listings */
@media(max-width:820px) {
  .header-links a:not(.emergency-link) {
    padding: 8px 9px;
    font-size: 13.5px
  }
  .header-links a:not(.emergency-link)::after {
    left: 9px;
    right: 9px
  }
}
:root .brand-dot {
  color: #8d99ad
}
:root .region-label {
  color: #b7c3e6
}
:root .primary {
  background: var(--blue);
  color: #fff
}
:root .primary:hover {
  background: #1a3170
}
:root .tab:hover {
  background: #f3f6fd;
  border-color: #9db2e3
}
:root .tab[aria-selected=true] {
  background: #e2eafb;
  border-color: #6f8fd6;
  box-shadow: inset 0 0 0 1px #6f8fd6
}
:root .tab[aria-selected=true] .tab-icon {
  background: #cfdcf7;
  color: var(--blue)
}
:root :is(.eyebrow, h1 span) {
  color: #2f55b5
}
:root .eyebrow-dot {
  background: #6f8fd6
}
:root .hero-art {
  background: #dfe8fa;
  border-color: #cddaf3
}
:root .hero-art>svg {
  filter: hue-rotate(105deg) saturate(.9)
}
:root .guidance-card {
  background: #e7eefc;
  border-color: #d2dcf0
}
:root :is(.guidance-icon, .step-number) {
  background: #d5e1f8;
  color: var(--blue)
}
:root .result {
  background: #eef3fd;
  border-color: #cddaf3
}
:root .upload-box {
  background: #f3f6fd;
  border-color: #9db2e3
}
:root .catalog-notice {
  background: #e7eefc
}
:root .housing-status {
  background: #e2eafb;
  color: var(--blue)
}
:root .browse-link {
  border-color: #6f8fd6
}

.housing-card {
  position: relative;
  isolation: isolate
}
.housing-card:has(.property-photo:hover),
.housing-card:has(.property-photo:focus-visible) {
  z-index: 3
}
.housing-card:has(.property-photo) :is(.housing-status, h3, .housing-plan) {
  margin-right: 98px
}
.housing-card .housing-status {
  font-size: 12px;
  line-height: 1.6
}
.property-photo {
  position: absolute;
  right: 19px;
  top: 20px;
  width: 84px;
  height: 80px;
  padding: 5px;
  border-radius: 17px;
  background: linear-gradient(135deg, #ffffffb3, #ffffff26);
  border: 1px solid #ffffffb3;
  box-shadow: 0 8px 24px #182c5426, inset 0 1px 0 #fff9;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  z-index: 2
}
.property-photo>img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: 12px
}
.photo-expand-mark {
  position: absolute;
  bottom: 7px;
  right: 7px;
  display: grid;
  place-items: center;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  background: #12203db3;
  color: white;
  font-size: 15px;
  backdrop-filter: blur(8px)
}
.photo-hover {
  position: absolute;
  right: -5px;
  top: -5px;
  width: 285px;
  max-width: calc(100vw - 70px);
  padding: 8px;
  border: 1px solid #ffffffa6;
  border-radius: 19px;
  background: #fff;
  box-shadow: 0 12px 32px #0b143326;
  opacity: 0;
  visibility: hidden;
  transform: scale(.94);
  transform-origin: top right;
  transition: opacity .18s, transform .18s, visibility .18s;
  pointer-events: none;
  color: #14203f
}
.photo-hover img {
  display: block;
  width: 100%;
  height: 185px;
  object-fit: contain;
  border-radius: 12px
}
.photo-hover small {
  display: block;
  text-align: left;
  padding: 8px 5px 3px;
  font-size: 12px;
  line-height: 1.6
}
@media(hover:hover) and (pointer:fine) {
  .property-photo:hover .photo-hover,
  .property-photo:focus-visible .photo-hover {
    visibility: visible;
    opacity: 1;
    transform: scale(1)
  }
}
.photo-unavailable {
  position: absolute;
  right: 19px;
  top: 20px;
  width: 84px;
  min-height: 68px;
  padding: 13px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--sage);
  color: var(--muted);
  font-size: 12px;
  text-align: center
}
.housing-card:has(.photo-unavailable) :is(.housing-status, h3, .housing-plan) {
  margin-right: 98px
}
.housing-card .eligibility-details {
  padding-top: 15px
}
.eligibility-details summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  font-size: 12px;
  min-height: 30px
}
.eligibility-details summary::-webkit-details-marker {
  display: none
}
.eligibility-details summary::after {
  content: '+';
  font-size: 20px;
  font-weight: 400;
  color: var(--muted)
}
.eligibility-details[open] summary::after {
  content: '−'
}
.eligibility-grid {
  display: grid;
  gap: 0;
  margin-top: 12px
}
.eligibility-item {
  padding: 13px 0;
  border-top: 1px solid var(--line)
}
.eligibility-item h4 {
  font-size: 12px;
  letter-spacing: .6px;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink)
}
.housing-card .eligibility-item p {
  margin: 6px 0 0;
  font-size: 12px;
  line-height: 1.8
}
.eligibility-footer {
  font-size: 12px;
  color: var(--muted);
  padding: 12px;
  border-radius: 7px;
  background: var(--sage);
  margin-top: 6px
}
.photo-dialog {
  width: min(850px, calc(100% - 32px));
  max-height: 90dvh;
  overflow: auto;
  padding: 20px;
  border: 1px solid #ffffff73;
  border-radius: 20px;
  background: #f5f8fff5;
  color: #14203f;
  box-shadow: 0 30px 90px #0007;
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px)
}
.photo-dialog::backdrop {
  background: #071024c9;
  backdrop-filter: blur(8px)
}
.photo-dialog header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  margin-bottom: 15px
}
.photo-dialog h2 {
  font-size: 21px;
  line-height: 1.5
}
.photo-dialog button {
  background: #e2eafb;
  border: 1px solid #cdd8ef;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  font-size: 23px;
  color: #14203f
}
.photo-dialog img {
  display: block;
  max-height: 62dvh;
  width: 100%;
  object-fit: contain;
  border-radius: 12px;
  background: #dfe6f2
}
.photo-dialog p {
  font-size: 12px;
  line-height: 1.8;
  margin: 12px 0
}
.photo-dialog a {
  font-size: 12px
}
@media(max-width:560px) {
  .photo-dialog {
    padding: 16px
  }
  .photo-dialog h2 {
    font-size: 18px
  }
  .property-photo,
  .photo-unavailable {
    right: 17px
  }
  .housing-card .eligibility-item p {
    font-size: 13px
  }
}
.housing-card .housing-category {
  font-size: 12px;
  color: var(--muted);
  margin: 2px 98px 10px 0;
  line-height: 1.7
}
.housing-card .rent-caveat {
  font-size: 12px;
  line-height: 1.7;
  color: var(--muted);
  margin-bottom: 12px
}
.housing-card .floor-plans-details {
  margin-top: auto
}
.floor-plans-details>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  list-style: none;
  min-height: 40px
}
.floor-plans-details>summary::-webkit-details-marker {
  display: none
}
.floor-plans-details>summary::after {
  content: '+';
  font-size: 20px;
  color: var(--muted)
}
.floor-plans-details[open]>summary::after {
  content: '−'
}
.floor-plan-list {
  display: grid;
  gap: 14px;
  margin-top: 12px
}
.floor-plan-option {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 15px;
  min-width: 0;
  overflow-wrap: anywhere
}
.floor-plan-option h4 {
  font-size: 14px;
  line-height: 1.6;
  margin: 0 0 6px
}
.housing-card .floor-plan-option .option-price {
  font-size: 16px;
  font-weight: 650;
  color: var(--ink);
  margin: 6px 0
}
.housing-card .floor-plan-option .option-status {
  font-size: 12px;
  color: var(--muted);
  margin: 8px 0 12px
}
.floor-plan-option .eligibility-grid a {
  font-size: 12px
}
.budget-shortcut {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 15px 0 0;
  font-size: 12px;
  color: var(--muted)
}
.budget-shortcut button {
  border: 1px solid #8797b8;
  border-radius: 20px;
  background: var(--white);
  color: var(--ink);
  padding: 8px 14px;
  font-size: 12px;
  min-height: 44px
}
.budget-shortcut button[aria-pressed=true] {
  background: var(--blue);
  color: #fff;
  border-color: var(--blue)
}
.lease-guidance-link {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 18px;
  color: var(--blue)
}
/* Follow the device theme. Neutral surfaces keep text and controls distinct. */


/* Very faint animated houses-and-birds drawing behind the page. */
/* Houses and trees stay barely visible; the birds are clear enough to notice. */


/* Listings map in the hero. */
.hero-map-wrap {
  min-width: 0
}
.tonight-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 12px 0 4px
}
.tonight-links span {
  flex-basis: 100%;
  font-size: 12px;
  font-weight: 650;
  color: #6b4b12
}
.tonight-links button {
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid #e3c98f;
  background: #fff8ea;
  font-size: 13px;
  font-weight: 650;
  color: #5a3f0c
}
.tonight-links button:hover {
  background: #fdefd2
}
/* Shelter cards: call first, how to get in, where to go. */
.opt-card.shelter {
  gap: 6px
}
.opt-card .opt-badge.confirm {
  background: #fbf1dc;
  color: #6b4b12
}
.shelter-call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin-top: 2px
}
.shelter-call a {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 8px 14px;
  border-radius: 10px;
  background: #23408f;
  color: #fff;
  font-weight: 700;
  text-decoration: none
}
.shelter-call small {
  color: var(--muted);
  font-size: 11.5px
}
.opt-card details {
  font-size: 12.5px;
  line-height: 1.55
}
.opt-card details summary {
  cursor: pointer;
  font-weight: 650;
  min-height: 32px;
  display: flex;
  align-items: center
}
.opt-card details p {
  margin: 4px 0
}
.shelter-where {
  font-size: 12.5px;
  color: var(--muted)
}
/* Hotels and motels from Google Maps: orange "not verified" badge, like the web-search pins on the map. */
.opt-badge.web {
  background: #fff1e0 !important;
  color: #8a4b0f !important
}
.hotel-note {
  margin: 0 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted)
}
.hotel-more {
  display: inline-block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 650;
  color: #2f55b5
}
.chat-hotels {
  display: grid;
  gap: 8px;
  width: 100%;
  animation: msg-in .3s ease-out
}
.chat-hotels .chat-cards {
  animation: none
}
.chat-hotels .hotel-note,
.chat-hotels .hotel-more {
  margin: 0
}
.hotel-cost {
  color: var(--ink)
}
.hotel-cost b {
  font-weight: 700
}
.hotel-basis {
  font-size: 12px
}
/* Somewhere to stay tonight: free shelters beside paid hotels (stacked when narrow), so the cost is plain before anyone calls. */
.tonight-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 14px;
  align-items: start
}
.tonight-col {
  min-width: 0;
  padding: 13px 13px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  border-top: 3px solid
}
.tonight-col.free {
  background: #f1f7f3cc;
  border-top-color: #3d7a5c
}
.tonight-col.paid {
  background: #fff8efcc;
  border-top-color: #d9822b
}
.find-results .tonight-col h4 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
  color: var(--ink);
  margin-bottom: 4px
}
.find-results .tonight-col .opt-grid {
  grid-template-columns: 1fr
}
.cost-tag {
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  letter-spacing: .6px
}
.cost-tag.free {
  background: #d9ecdf;
  color: #24563d
}
.cost-tag.paid {
  background: #fde4c4;
  color: #8a4b0f
}
@media(max-width:560px) {
  .tonight-col {
    padding: 11px 10px 12px
  }
}
.web-search-btn {
  margin-top: 8px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px dashed #d9822b;
  background: #fff8ef;
  color: #8a4b0f;
  font-size: 12.5px;
  font-weight: 650
}
.web-search-btn:hover {
  background: #fdeedd
}
/* Nearby essentials: one group, read top to bottom; the walking time only applies once a place is chosen. */
.nearby-essentials {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin: 14px 0
}
.nearby-essentials legend {
  font-weight: 650;
  font-size: 14px;
  padding: 0 6px
}
.nearby-essentials .opt {
  font-weight: 400;
  color: var(--muted)
}
.nearby-help {
  margin: 0 0 10px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5
}
.nearby-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 230px));
  gap: 12px 16px
}
.nearby-grid label {
  display: block;
  font-size: 13.5px;
  font-weight: 600;
  margin-bottom: 5px
}
.nearby-grid .find-select {
  font-size: 15px;
  min-height: 46px
}
.nearby-grid .find-select:disabled {
  opacity: .55;
  cursor: not-allowed
}
.nearby-summary {
  margin: 10px 0 6px;
  font-size: 13px;
  color: var(--muted)
}
.nearby-summary.on {
  color: #1d5d3f;
  font-weight: 600
}
.nearby-soft {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  min-height: 36px
}
.nearby-soft:has(input:disabled) {
  opacity: .55
}
@media(max-width:560px) {
  .nearby-grid {
    grid-template-columns: 1fr
  }
}
.map-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px
}
.map-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--glass-border, #ffffffb3);
  background: var(--glass-bg, #ffffffb8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  transition: background .15s, border-color .15s, color .15s
}
.map-tab:hover {
  border-color: #6f8fd6
}
.map-tab[aria-pressed=true] {
  background: #23408f;
  border-color: #23408f;
  color: #fff
}
.map-tab.near-me {
  margin-left: auto
}
.map-hood {
  min-height: 38px;
  padding: 7px 30px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--glass-border, #ffffffb3);
  background: var(--glass-bg, #ffffffb8);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  max-width: 180px
}
.map-hood:focus-visible {
  outline: 3px solid #315fbd;
  outline-offset: 2px
}
.map-tab.near-me[aria-busy=true] {
  opacity: .7;
  cursor: wait
}
.hero-map {
  height: 300px;
  border-radius: 18px;
  border: 1px solid var(--line);
  overflow: hidden;
  background: var(--sage)
}
.map-status {
  font-size: 13px;
  color: var(--muted);
  margin-top: 6px;
  min-height: 1.4em
}
.map-status[data-state=loading]::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--line);
  border-top-color: #2f55b5;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: -1px;
  animation: spin .8s linear infinite
}
.web-results {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow: auto
}
.web-results li {
  border: 1px solid var(--line);
  border-left: 4px solid #d9822b;
  border-radius: 8px;
  padding: 9px 12px;
  font-size: 13px;
  background: var(--white)
}
.web-results strong {
  display: block;
  font-size: 14px
}
.web-results a {
  font-weight: 600
}
.leaflet-popup-content {
  margin: 12px 14px
}
/* Keep the area label on one line; it only wraps on very small phones. */
/* Region label: "Housing support for" and the place names wrap as two groups, never word by word,
       and the dot stays beside the first line. */
.eyebrow {
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: .42em;
  row-gap: 3px;
  line-height: 1.5;
  margin-bottom: 14px
}
.eyebrow-dot {
  align-self: center;
  margin-right: .15em
}
.eyebrow-lead,
.eyebrow-places {
  white-space: nowrap
}
.eyebrow-places {
  font-weight: 750
}
.eyebrow-amp {
  font-weight: 500;
  opacity: .8
}
.map-popup {
  font: 13px/1.5 Inter, system-ui, sans-serif;
  color: #1d2433
}
.map-popup strong {
  display: block;
  font-size: 14px;
  margin-bottom: 2px
}
.map-popup a {
  font-weight: 600
}
@media(max-width:560px) {
  .hero-map {
    height: 240px
  }
}

/* Find form: optional details, instant options, then an optional assistant chat. */
.find-select {
  width: 100%;
  min-height: 45px;
  border: 1px solid #7a8ba7;
  border-radius: 7px;
  background: var(--white);
  color: var(--ink);
  padding: 10px 11px;
  font: inherit;
  font-size: 13px
}
.find-select :is(option, optgroup) {
  background: var(--white);
  color: var(--ink)
}
/* "Pick an area" sits inside the location box as a soft pill, like the page's chips. */
.location-pick {
  flex: none;
  max-width: 48%;
  min-height: 34px;
  margin: 6px 0;
  padding: 6px 32px 6px 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #f3f6fd url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%2323408f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 4.5 3 3 3-3'/%3E%3C/svg%3E") no-repeat right 12px center;
  color: var(--blue);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  text-overflow: ellipsis;
  transition: background-color .15s, border-color .15s
}
.location-pick:hover {
  background-color: #e2eafb;
  border-color: #6f8fd6
}
.location-pick :is(option, optgroup) {
  background: var(--white);
  color: var(--ink);
  font-weight: 400
}
/* The pill sits after the box in the HTML: placed inside it on the right on wider screens, on its own line under it on phones. */
.loc-field {
  position: relative
}
.loc-field .location-pick {
  position: absolute;
  right: 7px;
  bottom: 6px;
  width: 128px;
  margin: 0
}
.input-wrapper.has-pick {
  padding-right: 146px
}
@media(max-width:560px) {
  .loc-field .location-pick {
    position: static;
    display: block;
    max-width: 100%;
    margin-top: 8px
  }
  .input-wrapper.has-pick {
    padding-right: 11px
  }
}

.find-checks {
  border: 0;
  padding: 0;
  margin: 0 0 19px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px 18px;
  align-items: start
}
.find-check {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0
}
.find-check label {
  flex: 0 1 auto;
  min-width: 0;
  min-height: 28px
}
.find-help {
  flex: none;
  width: 18px;
  height: 18px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--muted);
  background: transparent;
  color: var(--muted);
  font: 600 11px/1 inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center
}
.find-help:hover,
.find-help[aria-expanded=true] {
  color: #23408f;
  border-color: #23408f
}
.find-help:focus-visible {
  outline: 2px solid #23408f;
  outline-offset: 2px
}
.find-tip {
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 6px;
  z-index: 5;
  width: max-content;
  max-width: min(260px, calc(100vw - 32px));
  padding: 8px 10px;
  border-radius: 8px;
  background: #1f2a44;
  color: #fff;
  font-size: 12px;
  line-height: 1.4;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .18)
}
.find-tip[hidden] {
  display: none
}
.find-checks legend {
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 8px;
  padding: 0
}
.find-checks label {
  display: flex;
  gap: 9px;
  align-items: center;
  font-weight: 400;
  font-size: 13px;
  margin: 0;
  cursor: pointer
}
.find-checks input {
  width: 17px;
  height: 17px;
  accent-color: #23408f
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0)
}
/* Mini Gemma chat above the listings: one line of glass and a short reply; the cards below re-sort to fit. */
.sort-chat {
  scroll-margin-top: 100px;
  margin: 16px 0 6px;
  padding: 10px;
  border-radius: 20px;
  background: var(--glass-bg, #ffffffcc);
  border: 1px solid var(--glass-border, #ffffffd9);
  box-shadow: var(--glass-shadow, 0 10px 30px #0b143314);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6)
}
.sort-form {
  display: flex;
  align-items: center;
  gap: 10px
}
.sort-avatar {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #e8f0fe
}
.sort-form input {
  flex: 1;
  min-width: 0;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #c9d5ea;
  background: #fff;
  font-size: 14.5px;
  color: var(--ink)
}
.sort-form input:focus-visible {
  outline: 2px solid #2f55b5;
  outline-offset: 1px
}
.sort-form button {
  flex: none;
  min-height: 44px;
  padding: 10px 22px;
  border-radius: 999px;
  border: 0;
  background: #2f55b5;
  color: #fff;
  font-size: 14px;
  font-weight: 650
}
.sort-form button:hover {
  background: #23408f
}
.sort-form button:disabled {
  opacity: .6;
  cursor: progress
}
.sort-reply {
  margin: 9px 6px 3px 52px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink)
}
.sort-reply>b {
  color: #2f55b5
}
.sort-reply[data-state=loading] #sort-text {
  color: var(--muted)
}
.sort-chip {
  margin: 4px 0 0 6px;
  padding: 4px 11px;
  border-radius: 999px;
  border: 1px solid #c9d5ea;
  background: #fff;
  font-size: 12.5px;
  font-weight: 600;
  color: #2f55b5
}
.sort-chip:hover {
  background: #f1f5fd
}
.housing-card[data-gemma-rank] {
  box-shadow: 0 0 0 2px #6f8fd699, 0 14px 34px #0b143326
}
@media(max-width:560px) {
  .sort-reply {
    margin-left: 6px
  }
  .sort-form button {
    padding: 10px 16px
  }
}
.find-results {
  margin-top: 22px;
  display: grid;
  gap: 18px
}
.walk-results:has(#walk-layout[hidden]) .walk-toggle {
  display: none
}
.notice-urgent {
  background: #fbf5ec;
  border: 1px solid #eadfce;
  color: #765539;
  border-radius: 8px;
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600
}
.find-results h4 {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--muted);
  margin: 0 0 9px
}
.find-results .opt-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px
}
.opt-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 15px;
  background: var(--white);
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  font-size: 13px
}
.opt-card strong {
  font-size: 14px;
  line-height: 1.4
}
.opt-card .meta {
  color: var(--muted)
}
.opt-card .opt-links {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 6px;
  font-weight: 600
}
.opt-card .opt-badge {
  align-self: flex-start;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--sage);
  color: var(--ink)
}
.opt-card .opt-badge.closed {
  background: #fbe9e4;
  color: #8c3e30
}
.opt-empty {
  font-size: 13px;
  color: var(--muted)
}
.find-or {
  margin: 26px 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted)
}
.assistant {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  overflow: hidden
}
.assistant-head {
  display: flex;
  gap: 11px;
  align-items: center;
  padding: 13px 16px;
  border-bottom: 1px solid var(--line)
}
.assistant-head strong {
  display: block;
  font-size: 14px
}
.assistant-head span {
  font-size: 12px;
  color: var(--muted)
}
.assistant-avatar {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 3px 10px #23408f33
}
.assistant-avatar img {
  width: 100%;
  height: 100%;
  display: block
}
.assistant-log {
  position: relative;
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 16px;
  max-height: 560px;
  overflow-y: auto
}
.assistant-log.chatting {
  height: min(560px, 70vh)
}
/* a fixed window once chatting, so each question can sit at its top */
.msg {
  padding: 11px 14px;
  border-radius: 12px;
  max-width: 88%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-size: 14px;
  line-height: 1.6
}
.msg.user {
  justify-self: end;
  background: #23408f;
  color: #fff;
  border-bottom-right-radius: 4px
}
.msg.bot {
  background: var(--sage);
  border-bottom-left-radius: 4px
}
.msg.bot[data-state=loading] {
  color: var(--muted)
}
.msg.bot[data-state=error] {
  background: #fff3ef;
  color: #8c3e30
}
.msg-engine {
  font-size: 11.5px;
  color: var(--muted);
  margin: -4px 0 2px 4px
}
.msg.bot[data-state=notice] {
  background: #fbf1dc;
  color: #5a3f0c
}
.msg.bot[data-state=update] {
  background: transparent;
  border: 1px dashed var(--line);
  color: var(--muted);
  font-size: 13px
}
.msg.bot[data-state=loading]::before {
  content: '';
  display: inline-block;
  width: 9px;
  height: 9px;
  border: 2px solid var(--line);
  border-top-color: #2f55b5;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: -1px;
  animation: spin .8s linear infinite
}
.msg {
  animation: msg-in .25s ease-out
}
@keyframes msg-in {
  from {
    opacity: 0;
    transform: translateY(6px)
  }
  to {
    opacity: 1;
    transform: none
  }
}
/* Cards for the places Gemma names, under its answer: a compact list, each a thumbnail beside its details. */
.chat-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 8px;
  width: 100%;
  animation: msg-in .3s ease-out
}
.chat-card {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
  padding: 10px 12px 10px 10px;
  border-radius: 14px;
  border: 1px solid var(--glass-border, #ffffffb3);
  background: var(--glass-bg, #ffffffcc);
  box-shadow: var(--glass-shadow, 0 6px 18px #23408f12);
  backdrop-filter: blur(14px) saturate(1.3);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  transition: box-shadow .15s, transform .15s
}
.chat-card-media {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: hidden;
  background: #e7edf8;
  color: #6f8fd6;
  display: grid;
  place-items: center
}
.chat-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}
/* No photo: a close-up of the area's map under frosted liquid glass, like the listing cards. */
.chat-card-media.map-thumb {
  position: relative;
  background: var(--thumb) 45% 45%/220% no-repeat, #e7edf8
}
.chat-card-media.stock-thumb {
  position: relative;
  background: var(--thumb) center/cover no-repeat, #e7edf8
}
.chat-card-media.stock-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, #ffffff4d, #ffffff0d 55%, #ffffff33);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.3);
  backdrop-filter: blur(1.5px) saturate(1.3);
  box-shadow: inset 0 0 0 1px #ffffffb3, inset 0 1px 0 #fff
}
/* The tonight panel's cards open with a small photo of the kind of place (or the area's map), under liquid glass. */
.opt-card .stock-banner {
  position: relative;
  flex: none;
  height: 88px;
  margin: -14px -15px 6px;
  border-radius: 15px 15px 0 0;
  overflow: hidden;
  background: var(--thumb) center/cover no-repeat, #e7edf8
}
.opt-card .stock-banner.map {
  background-position: 45% 45%;
  background-size: 160%
}
.opt-card .stock-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, #ffffff4d, #ffffff0d 55%, #ffffff40);
  -webkit-backdrop-filter: blur(2px) saturate(1.3);
  backdrop-filter: blur(2px) saturate(1.3);
  box-shadow: inset 0 -1px 0 #ffffffb3
}
.chat-card-media.map-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(140deg, #ffffff59, #ffffff14 55%, #ffffff40);
  -webkit-backdrop-filter: blur(1px) saturate(1.4);
  backdrop-filter: blur(1px) saturate(1.4);
  box-shadow: inset 0 0 0 1px #ffffffb3, inset 0 1px 0 #fff
}
.chat-card-body {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 12.5px;
  line-height: 1.45
}
.chat-card-body .opt-badge {
  justify-self: start;
  margin-bottom: 3px
}
.chat-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink)
}
.chat-card-meta {
  color: var(--muted)
}
.chat-card-meta b {
  color: var(--ink);
  font-weight: 650
}
.chat-card-address {
  color: var(--muted);
  overflow-wrap: anywhere
}
.chat-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin-top: 4px
}
.chat-card-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  font-weight: 600;
  font-size: 12.5px
}
.chat-card.flash {
  box-shadow: 0 0 0 3px #2f55b5
}
.chat-card:focus-visible {
  outline: 3px solid #315fbd;
  outline-offset: 2px
}
.chat-cards-more {
  justify-self: start;
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 6px 14px;
  min-height: 36px;
  font-size: 12.5px;
  font-weight: 600
}
@media(prefers-reduced-motion:reduce) {
  .chat-cards {
    animation: none
  }
}
.msg a.chat-ref {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: #2f55b5;
  text-underline-offset: 3px;
  cursor: pointer
}
.assistant-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 12px
}
.assistant-chips button {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 7px 12px;
  font-size: 12.5px;
  min-height: 36px;
  transition: background .15s, border-color .15s
}
.assistant-chips button:hover {
  background: #e2eafbcc;
  border-color: #6f8fd6
}
/* Gemma's follow-up question: answer pills inside its bubble, like the front page's guided chat (.start-choice) in the
       light chat's colors. Once answered they fold away: the pick shows as the person's own reply. Several can apply: ticks, then Continue. */
.chat-q {
  white-space: normal;
  border: 0;
  margin: 10px 0 2px;
  padding: 0;
  min-width: 0;
  display: grid;
  gap: 8px
}
.msg>.chat-q:first-child {
  margin-top: 0
}
.chat-q legend {
  padding: 0;
  margin-bottom: 8px;
  font-size: inherit;
  line-height: 1.6;
  font-weight: 600
}
.chat-q[data-state] legend {
  margin-bottom: 0
}
.chat-q-choices,
.chat-q-more {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center
}
.chat-q[data-state] :is(.chat-q-choices, .chat-q-more) {
  display: none
}
.chat-q-choice,
.chat-q-check,
.chat-q-continue {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 15px;
  border-radius: 999px;
  border: 1px solid var(--pill-line, #c3cfe8);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-align: left;
  box-shadow: 0 2px 8px #23408f0f;
  animation: chat-q-rise .35s ease both
}
.chat-q-choice:hover,
.chat-q-choice:focus-visible,
.chat-q-check:hover {
  background: #eef3fd;
  border-color: #6f8fd6;
  color: #1a3170
}
.chat-q-choice.escape {
  background: transparent;
  border-style: dashed;
  color: var(--muted);
  box-shadow: none
}
.chat-q-check {
  gap: 8px;
  margin: 0;
  cursor: pointer
}
.chat-q-check input {
  width: 18px;
  height: 18px;
  margin: 0;
  accent-color: #23408f
}
.chat-q-check:has(input:checked) {
  background: #e2eafb;
  border-color: #23408f
}
.chat-q-check:has(input:focus-visible) {
  outline: 3px solid #8b6fb2;
  outline-offset: 2px
}
.chat-q-continue {
  background: #23408f;
  border-color: #23408f;
  color: #fff;
  box-shadow: inset 0 1px 0 #ffffff2e, 0 6px 16px #23408f33
}
.chat-q-continue:hover:not(:disabled) {
  background: #1a3170
}
.chat-q-type {
  background: none;
  border: 0;
  padding: 8px 4px;
  min-height: 40px;
  color: #23408f;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px
}
@keyframes chat-q-rise {
  from {
    opacity: 0;
    transform: translateY(8px) scale(.98)
  }
  to {
    opacity: 1;
    transform: none
  }
}
@media(prefers-reduced-motion:reduce) {
  .chat-q :is(.chat-q-choice, .chat-q-check, .chat-q-continue) {
    animation: none
  }
}
@media(pointer:coarse) {
  .chat-q-choice,
  .chat-q-check,
  .chat-q-continue,
  .chat-q-type {
    min-height: 44px
  }
}
@media(max-width:560px) {
  .msg.bot:has(.chat-q) {
    max-width: 100%
  }
}
@media(prefers-reduced-motion:reduce) {
  .msg {
    animation: none
  }
}
.assistant-form {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 9px;
  padding: 12px 16px;
  border-top: 1px solid var(--line)
}
.assistant-form textarea {
  min-height: 45px;
  resize: vertical
}
@media(max-width:560px) {
  .find-checks,
  .find-results .opt-grid {
    grid-template-columns: 1fr
  }
  .assistant-form {
    grid-template-columns: 1fr
  }
}

/* Walking-distance search. */
.walk-filters {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin: 14px 0
}
.walk-filters label {
  font-size: 12px
}
.walk-pref {
  display: flex;
  gap: 9px;
  align-items: center;
  font-weight: 400;
  font-size: 13px;
  cursor: pointer
}
.walk-pref input {
  width: 17px;
  height: 17px;
  accent-color: #23408f
}
.walk-status {
  font-size: 13px;
  color: var(--muted);
  margin-top: 16px
}
.walk-status:empty {
  display: none
}
.walk-status[data-state=loading]::before {
  content: '';
  display: inline-block;
  width: 10px;
  height: 10px;
  border: 2px solid var(--line);
  border-top-color: #2f55b5;
  border-radius: 50%;
  margin-right: 7px;
  vertical-align: -1px;
  animation: spin .8s linear infinite
}
.walk-warnings {
  font-size: 12px;
  color: var(--muted);
  margin: 6px 0 0;
  padding-left: 18px
}
.walk-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 16px;
  margin-top: 14px;
  align-items: start
}
.walk-cards {
  display: grid;
  gap: 12px
}
.walk-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
  padding: 14px;
  display: grid;
  grid-template-columns: 88px 1fr;
  gap: 12px;
  cursor: pointer;
  text-align: left
}
.walk-card[aria-current=true] {
  border-color: #2f55b5;
  box-shadow: inset 0 0 0 1px #2f55b5
}
.walk-card>img {
  width: 88px;
  height: 88px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--sage)
}
.walk-card.no-photo {
  grid-template-columns: 1fr
}
.walk-card h4 {
  font-size: 15px;
  margin: 0 0 2px
}
.walk-card .meta {
  font-size: 12px;
  color: var(--muted)
}
.walk-card .rent {
  font-size: 16px;
  font-weight: 700;
  margin: 4px 0
}
.walk-card ul {
  list-style: none;
  padding: 0;
  margin: 6px 0;
  font-size: 12px;
  display: grid;
  gap: 3px
}
.walk-badge {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  font-weight: 700;
  padding: 3px 9px;
  border-radius: 20px;
  background: #e3f3e6;
  color: #245b31
}
.walk-badge.na {
  background: var(--sage);
  color: var(--muted)
}
.walk-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  margin-top: 6px
}
.walk-actions button {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  text-decoration: underline;
  font: inherit;
  cursor: pointer
}
.walk-store {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 12px;
  margin-top: 4px
}
.walk-store img {
  width: 40px;
  height: 40px;
  border-radius: 6px;
  object-fit: cover
}
.walk-attr {
  font-size: 12px;
  color: var(--muted)
}
.walk-map {
  height: 420px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--sage);
  position: sticky;
  top: 12px
}
.walk-map-text {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px
}
.walk-toggle {
  display: none;
  gap: 6px;
  margin-top: 12px
}
.walk-toggle button {
  font: inherit;
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--white);
  cursor: pointer
}
.walk-toggle button[aria-pressed=true] {
  background: #23408f;
  color: #fff;
  border-color: #23408f
}
@media(max-width:860px) {
  .walk-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr))
  }
  .walk-layout {
    grid-template-columns: 1fr
  }
  .walk-toggle:not([hidden]) {
    display: flex
  }
  .walk-layout[data-view=list] .walk-map-col {
    display: none
  }
  .walk-layout[data-view=map] .walk-cards {
    display: none
  }
  .walk-map {
    height: 340px;
    position: static
  }
}

/* Give the property image its own space; details stay on a solid reading surface. */
.housing-card.has-photo {
  background: #fff;
  padding: 0;
  border: 1px solid #dce4f0;
  overflow: hidden;
  box-shadow: 0 6px 20px #14203f0d
}
.housing-card.has-photo::before {
  content: '';
  display: block;
  position: relative;
  flex: none;
  width: 100%;
  aspect-ratio: 4/3;
  max-height: 340px;
  background: var(--card-photo) center/contain no-repeat, #edf2f8;
  border-bottom: 1px solid #e3e9f2
}
.housing-card>.card-glass {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0
}
.housing-card.has-photo .card-glass {
  position: relative;
  padding: 20px;
  border-radius: 0;
  background: #fff;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 0;
  box-shadow: none;
  --muted: #4b5a7a
}
.housing-card.has-photo :is(.housing-status, h3, .housing-plan) {
  margin-right: 0
}
.housing-card.has-photo .property-photo {
  width: auto;
  height: auto;
  top: 12px;
  right: 12px;
  padding: 7px 11px;
  border-radius: 999px;
  font-size: 12px
}
.housing-card.has-photo .property-photo>img {
  display: none
}
.housing-card.has-photo .photo-expand-mark {
  position: static;
  display: inline;
  background: none;
  box-shadow: none;
  color: #14203f;
  font-size: 14px
}
/* "View" on photo cards: a white glass pill in the site's blue, with a drawn expand icon (the ⤢ character renders unevenly). */
.housing-card.has-photo .property-photo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px 7px 10px;
  line-height: 1;
  background: #ffffffe6;
  border: 1px solid #ffffffcc;
  box-shadow: 0 6px 18px #0b14332e;
  color: var(--blue);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, border-color .15s
}
.housing-card.has-photo .property-photo::after {
  content: 'View'
}
.housing-card.has-photo .property-photo:hover {
  background: #fff;
  border-color: #6f8fd6
}
.housing-card.has-photo .photo-expand-mark {
  display: block;
  width: 13px;
  height: 13px;
  font-size: 0;
  color: inherit;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H3v6M15 3h6v6M9 21H3v-6M15 21h6v-6'/%3E%3C/svg%3E") center/contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 3H3v6M15 3h6v6M9 21H3v-6M15 21h6v-6'/%3E%3C/svg%3E") center/contain no-repeat
}

.housing-card.has-photo :is(.housing-category, .housing-location, .housing-plan, .housing-features, .rent-caveat, details p) {
  font-weight: 500
}
.listings-grid {
  align-items: stretch
}
.housing-card:not(.has-photo) {
  background: #fff;
  border: 1px solid #dce4f0;
  border-radius: 18px;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 6px 20px #14203f0d
}
.housing-card.has-photo {
  border-radius: 18px
}
@media(max-width:560px) {
  .housing-card.has-photo .card-glass {
    padding: 18px
  }
}

/* Liquid glass everywhere on the tools page, so text stays readable over the background drawing. */
:root {
  --glass-bg: linear-gradient(140deg, #ffffffc4 0%, #ffffff9c 55%, #ffffffb8 100%);
  --glass-border: #ffffffd9;
  --glass-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #ffffff59, inset 0 0 20px #ffffff33, 0 10px 30px #0b14331c;
  --glass-blur: blur(22px) saturate(1.8)
}

:is(.tool-panel, .tab, .guidance-card, .trust-banner, .catalog-notice, .opt-card, .assistant, .walk-card, .web-results li, .result, .upload-box,
  .hero-copy, .section-heading, .map-status, .browse-hint, .browse-message:not(:empty), .site-footer, .walk-status:not(:empty), .find-checks) {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow)
}
.tab[aria-selected=true] {
  background: linear-gradient(140deg, #e2eafbe6, #d5e1f8c7) !important;
  border-color: #6f8fd6 !important;
  box-shadow: inset 0 0 0 1px #6f8fd6, var(--glass-shadow)
}

.browse-filters {
  background: var(--glass-bg) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--glass-shadow);
  padding: 18px;
  border-radius: 16px
}
/* Loose text gets a soft glass backing with breathing room. */
.hero-copy {
  padding: 26px 28px;
  border-radius: 22px
}
.section-heading {
  padding: 14px 18px;
  border-radius: 16px
}
.map-status:not(:empty),
.walk-status:not(:empty) {
  padding: 7px 12px;
  border-radius: 12px;
  width: fit-content;
  max-width: 100%
}
.map-status:empty {
  display: none
}
/* Keep location status compact beneath the map. */
.map-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 10px
}
.map-meta>.map-status {
  margin: 0
}
.map-meta .map-status {
  flex: 1 1 110px;
  max-width: max-content;
  font-size: 12px;
  line-height: 1.45
}
.browse-hint,
.browse-message:not(:empty) {
  padding: 10px 14px;
  border-radius: 12px
}
.site-footer {
  padding: 18px 22px;
  border-radius: 16px;
  margin-bottom: 24px
}
/* One glass box at the bottom with the fine print. */
.site-footer {
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  margin-top: 32px;
  border-top: 0
}
.footer-notes {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 35px
}
.footer-notes p,
.footer-notes p:last-child {
  white-space: normal
}
@media(max-width:560px) {
  .footer-notes {
    flex-direction: column;
    gap: 10px
  }
}
.find-checks {
  padding: 12px 14px;
  border-radius: 12px
}
/* The emergency card stays warm, as warm glass. */
.emergency-card,
.header-links .emergency-link {
  background: linear-gradient(140deg, #fbf5ece6, #fbf5ecbf) !important;
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid #eadfcee6 !important;
  box-shadow: inset 0 1px 0 #fff, 0 10px 30px #7655391a
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  :root {
    --glass-bg: #fffffff2
  }
}

/* Tab 1: only the essentials up front; everything optional lives in a dropdown. */
.urgent-check {
  display: flex;
  gap: 9px;
  align-items: center;
  font-weight: 600;
  font-size: 13px;
  margin: 4px 0 14px;
  cursor: pointer;
  color: #765539
}
.urgent-check input {
  width: 17px;
  height: 17px;
  accent-color: #b5651d
}
.more-options {
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-bottom: 16px;
  background: var(--white)
}
.more-options>summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px
}
.more-options>summary::-webkit-details-marker {
  display: none
}
.more-options>summary::after {
  content: '+';
  margin-left: auto;
  font-size: 18px;
  transition: transform .2s ease
}
.more-options[open]>summary::after {
  transform: rotate(45deg)
}
.more-options>summary span {
  font-weight: 400;
  color: var(--muted)
}
.more-options-body {
  padding: 4px 16px 16px
}
.show-programs {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  align-self: start;
  padding: 9px 14px;
  border-radius: 20px;
  border: 1px solid var(--line);
  background: var(--white);
  color: inherit;
  cursor: pointer
}
.house-pin {
  background: none;
  border: 0;
  filter: drop-shadow(0 1px 2px #0006)
}
.house-pin:focus-visible {
  outline: 3px solid #315fbd;
  border-radius: 4px
}

/* Fewer boxes: each big section is ONE glass panel, and the pieces inside it sit flat on that glass. */
#tools,
.listings-section {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
  border-radius: 24px;
  padding: 26px
}
:is(#tools, .listings-section) :is(.section-heading, .catalog-notice, .browse-filters, .browse-hint, .browse-message, .find-checks) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding-left: 0;
  padding-right: 0
}
:is(#tools, .listings-section) .section-heading {
  padding-top: 0
}
.listings-section .catalog-notice {
  border-top: 1px solid var(--line) !important;
  border-radius: 0;
  padding: 14px 0
}
.listings-section .browse-filters {
  padding: 6px 0 4px
}
/* Listings filters: quick picks first, four main filters, the rest folded under "More filters". Results update on change. */
.listings-section .budget-shortcut {
  margin: 0 0 14px
}
.quick-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  margin-right: 2px
}
.listings-section .browse-filters {
  display: block
}
.filter-main,
.filter-more {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
  align-items: end
}
.filter-more {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  padding: 10px 0 2px
}
:is(.filter-main, .filter-more) label {
  font-size: 13px;
  margin-bottom: 6px
}
.filter-bar {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-top: 12px
}
.more-filters {
  flex: 1;
  min-width: 0
}
.more-filters>summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  list-style: none;
  font-size: 14px;
  font-weight: 650;
  color: var(--blue)
}
.more-filters>summary::-webkit-details-marker {
  display: none
}
.more-filters>summary::after {
  content: '+';
  font-size: 18px;
  line-height: 1;
  transition: transform .2s
}
.more-filters[open]>summary::after {
  transform: rotate(45deg)
}
.more-filters-note {
  font-size: 13px;
  font-weight: 400;
  color: var(--muted)
}
.more-filters-count {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700
}
.filter-bar .primary {
  flex: none;
  min-height: 44px;
  padding: 10px 20px
}
@media(max-width:1050px) {
  .filter-main,
  .filter-more {
    grid-template-columns: 1fr 1fr
  }
}
@media(max-width:560px) {
  .filter-main,
  .filter-more {
    grid-template-columns: 1fr
  }
  .filter-bar {
    flex-direction: column;
    align-items: stretch
  }
  .more-filters-note {
    display: none
  }
  .filter-bar .primary {
    width: 100%
  }
}
/* Panels inside the section: a light outline instead of their own glass. */
#tools :is(.tool-panel, .tab, .guidance-card) {
  background: #ffffff8c !important;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: 1px solid var(--line) !important
}
#tools .tab[aria-selected=true] {
  background: #e2eafbcc !important;
  border-color: #6f8fd6 !important;
  box-shadow: inset 0 0 0 1px #6f8fd6
}

@media(max-width:560px) {
  #tools,
  .listings-section {
    padding: 16px;
    border-radius: 18px
  }
}



/* Background neighborhood, built from HTML and CSS: sun, clouds, hills, a back row of homes, two main
       houses with twinkling windows and chimney smoke, swaying trees and grass, and birds. Layers shift a
       little as you scroll (--sy, set by a small script) for depth. Sizes are in cqw so it scales like a picture. */
/* The box is the whole window so that, in short wide windows, the picture is only ever cropped at the top
       of the screen, never in a straight line across the middle (which glass panels make look like a cut). */
.scene {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden
}
/* Kept quiet behind the tools: the picture fades out toward the top of the window (the ground, trees and grass
       show softly along the bottom; the big roofs never sit behind the text), under a light blue wash at the top. */
.scene {
  opacity: .5;
  -webkit-mask-image: linear-gradient(to top, #000 0, #000 12%, #0000 58%);
  mask-image: linear-gradient(to top, #000 0, #000 12%, #0000 58%)
}
html {
  background: radial-gradient(1100px 560px at 8% -140px, #dbe6fb, #dbe6fb00 70%), radial-gradient(900px 520px at 100% -60px, #e2f0f6, #e2f0f600 70%), #eef3fc
}
.sc-stage {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: max(100%, 126vh);
  aspect-ratio: 470/260;
  transform: translateX(-50%);
  container-type: inline-size
}
.sc-stage>* {
  position: absolute;
  inset: 0
}
.sc-layer {
  transform: translateY(calc(var(--sy, 0) * var(--depth) * -1cqw))
}
.sc-fade {
  opacity: .6
}
.sc-stage i,
.sc-stage b,
.sc-stage span,
.sc-stage div {
  position: absolute;
  display: block
}
.sc-town,
.sc-grass {
  inset: 0
}
/* Sky */
.sc-sun {
  left: 55cqw;
  bottom: 20cqw;
  width: 28.5cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #d7f0f4 58%, #d7f0f400 70%);
  animation: sc-glow 6s ease-in-out infinite alternate
}
.sc-cloud {
  height: 3.2cqw;
  border-radius: 3cqw;
  background: #e9f6f8;
  animation: sc-drift var(--t, 90s) linear infinite;
  animation-delay: var(--d, 0s)
}
.sc-cloud::before,
.sc-cloud::after {
  content: '';
  position: absolute;
  bottom: 40%;
  border-radius: 50%;
  background: inherit
}
.sc-cloud::before {
  left: 18%;
  width: 34%;
  aspect-ratio: 1
}
.sc-cloud::after {
  left: 45%;
  width: 42%;
  aspect-ratio: 1
}
/* Hills and the back row of homes */
.sc-hill {
  border-radius: 50% 50% 0 0;
  background: #cfe9ed
}
.sc-hill.h2 {
  background: #c2e3e8
}
.sc-town i {
  bottom: 7cqw;
  width: var(--w);
  height: var(--h);
  left: var(--x);
  background: #b9dde3
}
.sc-town i::before {
  content: '';
  position: absolute;
  left: -12%;
  right: -12%;
  bottom: 100%;
  height: calc(var(--w) * .55);
  background: #a2d1d9;
  clip-path: polygon(50% 0, 100% 100%, 0 100%)
}
.sc-town i::after {
  content: '';
  position: absolute;
  left: 30%;
  top: 30%;
  width: 22%;
  height: 24%;
  background: #ffefc2;
  opacity: var(--lit, 0);
  box-shadow: 0 0 .8cqw #ffe39a;
  transition: opacity 1.2s
}
/* Ground and path */
.sc-ground {
  left: -5cqw;
  right: -5cqw;
  bottom: -14cqw;
  height: 23cqw;
  border-radius: 50% 50% 0 0/38% 38% 0 0;
  background: #c9e7e5
}
.sc-path {
  left: 57cqw;
  bottom: -6cqw;
  width: 52cqw;
  height: 13cqw;
  border-top: 4.2cqw solid #eef8f7;
  border-radius: 60% 0 0 0/100% 0 0 0
}
/* Main houses */
.sc-house {
  left: var(--x);
  bottom: 6cqw;
  width: var(--w);
  height: var(--h);
  background: var(--wall)
}
.sc-roof {
  left: -7%;
  right: -7%;
  bottom: 100%;
  height: var(--rh);
  background: var(--roof);
  clip-path: polygon(50% 0, 100% 100%, 92% 100%, 50% 16%, 8% 100%, 0 100%)
}
.sc-attic {
  left: 4%;
  right: 4%;
  bottom: 100%;
  height: calc(var(--rh) * .78);
  background: var(--wall);
  clip-path: polygon(50% 0, 100% 100%, 0 100%)
}
.sc-chimney {
  right: 16%;
  bottom: calc(100% + var(--rh) * .3);
  width: 7%;
  height: calc(var(--rh) * .55);
  background: var(--roof)
}
.sc-smoke {
  left: 10%;
  bottom: 100%;
  width: 120%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e4f3f6;
  animation: sc-smoke 5.5s ease-out infinite;
  animation-delay: var(--d)
}
.sc-win {
  width: 21%;
  height: 24%;
  top: 18%;
  left: var(--x);
  background: var(--glass);
  transition: background 1.4s, box-shadow 1.4s
}
.sc-win::before,
.sc-win::after {
  content: '';
  position: absolute;
  background: var(--wall);
  opacity: .9
}
.sc-win::before {
  left: 47%;
  width: 6%;
  top: 0;
  bottom: 0
}
.sc-win::after {
  top: 47%;
  height: 6%;
  left: 0;
  right: 0
}
.sc-win.lit {
  background: #ffefc2;
  box-shadow: 0 0 1.4cqw #ffe39acc
}
.sc-door {
  left: 40%;
  bottom: 0;
  width: 20%;
  height: 44%;
  border-radius: 2cqw 2cqw 0 0;
  background: var(--door)
}
.sc-door::after {
  content: '';
  position: absolute;
  right: 18%;
  top: 52%;
  width: .5cqw;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #e9f6f8
}
/* Trees, bushes, fences */
.sc-tree {
  left: var(--x);
  bottom: 6.3cqw;
  width: var(--w);
  height: var(--h);
  transform-origin: 50% 100%;
  animation: sc-sway var(--t, 5s) ease-in-out infinite alternate;
  animation-delay: var(--d, 0s)
}
.sc-tree::before {
  content: '';
  position: absolute;
  left: 47%;
  width: 6%;
  bottom: 0;
  height: 42%;
  background: #5f98a8
}
.sc-crown {
  left: 0;
  right: 0;
  top: 0;
  height: 72%;
  border-radius: 50%;
  background: var(--leaf, #9ccfd9)
}
.sc-crown.small {
  left: 55%;
  right: -30%;
  top: 38%;
  height: 42%;
  background: #b4dce3
}
.sc-bush {
  bottom: 5.7cqw;
  left: var(--x);
  width: var(--w);
  height: calc(var(--w) * .45);
  border-radius: 50% 50% 40% 40%;
  background: #8ec7d2;
  transform-origin: 50% 100%;
  animation: sc-bush 3.4s ease-in-out infinite alternate;
  animation-delay: var(--d, 0s)
}
.sc-fence {
  left: var(--x);
  bottom: 7cqw;
  width: 5.6cqw;
  height: 4.2cqw;
  background: repeating-linear-gradient(90deg, #f4fbfb 0 .85cqw, transparent .85cqw 1.9cqw)
}
.sc-fence::after {
  content: '';
  position: absolute;
  left: -.3cqw;
  right: -.3cqw;
  top: 35%;
  height: .8cqw;
  background: #f4fbfb
}
.sc-blade {
  bottom: 6.4cqw;
  left: var(--x);
  width: .36cqw;
  height: var(--h);
  border-radius: .4cqw .4cqw 0 0;
  background: #78bccb;
  transform-origin: 50% 100%;
  transform: rotate(var(--r));
  animation: sc-blade var(--t) ease-in-out infinite alternate;
  animation-delay: var(--d)
}
/* Birds: a small flock crossing the sky, flapping */
.sc-bird {
  left: -4cqw;
  bottom: var(--y);
  width: 2.6cqw;
  height: 1.2cqw;
  animation: sc-fly var(--t, 16s) linear infinite;
  animation-delay: var(--d, 0s)
}
.sc-bird b {
  inset: 0;
  animation: sc-bob 1.4s ease-in-out infinite alternate
}
/* Same bird as the front page: body, head and two wings that flap. */
.sc-bird svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible
}
.sc-bird :is(.wl, .wr) {
  transform-box: fill-box;
  animation: wing-l 1.1s ease-in-out infinite
}
.sc-bird .wl {
  transform-origin: right bottom
}
.sc-bird .wr {
  transform-origin: left bottom;
  animation-name: wing-r
}
.sc-bird:nth-child(2) :is(.wl, .wr) {
  animation-duration: 1.3s;
  animation-delay: -.4s
}
.sc-bird:nth-child(3) :is(.wl, .wr) {
  animation-duration: .95s;
  animation-delay: -.7s
}
.sc-bird:nth-child(4) :is(.wl, .wr) {
  animation-duration: 1.2s;
  animation-delay: -.2s
}
@keyframes wing-l {
  0%,
  60%,
  100% {
    transform: rotate(0)
  }
  15%,
  45% {
    transform: rotate(-55deg)
  }
  30% {
    transform: rotate(5deg)
  }
  75%,
  90% {
    transform: rotate(-18deg)
  }
}
@keyframes wing-r {
  0%,
  60%,
  100% {
    transform: rotate(0)
  }
  15%,
  45% {
    transform: rotate(55deg)
  }
  30% {
    transform: rotate(-5deg)
  }
  75%,
  90% {
    transform: rotate(18deg)
  }
}
@keyframes sc-glow {
  to {
    transform: scale(1.04);
    filter: brightness(1.04)
  }
}
@keyframes sc-drift {
  from {
    transform: translateX(-30cqw)
  }
  to {
    transform: translateX(130cqw)
  }
}
@keyframes sc-smoke {
  0% {
    transform: translate(0, 0) scale(.4);
    opacity: 0
  }
  15% {
    opacity: .85
  }
  100% {
    transform: translate(3cqw, -9cqw) scale(2.2);
    opacity: 0
  }
}
@keyframes sc-sway {
  from {
    transform: rotate(-2.5deg)
  }
  to {
    transform: rotate(2.5deg)
  }
}
@keyframes sc-bush {
  from {
    transform: skewX(-4deg)
  }
  to {
    transform: skewX(4deg)
  }
}
@keyframes sc-blade {
  from {
    transform: rotate(calc(var(--r) - 12deg))
  }
  to {
    transform: rotate(calc(var(--r) + 12deg))
  }
}
@keyframes sc-fly {
  0% {
    transform: translateX(0);
    opacity: 0
  }
  8% {
    opacity: 1
  }
  72% {
    opacity: 1
  }
  88% {
    opacity: 0
  }
  100% {
    transform: translateX(112cqw);
    opacity: 0
  }
}
/* fade in from the left, ease out before the right-hand panels */
@keyframes sc-bob {
  from {
    transform: translateY(-.6cqw)
  }
  to {
    transform: translateY(.6cqw)
  }
}
/* Nothing on the page can be highlighted (text, icons, images); only form fields can. */
img,
svg {
  -webkit-user-drag: none
}
:is(input, textarea, [contenteditable]) {
  -webkit-user-select: text;
  user-select: text
}
/* Except what people need to copy: chat answers, phone numbers and addresses. */
:is(.msg, .chat-card-address, .shelter-where, a[href^="tel:"], .housing-location, .opt-card .meta) {
  -webkit-user-select: text;
  user-select: text
}

/* Hero "ping": a perfect circle that glows orange like a notification, sitting just left of the first line. */
@keyframes ch-ping {
  0% {
    box-shadow: 0 0 0 0 #ff8a1fb3
  }
  70% {
    box-shadow: 0 0 0 9px #ff8a1f00
  }
  100% {
    box-shadow: 0 0 0 0 #ff8a1f00
  }
}
.hero .eyebrow-dot {
  flex: none;
  width: 9px;
  height: 9px;
  aspect-ratio: 1;
  border-radius: 50%;
  align-self: center;
  margin: 0 .35em 0 0;
  background: #ff8a1f !important;
  box-shadow: 0 0 6px 1px #ff8a1f99;
  animation: ch-ping 1.8s ease-out infinite
}

/* Google Sans everywhere (code and the repo file list stay monospace). */
html body,
body :not(code):not(pre):not(kbd):not(.repo-tree):not(.repo-tree *):not(svg):not(svg *) {
  font-family: 'Google Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important
}

/* New logo (drawn by backend/make_logo.py): the image carries its own rounded square. */
.brand-mark {
  width: 40px !important;
  height: 40px !important;
  background: none !important;
  border-radius: 12px;
  box-shadow: 0 4px 14px #23408f40;
  overflow: visible
}
.brand-mark img {
  width: 100%;
  height: 100%;
  display: block
}
@media(max-width:560px) {
  .brand-mark {
    width: 34px !important;
    height: 34px !important
  }
}

/* Default size: the site reads best a bit larger, like 125% browser zoom, on desktop screens. Smaller
       laptops get a gentler step and phones/tablets stay at 100% so layouts never get cramped. */
@media (min-width: 1100px) {
  html {
    zoom: 1.1
  }
  #listing-map,
  #walk-map {
    zoom: calc(1/1.1);
    width: auto
  }
  #listing-map {
    height: 330px
  }
}
@media (min-width: 1400px) {
  html {
    zoom: 1.25
  }
  #listing-map,
  #walk-map {
    zoom: .8;
    width: auto
  }
  #listing-map {
    height: 375px
  }
}
/* Google Maps can't draw inside a zoomed page, so the map boxes undo the zoom. width:auto keeps them exactly as wide as their column
       (a percentage width doesn't shrink with zoom in current Chrome, so 110%/125% hung off the right edge and the page swiped sideways). */
html,
body {
  overflow-x: clip
}
/* never swipe sideways */
/* "Need help now?" in the navy header: a white glass pill with a warm orange icon, like the front page's area chip. */
.site-header .header-links .emergency-link {
  background: #ffffff17 !important;
  border: 1px solid #ffffff42 !important;
  border-radius: 999px;
  color: #fff !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 8px 15px;
  font-weight: 600;
  transition: background .15s, border-color .15s
}
.site-header .header-links .emergency-link svg {
  color: #ffb15c
}
.site-header .header-links .emergency-link:hover {
  background: #ffffff2b !important;
  border-color: #ffffff73 !important;
  text-decoration: none
}
/* Listing cards, condensed: status with Save/Share icons on top, tighter text, links as small pills. */
.card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px
}
.card-top .housing-status {
  margin: 0
}
.card-tools {
  display: flex;
  gap: 6px;
  flex: none
}
.card-tools :is(.favorite-btn, .share-btn) {
  width: 36px;
  height: 36px;
  min-height: 0;
  padding: 0;
  justify-content: center;
  border-radius: 50%;
  background: #ffffffd9;
  border: 1px solid var(--line)
}
.card-tools :is(.favorite-btn, .share-btn) svg {
  width: 17px;
  height: 17px
}
.card-tools .share-btn:hover {
  border-color: #6f8fd6;
  background: #fff;
  color: var(--blue)
}
.housing-card h3 {
  margin-bottom: 3px
}
.housing-card .housing-category {
  margin: 0 0 4px
}
.housing-card .housing-location {
  margin-bottom: 2px
}
.housing-card .housing-rent {
  margin: 10px 0 4px
}
.housing-card .housing-plan {
  margin-bottom: 3px;
  font-size: 12.5px
}
.housing-card .housing-features {
  margin: 6px 0 10px
}
.housing-actions {
  gap: 8px;
  margin-top: 12px
}
.housing-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #ffffffd9;
  color: var(--ink);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 600
}
.housing-actions a:hover {
  border-color: #6f8fd6;
  color: var(--blue);
  background: #fff
}
.housing-reviewed {
  margin-top: 10px
}
/* Pill toggles (map controls, quick picks, list/map switch): one consistent set across the site.
       Selected is the site's navy pill; the rest are white pills with the site border. */
.map-tabs {
  gap: 8px;
  margin-bottom: 14px;
  align-items: center
}
:is(.map-tab, .map-hood, .budget-shortcut button, .walk-toggle button) {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 2px 8px #23408f0f;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s
}
:is(.map-tab, .map-hood, .budget-shortcut button, .walk-toggle button):hover {
  border-color: #9db2e3;
  background: #f6f9ff
}
:is(.map-tab, .budget-shortcut button, .walk-toggle button)[aria-pressed=true] {
  background: #14203f;
  border-color: #14203f;
  color: #fff;
  box-shadow: 0 6px 16px #14203f2e
}
.map-hood {
  height: 40px;
  max-width: 200px;
  padding-right: 38px;
  -webkit-appearance: none;
  appearance: none;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%2314203f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m1 1.5 5 5 5-5'/%3E%3C/svg%3E") no-repeat right 14px center
}
.map-tab.near-me svg {
  color: #2f55b5
}
/* Footer: brand and page links on one row, the team credit underneath. */
.cl-footer {
  border-top: 1px solid var(--line);
  padding: 34px 0 40px;
  margin-top: 24px;
  color: var(--muted)
}
.cl-footer-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap
}
.cl-footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.4px
}
.cl-footer-brand img {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  box-shadow: 0 3px 10px #23408f33
}
.cl-footer-brand span {
  color: #8d99ad;
  margin-left: -8px
}
.cl-footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}
.cl-footer-links a {
  padding: 7px 12px;
  border-radius: 8px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background .15s, color .15s
}
.cl-footer-links a:hover {
  color: #2f55b5;
  background: #e2eafb
}
.cl-footer-credit {
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid #d2dcf099;
  font-size: 13.5px;
  line-height: 1.6
}
.cl-footer-credit b {
  color: var(--ink);
  font-weight: 600
}
@media (max-width: 640px) {
  .cl-footer-top {
    flex-direction: column;
    align-items: center;
    text-align: center
  }
  .cl-footer-links {
    justify-content: center
  }
  .cl-footer-credit {
    text-align: center
  }
}
.cl-footer {
  text-align: left
}
.cl-footer-note {
  margin: 18px auto 0;
  padding-top: 18px;
  border-top: 1px solid #d2dcf099;
  font-size: 13.5px;
  line-height: 1.6
}
.cl-footer-note+.cl-footer-credit {
  margin-top: 6px;
  padding-top: 0;
  border-top: 0
}
.cl-footer-links a[aria-current="page"] {
  color: #2f55b5;
  background: #e2eafb
}
@media (max-width: 640px) {
  .cl-footer-note {
    text-align: center
  }
}
/* Listing cards hug their content: no stretched rows, no empty gap pushed above the details. */
.listings-grid {
  align-items: start
}
.housing-card {
  height: auto
}
.housing-card :is(details, .floor-plans-details) {
  margin-top: 6px
}
.housing-card .eligibility-details {
  padding-top: 10px
}
.housing-card .eligibility-details summary,
.floor-plans-details>summary {
  min-height: 32px
}
/* Listing cards without extra white space: a short photo strip that fills edge to edge (no empty bands),
       tighter padding and gaps in the details panel. */
.housing-card.has-photo::before {
  aspect-ratio: 16/9;
  max-height: 200px;
  background: var(--card-photo) center/cover no-repeat, #edf2f8
}
.housing-card.has-photo .card-glass {
  padding: 16px
}
.card-top {
  margin-bottom: 10px
}
.housing-card .housing-features {
  margin: 4px 0 6px
}
.housing-card .housing-actions {
  margin-top: 8px
}
.housing-card .housing-reviewed {
  margin-top: 6px
}
.share-toast {
  transition: opacity .3s, transform .3s
}
/* Active-filter summary above results, and the card's next-step button. */
.filter-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 16px 0 4px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff
}
.filter-summary-text {
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
  flex: 1;
  min-width: 200px
}
.filter-reset {
  min-height: 36px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer
}
.filter-reset:hover:not(:disabled) {
  border-color: #9db2e3;
  background: #f6f9ff
}
.filter-reset:disabled {
  opacity: .5;
  cursor: default
}
.housing-card .next-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #14203f;
  color: #fff !important;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  margin-bottom: 2px
}
.housing-card .next-step:hover {
  background: #23408f
}
.housing-card .next-step:focus-visible {
  outline: 3px solid #315fbd;
  outline-offset: 3px
}
/* Tools page: glass stays on the two outer panels only (the tools area and the hero map). Everything inside
       them is solid white with the site's light border and soft shadow, matching the home, Google Cloud and Resources pages. */
#tools :is(.tool-panel, .tab, .guidance-card, .assistant, .sort-chat, .chat-card, .opt-card, .walk-card, .result, .upload-box, .find-checks, .browse-filters,
  .catalog-notice, .browse-message:not(:empty), .walk-status:not(:empty), .map-legend, .map-status:not(:empty), .web-results li, .emergency-card, .hero-copy,
  .map-tab, .map-hood, .budget-shortcut button, .walk-toggle button, .filter-summary, .share-toast),
.listings-section :is(.housing-card:not(.has-photo), .catalog-notice, .browse-filters, .browse-message:not(:empty), .filter-summary, .listing-tabs, .more-options, .map-legend, .map-status:not(:empty), .sort-chat, .chat-card),
.listings-section .more-listings,
.listings-section .show-programs {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid #d2dcf0 !important;
  box-shadow: 0 4px 14px #14203f0f !important
}
#tools .tab[aria-selected=true],
#tools .map-tab[aria-pressed=true],
.listings-section .budget-shortcut button[aria-pressed=true] {
  background: #14203f !important;
  border-color: #14203f !important;
  color: #fff !important
}
#tools .tab[aria-selected=true] * {
  color: inherit
}
.listings-section .housing-card.has-photo .card-glass {
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: none !important;
  border: 0 !important
}
/* "View" on listing photos: a translucent navy glass pill so the photo shows through. */
.housing-card.has-photo .property-photo {
  background: linear-gradient(140deg, #14203f70, #14203f4d) !important;
  border-color: #ffffff5c !important;
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6)
}
.housing-card.has-photo .property-photo:hover {
  background: linear-gradient(140deg, #14203fa6, #14203f8c) !important;
  border-color: #ffffff8c !important
}
/* "Look for shelters or hotels tonight in:" on the tools page: the site's muted slate text and white pills with navy text, instead of brown and amber. */
#tools .emergency-card .tonight-links span {
  color: #4b5a7a;
  font-size: 13.5px;
  font-weight: 600
}
#tools .emergency-card .tonight-links button {
  background: #fff;
  border: 1px solid #d2dcf0;
  color: #14203f;
  font-weight: 600;
  box-shadow: 0 2px 8px #23408f0f
}
#tools .emergency-card .tonight-links button:hover {
  background: #f6f9ff;
  border-color: #9db2e3
}