/* Readability pass, loaded after base.css so it wins: headings, key facts, contrast, buttons.
   Used by the tools page (/app), frontend/index.html; loaded in the order the page lists it. */

/* Readability pass, loaded last so it wins over the layers above: clear section headings, fewer nested boxes,
       bigger key facts (rent, availability, phone), text at AA or better, one button system, and liquid glass
       (blur, a light rim, a soft glare) on a few key surfaces, with solid fallbacks. */
:root {
  --muted: #3d4a66;
  --line: #d3ddf1;
  --field-line: #7d8bab;
  --pill-line: #c3cfe8;
  --glare: radial-gradient(130% 75% at 12% 0%, #ffffffb3 0%, #ffffff00 58%);
  --rim: inset 0 1px 0 #fff, inset 0 0 0 1px #ffffff8c, inset 0 -1px 0 #ffffff59;
  --lift: 0 1px 2px #0b14330d, 0 16px 40px #0b14331f
}
.housing-card.has-photo .card-glass {
  --muted: #3d4a66
}
:is(input, textarea)::placeholder {
  color: #5b6680
}
:focus-visible {
  outline-color: #c26a00
}
/* amber that still reaches 3:1 on white and on the page blue */

/* Hero: two glass cards side by side (the words, the map), each with a soft glare from the top left. */
.hero {
  align-items: stretch
}
.hero .hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--glare), var(--glass-bg) !important;
  box-shadow: var(--rim), var(--lift)
}
.hero-copy>p {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted)
}
.hero-tags {
  font-size: 13px;
  color: var(--muted)
}
.browse-link {
  min-height: 46px;
  padding: 11px 22px;
  margin-top: 22px;
  border: 0;
  border-radius: 999px;
  background: #23408f;
  color: #fff;
  font-size: 14.5px;
  box-shadow: inset 0 1px 0 #ffffff2e, 0 6px 16px #23408f33
}
.browse-link:hover {
  background: #1a3170
}
.hero-map-wrap {
  padding: 12px;
  border-radius: 26px;
  background: var(--glare), var(--glass-bg);
  border: 1px solid var(--glass-border);
  box-shadow: var(--rim), var(--lift);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur)
}
.hero-map-wrap .map-tabs {
  margin-bottom: 10px
}
.hero-map-wrap .map-hood {
  flex: 1 1 130px;
  max-width: none
}
.hero-map-wrap .hero-map {
  border-radius: 16px;
  border-color: #c9d5ec
}
.hero-map-wrap .map-meta {
  margin-top: 8px
}
.hero-map-wrap .map-status:not(:empty) {
  background: none !important;
  border: 0 !important;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  padding: 2px 4px
}
.map-meta .map-status {
  font-size: 13.5px;
  color: var(--muted)
}

/* The two big sections: more air, and a heading that reads first, with an icon tile in the site blue. */
#tools,
.listings-section {
  background: var(--glare), var(--glass-bg);
  box-shadow: var(--rim), var(--lift);
  padding: 32px;
  border-radius: 28px
}
.listings-section {
  margin-top: 36px
}
:is(#tools, .listings-section, .listings-drawer)>.section-heading {
  align-items: center;
  margin-bottom: 24px;
  padding: 0 !important
}
:is(#tools, .listings-section, .listings-drawer)>.section-heading h2 {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(24px, 2.3vw, 30px);
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.7px;
  color: var(--ink)
}
.catalog-label {
  padding: 6px 12px;
  border-radius: 999px;
  background: #e2eafb;
  color: #23408f;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .08em
}

/* "What Do You Need?": the panel sits flat on the section glass, so the chat is the one card. Its heading stays for
       screen readers (it names the tab panel) but is no longer a second title under the section's. */
