/* Shared frosted material. Reading surfaces diffuse more of the sky than frames. */
:root {
  --glass-edge: #fff8f1c7;
  --glass-edge-bottom: #b8abc76b;
  --glass-divider: #67557533;
  --glass-radius-card: 28px;
  --glass-radius-panel: 32px;
  --glass-blur: 22px;
  --glass-reading-blur: 26px;
  --glass-fill:
    radial-gradient(ellipse at 0% 0%, #ffffff66, #ffffff00 55%),
    linear-gradient(145deg, #f4eef98c, #dedcf278 56%, #f0dfe86b);
  --glass-reading-fill:
    radial-gradient(ellipse at 0% 0%, #ffffff45, #ffffff00 60%),
    linear-gradient(145deg, #f7f3fad1, #e7e1efbd 60%, #eee2ebc7);
  --glass-light-fill:
    linear-gradient(140deg, #fff8f075, #e2ddf13d 55%, #ead3df38);
  --glass-shadow:
    inset 0 1px 0 #ffffffa6,
    inset 1px 0 0 #ffffff33,
    inset 0 -1px 0 #fff2f44d,
    0 14px 34px -15px #44324f38;
  --glass-shadow-raised:
    inset 0 1px 0 #ffffffd9,
    inset 1px 0 0 #ffffff4d,
    inset 0 -1px 0 #fff2f466,
    0 19px 38px -14px #44324f47;
  --glass-small-shadow: inset 0 1px 0 #ffffff80, 0 3px 10px #44324f0d;
}

/* Cards and broad panels share their edge lighting and quiet depth. */
.service-card,
.catalog-card,
.glass-panel,
.welcome-panel,
.team-next-panel,
.session-panel,
.check-in-panel,
.immediate-support {
  background: var(--glass-fill);
  border: 1px solid var(--glass-edge);
  border-bottom-color: var(--glass-edge-bottom);
  border-radius: var(--glass-radius-card);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(108%);
  backdrop-filter: blur(var(--glass-blur)) saturate(108%);
}
.welcome-panel,
.team-next-panel,
.session-panel,
.check-in-panel,
.immediate-support,
.message-panel,
.featured-story-inner,
.stories-next-panel {
  border-radius: var(--glass-radius-panel);
}

/* Long reading and decision-making stay on a denser, softly tinted surface. */
.testimonial-card,
.check-in-panel,
.immediate-support,
.message-panel,
.featured-story-inner {
  background: var(--glass-reading-fill);
  -webkit-backdrop-filter: blur(var(--glass-reading-blur)) saturate(105%);
  backdrop-filter: blur(var(--glass-reading-blur)) saturate(105%);
}

/* Retain the material on hover instead of switching to a flat white fill. */
.service-card:hover,
.contact-channel:hover {
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
}
@media (hover: hover) and (pointer: fine) {
  .service-card:hover,
  .contact-channel:hover {
    border-color: #fff8f1ed;
    border-bottom-color: var(--glass-edge-bottom);
    box-shadow: var(--glass-shadow-raised);
  }
}
.service-card:focus-visible,
.contact-channel:focus-visible {
  box-shadow: var(--glass-shadow-raised);
}

/* Decorative frames transmit more color; the photographs themselves stay crisp. */
.team-preview-frame,
.profile-portrait {
  background: var(--glass-light-fill);
  border-color: var(--glass-edge);
  border-bottom-color: var(--glass-edge-bottom);
  box-shadow: var(--glass-shadow);
}
.portrait {
  border-color: var(--glass-edge);
  box-shadow: var(--glass-shadow);
}
.preview-arrow,
.portrait-arrow,
.client-mark,
.author-monogram,
.specialties li {
  background: var(--glass-light-fill);
  border-color: var(--glass-edge);
  box-shadow: var(--glass-small-shadow);
}

/* Nested controls use a surface tint, avoiding another costly blur layer. */
.answer-option {
  background: linear-gradient(135deg, #ffffff8c, #f1ebf66b);
  border-color: #85719152;
  box-shadow: inset 0 1px 0 #ffffff99;
}
.answer-option:hover {
  background: linear-gradient(135deg, #ffffffb8, #f1ebf69e);
  border-color: #85719199;
}
.answer-option:has(input:checked) {
  background: linear-gradient(135deg, #e9e0f2, #dcd0e8);
  border-color: #70577f;
  box-shadow: inset 0 0 0 1px #70577f, inset 0 2px 0 #ffffff80;
}
.result-setting {
  background: var(--glass-light-fill);
  box-shadow: var(--glass-small-shadow);
}
.service-card .card-link,
.catalog-card .card-link,
.testimonial-author,
.story-details,
.panel-support,
.welcome-points li,
.session-routes article,
.start-routes > a {
  border-color: var(--glass-divider);
}

@media (max-width: 700px) {
  :root {
    --glass-radius-card: 24px;
    --glass-radius-panel: 26px;
    --glass-blur: 18px;
    --glass-reading-blur: 22px;
  }
}

/* Keep text readable in browsers that cannot diffuse the backdrop. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .service-card,
  .service-card:hover,
  .catalog-card,
  .glass-panel,
  .contact-channel:hover,
  .welcome-panel,
  .team-next-panel,
  .session-panel {
    background: linear-gradient(145deg, #e9e4f1, #ded9e9 65%, #e7dbe6);
  }
  .testimonial-card,
  .check-in-panel,
  .immediate-support,
  .message-panel,
  .featured-story-inner {
    background: linear-gradient(145deg, #f3eff7, #e9e3ef);
  }
}