#tools .tool-panel {
  background: none !important;
  border: 0 !important;
  box-shadow: none;
  padding: 0
}
#tools .panel-heading {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap
}
#tools .assistant {
  margin-top: 0;
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 22px;
  box-shadow: 0 1px 2px #0b14330a, 0 12px 30px #0b143314;
  backdrop-filter: none;
  -webkit-backdrop-filter: none
}
.assistant-head {
  padding: 16px 20px;
  background: linear-gradient(180deg, #f3f6fe, #fff)
}
.assistant-head strong {
  font-size: 16.5px;
  font-weight: 700
}
.assistant-head span {
  font-size: 13px;
  color: var(--muted)
}
.assistant-log {
  padding: 18px 20px
}
.msg {
  font-size: 15px
}
.assistant-chips {
  padding: 0 20px 14px
}
.assistant-form {
  padding: 14px 20px 18px;
  align-items: end
}
.assistant-form textarea {
  min-height: 48px;
  border-radius: 14px;
  border-color: var(--field-line);
  font-size: 15px
}
/* "Or filter yourself" divides the chat from the form. */
.find-or {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted)
}
.find-or::before,
.find-or::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line)
}
#find-form :is(.input-row, .nearby-grid) label,
#find-form label[for=situation],
.browse-filters label {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink);
  margin-bottom: 7px
}
.input-wrapper,
#find-form textarea,
.find-select,
.browse-filters :is(input, select) {
  border-color: var(--field-line);
  border-radius: 12px
}
.input-wrapper {
  min-height: 48px;
  background: #fff
}
.input-wrapper input,
#find-form textarea,
.find-select,
.browse-filters :is(input, select) {
  font-size: 15px
}
.find-select {
  min-height: 48px
}
.input-wrapper span {
  font-size: 13px;
  color: var(--muted)
}
.urgent-check {
  display: inline-flex;
  margin: 2px 0 16px;
  padding: 10px 14px;
  border-radius: 12px;
  background: #fdf3e3;
  border: 1px solid #efd7ae;
  color: #6b4710;
  font-size: 14px
}
.more-options {
  border-radius: 14px;
  border-color: var(--line);
  background: #ffffffb8
}
.more-options>summary {
  font-size: 15px;
  min-height: 48px
}
.nearby-essentials {
  border: 0;
  padding: 0;
  margin: 8px 0 18px
}
.nearby-essentials legend {
  font-size: 15px;
  padding: 0;
  margin-bottom: 4px
}
.find-checks label,
.nearby-soft,
.walk-pref {
  font-size: 14px
}
.find-checks legend {
  font-size: 14px
}
.textarea-hint,
.examples,
.privacy-note {
  font-size: 13px;
  color: var(--muted)
}
.form-bottom {
  border-top: 0;
  padding-top: 0;
  margin-top: 22px
}
/* Sidebar: steps on light glass with solid numbers; the emergency card stays warm, as warm glass. */
#tools .guidance-card {
  background: var(--glare), var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  box-shadow: var(--rim), 0 8px 24px #0b143314;
  border-radius: 22px
}
.guidance-card h3 {
  font-size: 18px;
  font-weight: 700
}
.steps {
  gap: 14px
}
.steps li {
  align-items: center
}
.steps .step-number {
  width: 28px;
  height: 28px;
  background: #23408f;
  color: #fff;
  font-size: 13.5px;
  font-weight: 700
}
.steps strong {
  font-size: 15px;
  font-weight: 600
}
.emergency-card {
  border-radius: 22px;
  background: var(--glare), linear-gradient(140deg, #fdf5e8f2, #fbefdad1) !important;
  border-color: #ecd5ad !important
}
.emergency-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: #5a3a0e
}
.emergency-card p {
  margin: 8px 0 14px;
  font-size: 15px;
  color: #4f3713
}
.call-links {
  flex-wrap: wrap
}
.call-links a {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  background: #23408f;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  box-shadow: 0 6px 14px #23408f2e
}
.call-links a:hover {
  background: #1a3170
}
.call-links a[href="tel:911"] {
  background: #b42318;
  box-shadow: 0 6px 14px #b423182e
}
.call-links a[href="tel:911"]:hover {
  background: #912018
}
.tonight-links span {
  font-size: 13.5px;
  color: #5a3a0e
}
/* Hotline buttons under a crisis answer in the chat. */
.chat-next {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 12px
}
.chat-next button {
  min-height: 40px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid #c9d5ec;
  background: #fff;
  color: #14203f;
  font-size: 14px;
  font-weight: 650;
  cursor: pointer
}
.chat-next button:hover {
  background: #eef3fd;
  border-color: #6f8fd6
}
.chat-next button:focus-visible {
  outline: 3px solid #f2b84b;
  outline-offset: 2px
}
.field-error {
  margin: 6px 2px 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #b42318
}
.input-wrapper:has([aria-invalid="true"]),
select[aria-invalid="true"] {
  border-color: #b42318 !important;
  box-shadow: 0 0 0 3px #b4231826
}
.chat-lines {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 10px
}
.chat-lines a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #23408f;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none
}
.chat-lines a:hover {
  background: #1a3170
}
.chat-lines a.urgent {
  background: #b42318
}
.chat-lines a.urgent:hover {
  background: #912018
}
.chat-lines a:focus-visible {
  outline: 3px solid #f2b84b;
  outline-offset: 2px
}

/* Listings: the notice reads as a note, then the switch, quick picks, filters, Gemma's sort bar and the cards. */
#listings .catalog-notice {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 22px;
  padding: 12px 16px !important;
  border: 0 !important;
  border-radius: 14px;
  background: #e6edfb !important;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink)
}
#listings .catalog-notice::before {
  content: '';
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2323408f' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v6M12 7.6v.4'/%3E%3C/svg%3E") center/contain no-repeat
}
.listing-tabs {
  background: #e2e9f7
}
.listing-tabs button {
  color: #2c3a5a;
  font-size: 14.5px
}
.listings-section .budget-shortcut {
  gap: 8px 10px
}
.quick-label {
  font-size: 12.5px
}
.more-filters>summary {
  font-size: 15px
}
.more-filters-note {
  font-size: 13.5px
}
/* Gemma's sort bar: the clearest glass on the page. */
.sort-chat {
  margin: 22px 0 10px;
  padding: 12px;
  border-radius: 26px;
  background: var(--glare), linear-gradient(140deg, #ffffffd9, #eef3ffb3);
  border: 1px solid #ffffffe6;
  box-shadow: var(--rim), 0 12px 32px #23408f1f
}
.sort-form input {
  min-height: 48px;
  border-color: var(--field-line);
  font-size: 15px
}
.sort-reply {
  font-size: 14.5px
}
.sort-reply>b {
  color: #23408f
}
.listings-section .browse-hint {
  margin-top: 12px;
  padding: 0 !important;
  font-size: 13.5px;
  color: var(--muted)
}
.listings-section .browse-message:not([data-state=error]) {
  margin: 10px 0 18px;
  padding: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink)
}

/* Listing cards: name, rent and availability read first; the fine print stays quieter. */
.listings-grid {
  gap: 20px
}
.housing-card.has-photo,
.housing-card:not(.has-photo) {
  border-radius: 22px;
  border-color: #d6dff0;
  box-shadow: 0 1px 2px #0b14330d, 0 12px 30px #0b143317
}
.listings-grid .housing-card[data-gemma-rank] {
  box-shadow: 0 0 0 3px #2f55b5, 0 14px 34px #0b143326
}
.housing-card.has-photo .card-glass {
  padding: 18px 20px 20px
}
.housing-card .housing-status {
  gap: 7px;
  align-items: flex-start;
  padding: 4px 11px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  background: #e2eafb;
  color: #1f3a85
}
.housing-card .housing-status::before {
  content: '';
  width: 7px;
  height: 7px;
  margin-top: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: none
}
.housing-card .housing-status:is([data-status=available_now], [data-status=advertised_vacancy]) {
  background: #dcf3e3;
  color: #17552c
}
.housing-card .housing-status[data-status=waitlist_open] {
  background: #fcefd6;
  color: #6b4710
}
.housing-card .housing-status:is([data-status=contact_for_availability], [data-status=""], [data-status=mixed]) {
  background: #eceff5;
  color: #374462
}
.housing-card h3 {
  font-size: 19px;
  line-height: 1.35;
  font-weight: 700;
  margin-bottom: 4px
}
.housing-card .housing-category {
  font-size: 13px;
  color: var(--muted)
}
.housing-card .housing-location {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink);
  margin: 6px 0 2px
}
.housing-card .housing-location::before {
  content: '';
  flex: none;
  width: 15px;
  height: 15px;
  margin-top: 2px;
  background: #2f55b5;
  -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.2'%3E%3Cpath d='M20 10c0 6-8 11-8 11S4 16 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%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.2'%3E%3Cpath d='M20 10c0 6-8 11-8 11S4 16 4 10a8 8 0 1 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E") center/contain no-repeat
}
.housing-card .housing-rent {
  margin: 14px 0 8px;
  font-size: 25px;
  line-height: 1.2;
  font-weight: 700;
  letter-spacing: -.6px;
  color: var(--ink)
}
.housing-card .housing-rent small {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  color: var(--muted)
}
.housing-card .housing-rent:not(:has(small)) {
  font-size: 17px;
  letter-spacing: -.2px
}
/* "Rent: confirm with provider" */
.housing-card .housing-plan {
  font-size: 14px;
  line-height: 1.55;
  color: #28344f
}
.housing-card .housing-features {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--muted)
}
.housing-card .housing-age {
  font-size: 13.5px
}
.housing-card summary {
  font-size: 14px;
  font-weight: 650;
  color: var(--ink)
}
.housing-card details p,
.housing-card .eligibility-item p {
  font-size: 13.5px
}
.eligibility-item h4 {
  font-size: 12.5px
}
.housing-card .housing-reviewed {
  font-size: 12.5px;
  color: var(--muted)
}
.card-tools :is(.favorite-btn, .share-btn) {
  width: 40px;
  height: 40px;
  border-color: var(--pill-line);
  background: #fffffff2
}
.housing-actions a {
  min-height: 40px;
  padding: 8px 15px;
  border-color: var(--pill-line);
  background: #fff;
  font-size: 13.5px
}
.housing-actions a[href^="tel:"] {
  gap: 7px;
  padding-left: 13px;
  background: #23408f;
  border-color: #23408f;
  color: #fff
}
.housing-actions a[href^="tel:"]:hover {
  background: #1a3170;
  border-color: #1a3170;
  color: #fff
}
:is(.housing-actions, .opt-card) a[href^="tel:"]::before {
  content: '';
  flex: none;
  width: 14px;
  height: 14px;
  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.2' stroke-linejoin='round'%3E%3Cpath d='m7 3 4 5-3 3a14 14 0 0 0 5 5l3-3 5 4-2 4C11 22 2 13 3 5Z'/%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.2' stroke-linejoin='round'%3E%3Cpath d='m7 3 4 5-3 3a14 14 0 0 0 5 5l3-3 5 4-2 4C11 22 2 13 3 5Z'/%3E%3C/svg%3E") center/contain no-repeat
}
/* "View" over the photo: darkened liquid glass, like the "Link copied" toast, so it reads on any photo. */
.housing-card.has-photo .property-photo {
  padding: 8px 13px 8px 11px;
  font-size: 13px;
  color: #fff;
  border: 1px solid #ffffff4d;
  background: radial-gradient(120% 90% at 20% 0%, #ffffff29, #ffffff00 60%), linear-gradient(140deg, #14203f80, #14203f5c);
  box-shadow: inset 0 1px 0 #ffffff47, 0 8px 20px #0b143347;
  backdrop-filter: blur(12px) saturate(1.6);
  -webkit-backdrop-filter: blur(12px) saturate(1.6)
}
.housing-card.has-photo .property-photo:hover {
  background: radial-gradient(120% 90% at 20% 0%, #ffffff33, #ffffff00 60%), linear-gradient(140deg, #14203fb3, #14203f99);
  border-color: #ffffff80
}
/* Find results: solid cards to read from, and phone numbers as clear call buttons. */
#tools .opt-card {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 16px;
  box-shadow: 0 6px 18px #0b143310;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-size: 14px
}
.opt-card strong {
  font-size: 15.5px
}
.opt-card :is(.meta, details, .shelter-where, .hotel-note) {
  font-size: 13.5px
}
.opt-card .opt-links a[href^="tel:"] {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 15px
}
.shelter-call a {
  gap: 7px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #23408f;
  font-size: 15px
}
.shelter-call a:hover {
  background: #1a3170
}
.shelter-call small {
  font-size: 12.5px
}
.cost-tag {
  font-size: 12px
}

/* One button system. Primary: a solid navy pill. Chips: white pills with a navy-tinted border. */
:root .primary,
#show-more-listings,
.sort-form button {
  border: 0;
  border-radius: 999px;
  background: #23408f;
  color: #fff;
  font-weight: 650;
  box-shadow: inset 0 1px 0 #ffffff2e, 0 6px 16px #23408f33
}
:root .primary {
  min-height: 46px;
  padding: 11px 22px;
  font-size: 14.5px
}
:root .primary:hover,
#show-more-listings:hover,
.sort-form button:hover {
  background: #1a3170;
  filter: none;
  box-shadow: inset 0 1px 0 #ffffff2e, 0 8px 20px #23408f47
}
.sort-form button {
  min-height: 48px;
  font-size: 15px
}
#show-more-listings {
  min-height: 50px;
  padding: 12px 28px;
  font-size: 15.5px
}
:is(.assistant-chips button, .examples button, .sort-chip, .chat-cards-more, .show-programs) {
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid var(--pill-line);
  background: #fff;
  color: var(--ink);
  font-size: 13.5px;
  font-weight: 600
}
:is(.assistant-chips button, .examples button, .sort-chip, .chat-cards-more, .show-programs):hover {
  background: #eef3fd;
  border-color: #6f8fd6;
  color: #1a3170
}
:is(.map-tab, .map-hood, .budget-shortcut button, .walk-toggle button) {
  border-color: var(--pill-line)
}

@media(max-width:560px) {
  #tools,
  .listings-section {
    padding: 20px 16px;
    border-radius: 22px
  }
  :is(#tools, .listings-section, .listings-drawer)>.section-heading h2 {
    gap: 12px;
    font-size: 23px
  }
  :is(.assistant-head, .assistant-log, .assistant-chips, .assistant-form) {
    padding-left: 14px;
    padding-right: 14px
  }
  .hero-copy>p {
    font-size: 16px
  }
  .hero-map-wrap {
    padding: 10px;
    border-radius: 22px
  }
  .housing-card .housing-rent {
    font-size: 24px
  }
  .urgent-check {
    display: flex
  }
  .sort-avatar {
    display: none
  }
  /* the logo already sits in the header; the field needs the width */
}
/* Without blur (or when the system asks for less transparency) the glass turns solid so text never sits on a busy backdrop. */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  .housing-card.has-photo .property-photo {
    background: #14203ff0
  }
}
@media (prefers-reduced-transparency:reduce) {
  :root {
    --glass-bg: #fffffff7;
    --glare: linear-gradient(#fff0, #fff0)
  }
  .housing-card.has-photo .property-photo {
    background: #14203ff0
  }
}
/* One card style for the whole "What Do You Need?" area, matching the rest of the site: plain white cards with a soft
       border and the same corner radius. The only warm colour is the 911 button. Primary buttons use the site's navy. */
#tools .assistant,
#tools .guidance-card,
#tools .emergency-card,
#tools .more-options,
#tools .find-checks,
#tools .trust-banner {
  background: #fff !important;
  border: 1px solid var(--line) !important;
  border-radius: 18px !important;
  box-shadow: 0 1px 2px #0b14330a, 0 8px 24px #0b143310 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important
}
#tools .assistant-head {
  background: #f6f9ff
}
#tools .guidance-card,
#tools .emergency-card {
  padding: 22px
}
#tools .emergency-card h3 {
  color: var(--ink)
}
#tools .emergency-card p {
  color: var(--muted)
}
#tools .emergency-card .call-links a:first-child {
  background: #14203f;
  box-shadow: 0 6px 14px #14203f2e
}
#tools .emergency-card .call-links a:last-child {
  background: #a3343a;
  box-shadow: 0 6px 14px #a3343a2e
}
#tools .emergency-card .tonight-links button {
  background: #fff;
  border: 1px solid var(--line);
  color: var(--ink)
}
#tools .primary,
#tools .assistant-form .primary,
#tools .find-form .primary {
  background: #14203f !important;
  color: #fff;
  box-shadow: 0 6px 16px #14203f26
}
#tools .primary:hover {
  background: #23408f !important
}
#tools .assistant-chips button,
#tools .examples button {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink)
}
/* Simple /app: the chat first, the map beside "Need a Safe Place Tonight?", tonight results, then rentals in a drop-down. */
#tools.simple-tools {
  display: grid;
  gap: 22px;
  margin-top: 0;
  padding-top: 14px
}
/* the chat starts right under the header */
#tools.simple-tools .assistant {
  margin: 0
}
.tools-row {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr);
  gap: 22px;
  align-items: start
}
.tools-row .hero-map-wrap {
  min-width: 0
}
.tools-row .hero-map {
  height: 340px
}
.tools-results .find-results:not([hidden]) {
  margin-top: 0
}
@media(max-width:860px) {
  .tools-row {
    grid-template-columns: 1fr
  }
  .tools-row .hero-map {
    height: 280px
  }
}
#tools .assistant-privacy {
  margin: 0;
  padding: 10px 18px 14px;
  font-size: 13px;
  color: var(--muted)
}
#tools .assistant-privacy summary {
  width: fit-content;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: #9fb0d3;
  text-underline-offset: 3px
}
#tools .assistant-privacy summary:focus-visible {
  outline: 3px solid #f2b84b;
  outline-offset: 2px;
  border-radius: 4px
}
#tools .assistant-privacy p {
  margin: 8px 0 0;
  line-height: 1.55
}
.listings-drawer {
  margin: 0 0 22px;
  border: 1px solid #d6e0f2;
  border-radius: 18px;
  background: #fff
}
.listings-drawer>summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 12px 20px;
  list-style: none;
  cursor: pointer;
  border-radius: 18px
}
.listings-drawer>summary::-webkit-details-marker {
  display: none
}
.listings-drawer>summary:hover {
  background: #f6f9ff
}
.listings-drawer>summary:focus-visible {
  outline: 3px solid #f2b84b;
  outline-offset: 3px
}
.listings-drawer .drawer-title {
  font-size: 16px;
  font-weight: 700;
  color: #14203f
}
.listings-drawer .drawer-hint {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 999px;
  background: #14203f;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap
}
.listings-drawer .drawer-hint::before {
  content: 'Show'
}
.listings-drawer[open] .drawer-hint::before {
  content: 'Hide'
}
.listings-drawer .drawer-hint::after {
  content: '';
  width: 8px;
  height: 8px;
  border: solid currentColor;
  border-width: 0 2px 2px 0;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s
}
.listings-drawer[open] .drawer-hint::after {
  transform: translateY(2px) rotate(-135deg)
}
.listings-drawer .listings-body {
  padding: 6px 20px 20px
}
/* The chat looks like a messaging app (like popular chat apps): a roomy conversation, Gemma's messages beside its
       avatar, your messages on the right, and a rounded message box with the send button inside it. */
#tools .assistant {
  display: flex;
  flex-direction: column;
  border-radius: 24px !important;
  overflow: hidden
}
#tools .assistant-head {
  padding: 14px 20px;
  background: #fff !important;
  border-bottom: 1px solid #e6ebf5
}
#tools .assistant-head strong {
  font-size: 16px
}
#tools .assistant-status {
  display: flex;
  align-items: center;
  gap: 6px
}
#tools .assistant-status::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #1f9d55;
  box-shadow: 0 0 0 3px #1f9d5526
}
#tools.simple-tools .assistant-log {
  min-height: 260px;
  padding: 22px 22px 10px;
  gap: 14px;
  background: #fbfcff
}
#tools.simple-tools .assistant-log.chatting {
  height: min(560px, 68vh)
}
#tools .assistant-log .msg {
  font-size: 15px;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: 20px;
  max-width: min(78%, 640px)
}
#tools .assistant-log .msg.user {
  background: #23408f;
  color: #fff;
  border-bottom-right-radius: 6px
}
#tools .assistant-log .msg.bot {
  position: relative;
  margin-left: 44px;
  background: #eef2fa;
  color: #14203f;
  border-bottom-left-radius: 6px
}
#tools .assistant-log .msg.bot {
  justify-self: start
}
#tools .assistant-log .msg.bot::after {
  content: '';
  position: absolute;
  left: -44px;
  top: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff url(/logo.svg) center/22px no-repeat;
  box-shadow: 0 0 0 1px #dfe6f3, 0 2px 6px #0b143314
}
#tools .assistant-log .msg.bot[data-state=update] {
  background: transparent
}
#tools .assistant-log>:is(.chat-cards, .chat-hotels, .chat-lines, .chat-next, .msg-engine) {
  margin-left: 44px;
  width: auto;
  max-width: calc(100% - 44px)
}
#tools .assistant-log .msg-engine {
  margin-top: -8px
}
#tools .assistant-chips {
  padding: 4px 22px 10px;
  background: #fbfcff
}
#tools .assistant-chips button {
  border-radius: 14px;
  padding: 9px 14px;
  font-size: 13.5px;
  text-align: left
}
#tools .assistant-form {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  margin: 6px 18px 0;
  padding: 6px 6px 6px 18px;
  border: 1px solid #cfd8ea !important;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 2px 10px #0b143312;
  transition: border-color .15s, box-shadow .15s
}
#tools .assistant-form:focus-within {
  border-color: #6f8fd6 !important;
  box-shadow: 0 0 0 4px #2f55b51f, 0 2px 10px #0b143312
}
#tools .assistant-form textarea {
  flex: 1;
  min-height: 42px;
  max-height: 160px;
  padding: 10px 0;
  border: 0 !important;
  border-radius: 0;
  background: transparent;
  box-shadow: none !important;
  outline: none;
  resize: none;
  font-size: 15.5px;
  line-height: 1.45
}
#tools .assistant-form .send-button {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 0;
  padding: 0;
  border-radius: 50%
}
#tools .assistant-form .send-button:disabled {
  opacity: .45
}
#tools .assistant-privacy {
  padding: 8px 18px 14px;
  text-align: center;
  font-size: 12.5px
}
#tools .assistant-privacy summary {
  margin: 0 auto;
  text-decoration: none
}
#tools .assistant-privacy summary:hover {
  text-decoration: underline
}
#tools .assistant-privacy p {
  text-align: left
}
@media(max-width:560px) {
  #tools.simple-tools .assistant-log {
    min-height: 220px;
    padding: 16px 14px 8px
  }
  #tools .assistant-log .msg {
    max-width: 88%
  }
  /* Phones: Gemma's replies sit flush left, full width, without the avatar indent. */
  #tools .assistant-log .msg.bot {
    margin-left: 0;
    justify-self: start;
    max-width: 94%
  }
  #tools .assistant-log .msg.bot::after {
    display: none
  }
  #tools .assistant-log>:is(.chat-cards, .chat-hotels, .chat-lines, .chat-next, .msg-engine) {
    margin-left: 0;
    max-width: 100%
  }
  #tools .assistant-chips {
    padding: 4px 14px 10px
  }
  #tools .assistant-form {
    margin: 6px 12px 0
  }
}
/* Start screen (chat-app style): room at the top, "Hi, I'm Gemma." and the message box under it, examples below.
       Once there's a message, the conversation fills the window and the box sits under it. */
#tools .assistant-welcome {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 64px 24px 22px;
  text-align: center
}
#tools .assistant-welcome img {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  box-shadow: 0 6px 18px #23408f33;
  margin-bottom: 6px
}
#tools .assistant-welcome h2 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 700;
  letter-spacing: -.8px;
  color: #14203f
}
#tools .assistant-welcome p {
  margin: 0;
  font-size: 16px;
  color: var(--muted)
}
#tools .assistant:has(.assistant-log:not(:empty)) .assistant-welcome {
  display: none
}
#tools.simple-tools .assistant-log:empty {
  display: none
}
#tools .assistant-form,
#tools .assistant-chips,
#tools .assistant-privacy {
  width: min(760px, calc(100% - 36px));
  margin-left: auto;
  margin-right: auto
}
#tools .assistant-form {
  margin-top: 6px
}
#tools .assistant-chips {
  justify-content: center;
  padding: 14px 0 4px;
  background: none
}
#tools .assistant:has(.assistant-log:empty) .assistant-privacy {
  padding-bottom: 40px
}
@media(max-width:560px) {
  #tools .assistant-welcome {
    padding: 40px 16px 16px
  }
  #tools .assistant-form,
  #tools .assistant-chips,
  #tools .assistant-privacy {
    width: calc(100% - 24px)
  }
}
/* Gemma's sort box is the one that stands out in Explore Rentals: a blue rim and glow on a light blue fill. The
       Filters & Favorites bar and the "Showing..." summary sit back in a quiet grey. */
#listings .sort-chat {
  background: linear-gradient(135deg, #e7eeff, #f4f7ff) !important;
  border: 2px solid #3b63c4 !important;
  box-shadow: 0 12px 30px #2f55b533, 0 0 0 5px #3b63c414 !important
}
#listings .sort-chat .sort-reply strong,
#listings .sort-chat .sort-reply b {
  color: #23408f
}
#listings .listings-drawer,
#listings .filter-summary {
  background: #eceff5 !important;
  border: 1px solid #dde2eb !important;
  box-shadow: none !important
}
#listings .listings-drawer>summary:hover {
  background: #e3e7ef
}
#listings .listings-drawer .drawer-title {
  color: #3d4a66
}
#listings .listings-drawer .drawer-hint {
  background: #fff;
  color: #14203f;
  border: 1px solid #cdd5e3
}
#listings .listings-drawer[open] .listings-body {
  background: #fff;
  border-radius: 0 0 18px 18px;
  padding-top: 18px
}
#listings .filter-summary .filter-summary-text {
  color: #3d4a66
}
/* Slim bars: less space above and below the Show and Reset filters buttons. */
#listings .listings-drawer>summary {
  padding: 5px 6px 5px 18px
}
#listings .listings-drawer .drawer-hint {
  padding: 5px 12px;
  font-size: 13.5px
}
#listings .filter-summary {
  padding: 5px 6px 5px 16px
}
#listings .filter-reset {
  min-height: 30px;
  padding: 4px 12px
}
/* "View" on listing photos: near-transparent liquid glass (a light frost, a bright rim), white text with a soft shadow
       so it still reads on bright or dark photos. */
#listings .housing-card.has-photo .property-photo {
  background: linear-gradient(140deg, #ffffff2e, #ffffff0a 55%, #ffffff1f) !important;
  border: 1px solid #ffffff73 !important;
  color: #fff !important;
  text-shadow: 0 1px 3px #0b1433a6;
  box-shadow: inset 0 1px 0 #ffffff66, inset 0 -1px 0 #ffffff14, 0 6px 18px #0b143326 !important;
  backdrop-filter: blur(6px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.5) !important
}
#listings .housing-card.has-photo .property-photo:hover {
  background: linear-gradient(140deg, #ffffff4d, #ffffff1a 55%, #ffffff38) !important;
  border-color: #ffffffb3 !important
}
#listings .housing-card.has-photo .photo-expand-mark {
  filter: drop-shadow(0 1px 2px #0b1433a6)
}
/* Liquid glass on every button of the tools page. Dark glass for the main actions (send, Call 211, sort, update,
       show more, the chosen tab), red glass for 911, light glass for the rest. Calling a listing or a shelter stays a solid button. A soft glare along the top and a
       bright rim make each one read as glass; the blur lets the page show through. */
#tools :is(.send-button, .call-links a[href="tel:211"], .chat-lines a:not(.urgent), .map-tab[aria-pressed=true], .chat-q-continue),
#listings :is(#sort-send, #browse-form .primary, .housing-actions a.next-step:not([href^="tel:"]), #show-more-listings,
  .listing-tabs button[aria-pressed=true], .budget-shortcut button[aria-pressed=true]) {
  background: radial-gradient(120% 100% at 15% 0%, #ffffff38, #ffffff00 55%), linear-gradient(140deg, #14203fe6, #23408fbf) !important;
  border: 1px solid #ffffff33 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 #ffffff59, inset 0 -1px 0 #0b14334d, 0 8px 22px #14203f33 !important;
  backdrop-filter: blur(14px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6) !important
}
#tools .map-tab[data-region="blacksburg"][aria-pressed=true],
#listings #blacksburg-student-rooms[aria-pressed=true] {
  background: radial-gradient(120% 100% at 15% 0%, #ffffff38, #ffffff00 55%), linear-gradient(140deg, #5a0b28f2, #861f41d1) !important;
  border-color: #ffffff33 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 #ffffff59, 0 8px 22px #5a0b2840 !important
}
#tools .map-tab[data-region="blacksburg"][aria-pressed=true]:hover,
#listings #blacksburg-student-rooms[aria-pressed=true]:hover {
  background: radial-gradient(120% 100% at 15% 0%, #ffffff4d, #ffffff00 55%), linear-gradient(140deg, #4a0921f5, #6e1935e0) !important
}
#tools :is(.send-button, .call-links a[href="tel:211"], .chat-lines a:not(.urgent), .map-tab[aria-pressed=true], .chat-q-continue):hover,
#listings :is(#sort-send, #browse-form .primary, .housing-actions a.next-step:not([href^="tel:"]), #show-more-listings):hover {
  background: radial-gradient(120% 100% at 15% 0%, #ffffff4d, #ffffff00 55%), linear-gradient(140deg, #1d2e5af0, #2f55b5d1) !important
}
#tools :is(.call-links a[href="tel:911"], .chat-lines a.urgent) {
  background: radial-gradient(120% 100% at 15% 0%, #ffffff40, #ffffff00 55%), linear-gradient(140deg, #b42318eb, #d93025c7) !important;
  border: 1px solid #ffffff38 !important;
  color: #fff !important;
  box-shadow: inset 0 1px 0 #ffffff59, 0 8px 22px #b4231833 !important;
  backdrop-filter: blur(14px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6) !important
}
#tools :is(.call-links a[href="tel:911"], .chat-lines a.urgent):hover {
  background: radial-gradient(120% 100% at 15% 0%, #ffffff4d, #ffffff00 55%), linear-gradient(140deg, #912018f0, #b42318d1) !important
}
#tools :is(.assistant-chips button, .chat-next button, .chat-q-choice, .chat-q-type, .chat-cards-more, .chat-card-actions a, .hotel-more, .show-programs,
  .map-tab:not([aria-pressed=true]), .tonight-links button, .opt-card .opt-links a:not([href^="tel:"])),
#listings :is(.sort-chip, #sort-reset, .drawer-hint, .listing-tabs button:not([aria-pressed=true]), .budget-shortcut button:not([aria-pressed=true]), .filter-reset,
  .favorite-btn:not([aria-pressed=true]), .share-btn, .housing-actions a:not(.next-step):not([href^="tel:"]), #show-all-listings) {
  background: radial-gradient(120% 100% at 15% 0%, #ffffffeb, #ffffff00 60%), linear-gradient(140deg, #ffffffbf, #eef3fd8f) !important;
  border: 1px solid #ffffffd9 !important;
  color: #14203f !important;
  text-decoration: none !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #23408f0d, 0 0 0 1px #23408f24, 0 6px 16px #14203f14 !important;
  backdrop-filter: blur(14px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6) !important
}
#tools :is(.assistant-chips button, .chat-next button, .chat-q-choice, .chat-q-type, .chat-cards-more, .chat-card-actions a, .hotel-more, .show-programs,
  .map-tab:not([aria-pressed=true]), .tonight-links button, .opt-card .opt-links a:not([href^="tel:"])):hover,
#listings :is(.sort-chip, #sort-reset, .drawer-hint, .listing-tabs button:not([aria-pressed=true]), .budget-shortcut button:not([aria-pressed=true]), .filter-reset:not(:disabled),
  .favorite-btn:not([aria-pressed=true]), .share-btn, .housing-actions a:not(.next-step):not([href^="tel:"]), #show-all-listings):hover {
  background: radial-gradient(120% 100% at 15% 0%, #fff, #ffffff00 60%), linear-gradient(140deg, #ffffffe0, #e3ebfcb3) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #3b63c466, 0 8px 20px #14203f1f !important
}
#listings .favorite-btn[aria-pressed=true] {
  background: radial-gradient(120% 100% at 15% 0%, #ffffffcc, #ffffff00 60%), linear-gradient(140deg, #fbe3e3d9, #f6c9cc99) !important;
  border: 1px solid #ffffffd9 !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #a3343a33, 0 6px 16px #a3343a1f !important;
  backdrop-filter: blur(14px) saturate(1.6) !important;
  -webkit-backdrop-filter: blur(14px) saturate(1.6) !important
}
@media(prefers-reduced-transparency:reduce) {
  #tools :is(button, a),
  #listings :is(button, a) {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important
  }
}
/* Gemma's sort box sits right above the listing photos: tight spacing and small notes in between. The filter summary
       shows only once a filter is set (Reset filters is enabled then). */
#listings .sort-chat {
  margin: 12px 0 8px;
  padding: 8px 10px
}
#listings .sort-reply {
  margin: 6px 4px 2px 48px;
  font-size: 13px;
  line-height: 1.45
}
#listings .sort-chip {
  margin: 3px 0 0 4px;
  padding: 3px 10px;
  font-size: 12px
}
#listings .listings-drawer {
  margin: 0 0 8px
}
#listings .listings-section .browse-hint,
#listings .browse-hint {
  margin: 4px 2px 0;
  font-size: 12px;
  line-height: 1.4
}
#listings .filter-summary:has(#filter-reset:disabled) {
  display: none
}
#listings .filter-summary {
  margin: 6px 0 0
}
#listings .browse-message {
  margin: 6px 2px 8px;
  font-size: 12.5px;
  font-weight: 600
}
@media(max-width:600px) {
  /* Panels fill the screen edge to edge, so no background shows at the sides. */
  main.container {
    width: 100%;
    max-width: none;
    padding-left: 0;
    padding-right: 0
  }
  #tools.simple-tools,
  #listings.listings-section {
    border-radius: 0;
    padding-left: 10px;
    padding-right: 10px;
    border-left: 0;
    border-right: 0;
    margin-left: 0;
    margin-right: 0
  }
  #tools .assistant {
    border-radius: 18px !important
  }
  #listings .sort-reply {
    margin-left: 4px;
    font-size: 12.5px
  }
  #listings .sort-chip {
    white-space: normal;
    text-align: left
  }
  #listings .section-heading h2 {
    font-size: 21px !important
  }
}
@media(max-width:820px) {
  /* Bigger tap targets on phones: every button and button-like link is at least 48px tall. */
  #tools :is(button, .call-links a, .chat-lines a, .chat-card-actions a, .opt-card .opt-links a, .hotel-more),
  #listings :is(button, .housing-actions a, .drawer-hint) {
    min-height: 48px
  }
  #tools .assistant-form .send-button {
    width: 48px;
    height: 48px
  }
  #listings :is(.favorite-btn, .share-btn) {
    width: 48px;
    height: 48px
  }
  #tools :is(.assistant-chips button, .chat-next button, .chat-q-choice, .tonight-links button),
  #listings :is(.budget-shortcut button, .listing-tabs button) {
    font-size: 15px;
    padding-left: 16px;
    padding-right: 16px
  }
  #listings .sort-chip {
    font-size: 13px;
    min-height: 44px
  }
}
/* "Need a Safe Place Tonight?" is as tall as the map beside it, with Gemma's guided tonight chat at the bottom. */
.tools-row {
  align-items: stretch
}
#tools .tools-row .emergency-card {
  display: flex;
  flex-direction: column
}
#tools .emergency-card .tonight-gemma {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  margin-top: auto;
  min-height: 48px;
  padding: 11px 16px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  color: #14203f;
  background: radial-gradient(120% 100% at 15% 0%, #fffffff2, #ffffff00 60%), linear-gradient(140deg, #ffffffd9, #f1f5fdb3);
  border: 1px solid #ffffffe6;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #23408f12, 0 0 0 1px #23408f2e, 0 8px 22px #14203f1f;
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6)
}
#tools .emergency-card .tonight-links {
  margin-bottom: 14px
}
#tools .emergency-card .tonight-gemma:hover {
  background: radial-gradient(120% 100% at 15% 0%, #fff, #ffffff00 60%), linear-gradient(140deg, #ffffffeb, #e3ebfcc7);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #3b63c466, 0 10px 24px #14203f29
}
/* Links on result cards (shelters, hotels, homes, programs): glass pills with room around the words; phone numbers are solid
       navy call buttons, like the shelters' own. */
#tools .opt-card .opt-links {
  gap: 8px;
  align-items: center;
  padding-top: 10px
}
#tools .opt-card .opt-links a:not([href^="tel:"]) {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 38px;
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 650
}
#tools .opt-card .opt-links a[href^="tel:"] {
  min-height: 40px;
  padding: 8px 15px;
  border-radius: 999px;
  background: #23408f;
  color: #fff !important;
  text-decoration: none;
  font-size: 14.5px;
  font-weight: 700
}
#tools .opt-card .opt-links a[href^="tel:"]:hover {
  background: #1a3170
}
#tools .chat-card-actions {
  gap: 6px
}
#tools .chat-card-actions a {
  padding: 5px 12px;
  border-radius: 999px;
  min-height: 34px
}
/* The options panel (shelters, hotels and the rest) has a title and an X that closes it. */
#tools .find-results {
  scroll-margin-top: 100px
}
#tools .results-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px
}
#tools .results-head h3 {
  margin: 0;
  font-size: 19px;
  line-height: 1.3;
  color: var(--ink)
}
#tools .find-results .results-close {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  cursor: pointer;
  color: #14203f !important;
  background: radial-gradient(120% 100% at 15% 0%, #ffffffeb, #ffffff00 60%), linear-gradient(140deg, #ffffffbf, #eef3fd8f) !important;
  border: 1px solid #ffffffd9 !important;
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #23408f0d, 0 0 0 1px #23408f24, 0 6px 16px #14203f14 !important;
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6)
}
#tools .find-results .results-close:hover {
  background: radial-gradient(120% 100% at 15% 0%, #fff, #ffffff00 60%), linear-gradient(140deg, #ffffffe0, #e3ebfcb3) !important;
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #3b63c466, 0 8px 20px #14203f1f !important
}
#tools .find-results .results-close:focus-visible {
  outline: 3px solid #2f55b5;
  outline-offset: 3px
}
@media(max-width:820px) {
  #tools .find-results .results-close {
    width: 48px;
    height: 48px
  }
}
#tools .emergency-card .tonight-gemma:focus-visible {
  outline: 3px solid #2f55b5;
  outline-offset: 3px
}
/* Listings with no photo: the area's map (our own Google map, no pins) under frosted liquid glass, the same size as a photo. */
.housing-card.map-photo {
  position: relative
}
.housing-card.map-photo::before {
  background: var(--card-photo) center/cover no-repeat, #edf2f8
}
.housing-card .map-photo-glass {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  aspect-ratio: 16/9;
  max-height: 200px;
  display: grid;
  place-items: center;
  background: linear-gradient(140deg, #ffffff8c, #ffffff33 55%, #ffffff66);
  -webkit-backdrop-filter: blur(2.5px) saturate(1.3);
  backdrop-filter: blur(2.5px) saturate(1.3);
  border-bottom: 1px solid #e3e9f2;
  pointer-events: none
}
.housing-card .map-photo-label {
  display: inline-flex;
  align-items: center;
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
  color: #14203f;
  background: linear-gradient(140deg, #ffffffd9, #ffffff99);
  border: 1px solid #ffffffe6;
  box-shadow: inset 0 1px 0 #fff, 0 6px 16px #14203f1f
}
.housing-card .map-photo-credit {
  position: absolute;
  right: 8px;
  bottom: 6px;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 10px;
  color: #3d4a66;
  background: #ffffffcc
}
/* Back to the top of the listings: a glass button that follows you down the listings, and leaves when you're above or past them. */
.to-top {
  position: fixed;
  right: max(18px, env(safe-area-inset-right));
  bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 46px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #ffffff33;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  background: radial-gradient(120% 100% at 15% 0%, #ffffff38, #ffffff00 55%), linear-gradient(140deg, #14203fe6, #23408fbf);
  box-shadow: inset 0 1px 0 #ffffff59, 0 10px 26px #14203f40;
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease, transform .3s ease, visibility 0s linear .3s
}
/* fades out, then leaves the tab order */
.to-top.on {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease, transform .3s ease, visibility 0s
}
.to-top:hover {
  background: radial-gradient(120% 100% at 15% 0%, #ffffff4d, #ffffff00 55%), linear-gradient(140deg, #1d2e5af0, #2f55b5d1)
}
.to-top:focus-visible {
  outline: 3px solid #2f55b5;
  outline-offset: 3px
}
@media(max-width:820px) {
  .to-top {
    min-height: 48px;
    padding: 11px 18px;
    font-size: 15px
  }
}
@media(prefers-reduced-motion:reduce) {
  .to-top,
  .to-top.on {
    transform: none
  }
}
/* a plain fade, no slide */

/* Housing Resources: under Call 211 and Emergency 911, the same glass pill, full width; and the chat's link to the same page. */
#tools .emergency-card .resources-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid #ffffff33;
  color: #fff;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
  background: radial-gradient(120% 100% at 15% 0%, #ffffff38, #ffffff00 55%), linear-gradient(140deg, #14203fe6, #23408fbf);
  box-shadow: inset 0 1px 0 #ffffff59, inset 0 -1px 0 #0b14334d, 0 8px 22px #14203f33;
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6)
}
#tools .emergency-card .resources-link:hover {
  background: radial-gradient(120% 100% at 15% 0%, #ffffff4d, #ffffff00 55%), linear-gradient(140deg, #1d2e5af0, #2f55b5d1)
}
#tools .emergency-card .resources-link:focus-visible,
#tools .chat-next .chat-resources:focus-visible {
  outline: 3px solid #2f55b5;
  outline-offset: 3px
}
#tools .chat-next .chat-resources {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 38px;
  padding: 8px 15px;
  border-radius: 999px;
  border: 1px solid #ffffffd9;
  color: #14203f;
  font-size: 13.5px;
  font-weight: 650;
  text-decoration: none;
  background: radial-gradient(120% 100% at 15% 0%, #ffffffeb, #ffffff00 60%), linear-gradient(140deg, #ffffffbf, #eef3fd8f);
  box-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #23408f0d, 0 0 0 1px #23408f24, 0 6px 16px #14203f14;
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6)
}
#tools .chat-next .chat-resources:hover {
  background: radial-gradient(120% 100% at 15% 0%, #fff, #ffffff00 60%), linear-gradient(140deg, #ffffffe0, #e3ebfcb3)
}
@media(max-width:820px) {
  #tools .emergency-card .resources-link,
  #tools .chat-next .chat-resources {
    min-height: 48px
  }
}

/* Long lists stay smooth on phones: a listing card off screen isn't laid out or drawn (its glass blur included) until
   it scrolls near; meanwhile it holds about one card's height so the page doesn't jump. */
#listings-grid > .housing-card {
  content-visibility: auto;
  contain-intrinsic-size: auto 620px
}