/* Therapist explorer on The Center for Resilience website's own design system.
   assets/ (vendored from the website repo) supplies fonts, tokens, header,
   footer, glass panels, person cards, buttons, text links, chat panel, both
   themes and arrivals. This file lays out the explorer with those tokens. */

html.cfr-boot body { visibility: hidden; }

/* Crisis line in the site's slim charcoal bar above the header. */
.crisis-bar { margin: 0; justify-content: center; text-align: center; font-size: 12px; line-height: 1.6; padding-block: 8px; }
.preview-bar.crisis-bar span { max-width: 110ch; font-size: 12px; text-align: center; }
@media (max-width: 560px) { .preview-bar.crisis-bar span { font-size: 13px; text-align: left; } }

/* Language switch: the site's English / Español pair, as buttons. */
.languages { align-items: center; }
.language-button { background: none; border: 0; padding: 6px 0; min-height: 44px; color: inherit; font-size: 12px; cursor: pointer; text-decoration: none; }
.language-button[aria-current] { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--clay); }
.language-button:hover { text-decoration: underline; text-underline-offset: 5px; }

.explorer-kicker { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 22px; line-height: 1.4; margin-bottom: 10px; color: var(--clay); }
html[data-theme=dark] .explorer-kicker { color: #d9b3a1; }
.explorer-note { font-size: 13px; line-height: 1.7; margin: 10px 0 0; }
.explorer-note:empty { display: none; }
.explorer-subhead { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 30px; font-weight: 500; line-height: 1.15; letter-spacing: -.02em; margin: 54px 0 8px; }
.link-button { background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; font: inherit; }
.link-button:hover { text-decoration-thickness: 2px; }

/* Layout: the explorer beside a docked guide, inside the site's section rhythm. */
.explorer-section { padding-top: 0; }
.explorer-layout { display: grid; grid-template-columns: minmax(0, 1fr) min(400px, 32vw); gap: 48px; align-items: start; }
.explorer-stage { min-width: 0; }
.explorer-heading { margin-top: 64px; }
.explorer-heading h2 { margin: 0; }
.explorer-heading .text-link { margin: 0; font-size: 13px; }
.explorer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 28px; }

.prefs { position: relative; isolation: isolate; }
.prefs h2 { font-size: clamp(32px, 3vw, 44px); margin-bottom: 18px; }
.prefs fieldset { border: 0; padding: 0; margin: 0 0 20px; min-width: 0; }
.prefs legend { font-size: 13px; font-weight: 600; margin-bottom: 10px; }
.chipset { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 40px; padding: 8px 14px; border: 1px solid rgba(64,59,55,.25); border-radius: 4px; background: rgba(244,237,230,.45); color: var(--charcoal); font-size: 13px; line-height: 1.4; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.chip:hover { background: var(--mushroom); }
.chip[aria-pressed="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--alabaster); }
.search-field { display: block; font-size: 13px; font-weight: 600; }
.search-row { display: flex; gap: 10px; margin-top: 10px; }
.search-row input { flex: 1; min-width: 0; min-height: 48px; padding: 11px 13px; border: 1px solid rgba(64,59,55,.3); border-radius: 4px; background: rgba(244,237,230,.6); color: var(--charcoal); font: 400 15px/1.5 Montserrat, Arial, sans-serif; }
.search-row .button { flex: 0 0 auto; }
.search-panel { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--mushroom); }
.search-panel .section-heading { margin-bottom: 8px; align-items: baseline; }
.search-panel .explorer-subhead { margin: 0; font-size: 26px; }
.search-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 16px; }
.search-list .link-button { font-weight: 600; font-size: 14px; }
.search-quote { margin: 6px 0 0; font-size: 14px; }
.search-quote q { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 19px; font-style: italic; }
.quote-section { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; }

/* Person cards: the Our Team grid, with the explorer's evidence underneath. */
.person { min-width: 0; scroll-margin-top: 160px; }
.person:focus { outline: none; }
.person:focus-visible { outline: 3px solid var(--charcoal); outline-offset: 6px; }
.person.highlight .portrait-lens img { box-shadow: 0 0 0 3px var(--rose); }
.person h3 { margin: 20px 0 4px; }
.person p { font-size: 14px; line-height: 1.7; margin-bottom: 12px; }
.person .focus-line { font-size: 15px; }
.reasons { border-left: 2px solid var(--rose); padding: 2px 0 2px 14px; margin: 0 0 14px; font-size: 13px; line-height: 1.65; }
.reasons-title { font-weight: 600; margin-bottom: 4px !important; font-size: 12px !important; }
.reasons ul { margin: 0; padding-left: 1.1em; }
.reasons li span { font-style: italic; }
.gap { font-style: italic; font-size: 13px !important; }
.more { margin: 0 0 6px; font-size: 13px; }
.more summary { cursor: pointer; font-weight: 600; font-size: 12px; min-height: 32px; }
.more blockquote { margin: 10px 0; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 20px; line-height: 1.35; font-style: italic; }
.card-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin: 0 !important; }
.card-actions .text-link { font-size: 11px; margin-top: 8px; }

.notice { border-left: 2px solid var(--clay); padding: 6px 0 6px 14px; font-size: 14px; grid-column: 1 / -1; }

/* Docked guide: the site's Illuminator panel, held in place. */
.explorer-chat { position: sticky; right: auto; bottom: auto; top: 172px; z-index: 1; width: auto; height: calc(100dvh - 196px); min-height: 520px; max-height: 760px; }
.explorer-chat-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.explorer-chat .illum-message.user { margin-left: 24px; }
.explorer-chat .illum-message ul { margin: 0 0 10px; }
.explorer-chat .illum-terms { margin: 0; }
.explorer-suggestions { flex: 0 0 auto; display: flex; flex-wrap: wrap; gap: 8px; padding: 0 18px 12px; }
.explorer-suggestion { display: block; min-height: 44px; padding: 10px 13px; border: 1px solid var(--mushroom); border-radius: 4px; font-size: 13px; text-align: left; color: inherit; background: rgba(244,237,230,.3); cursor: pointer; transition: background-color .22s ease; }
.explorer-suggestion:hover { background: rgba(244,237,230,.65); }
.typing { display: flex; gap: 5px; width: max-content; }
.typing span { width: 7px; height: 7px; border-radius: 50%; background: currentColor; opacity: .3; animation: explorer-blink 1.2s infinite; }
.typing span:nth-child(2) { animation-delay: .2s; } .typing span:nth-child(3) { animation-delay: .4s; }
@keyframes explorer-blink { 0%, 80%, 100% { opacity: .2; } 40% { opacity: .9; } }

.cta h2 { margin-bottom: 18px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 12px; }

/* Narrow screens: one view at a time, with the site's control styling. */
.explorer-tabs { display: none; }
@media (max-width: 1100px) {
  .explorer-layout { grid-template-columns: minmax(0, 1fr) 360px; gap: 32px; }
  .explorer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .explorer-tabs { display: flex; gap: 10px; position: sticky; top: 0; z-index: 15; padding-block: 12px; background: rgba(244,237,230,.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--material-edge); }
  .explorer-tabs button { flex: 1; min-height: 46px; border: 1px solid rgba(64,59,55,.25); border-radius: 4px; background: transparent; color: var(--charcoal); font-size: 13px; font-weight: 600; cursor: pointer; position: relative; }
  .explorer-tabs button[aria-selected="true"] { background: var(--charcoal); border-color: var(--charcoal); color: var(--alabaster); }
  .explorer-tabs button.has-update::after { content: ''; position: absolute; top: 7px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--rose); }
  .explorer-section { padding-top: 24px; }
  .explorer-layout { grid-template-columns: 1fr; }
  .explorer-layout > [data-active="false"] { display: none; }
  .explorer-suggestions { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: thin; }
  .explorer-suggestion { flex: 0 0 auto; max-width: 78%; }
  .explorer-chat { position: relative; top: auto; height: calc(100dvh - 260px); min-height: 440px; max-height: none; }
}
@media (max-width: 560px) {
  .explorer-grid { grid-template-columns: 1fr; }
  .crisis-bar { text-align: left; font-size: 11px; }
}

/* Night theme, matching the site's theme.css materials. */
html[data-theme=dark] .chip { background: rgba(40,37,34,.84); border-color: var(--night-edge); color: var(--night-ink); }
html[data-theme=dark] .chip:hover { background: rgba(72,58,48,.95); }
html[data-theme=dark] .chip[aria-pressed="true"] { background: #d4aaa0; border-color: #d4aaa0; color: #403B37; }
html[data-theme=dark] .search-row input { background: rgba(38,31,26,.65); color: var(--night-ink); border-color: var(--night-edge); }
html[data-theme=dark] .search-panel { border-color: var(--night-edge); }
html[data-theme=dark] .explorer-suggestion { border-color: var(--night-edge); background: rgba(40,37,34,.84); }
html[data-theme=dark] .explorer-suggestion:hover { background: rgba(72,58,48,.95); }
html[data-theme=dark] .person.highlight .portrait-lens img { box-shadow: 0 0 0 3px #d4aaa0; }
html[data-theme=dark] .explorer-tabs { background: rgba(51,47,44,.92); border-color: var(--night-edge); }
html[data-theme=dark] .explorer-tabs button { color: var(--night-ink); border-color: var(--night-edge); }
html[data-theme=dark] .explorer-tabs button[aria-selected="true"] { background: #d4aaa0; border-color: #d4aaa0; color: #403B37; }
html[data-theme=dark] .person { border-color: var(--night-edge); }

@media (prefers-reduced-motion: reduce) {
  .typing span { animation: none; opacity: .6; }
  .chip, .explorer-suggestion { transition: none; }
}



/* Focused application opening: inherit CFR's campaign dock, not floating-widget geometry. */
.explorer-page .explorer-tabs { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:0; margin:0; position:static; background:none; border:0; backdrop-filter:none; }
.explorer-page .explorer-tabs button { flex:0 0 auto; min-height:44px; padding:9px 15px; border:1px solid var(--mushroom); border-radius:4px; font:500 13px/1.35 Montserrat,Arial,sans-serif; color:inherit; background:transparent; cursor:pointer; }
.explorer-page .explorer-tabs button[aria-selected="true"] { background:var(--charcoal); color:var(--alabaster); }
.explorer-page .explorer-tabs button.has-update::after { content:' •'; color:var(--rose); }
.explorer-section { padding-top:28px; }
.explorer-layout { display:block; }
.explorer-layout > [hidden] { display:none !important; }
.explorer-chat { position:relative; inset:auto; width:min(100%,1160px); margin:0 auto; height:clamp(480px,calc(100dvh - 235px),760px); min-height:0; max-height:none; }
.explorer-chat .illum-heading h1 { font:500 clamp(23px,2.3vw,30px)/1.15 'Cormorant Garamond',Georgia,serif; margin:0; }
.explorer-chat .clear-chat { font-size:12px; flex-shrink:0; min-height:44px; }
.explorer-chat .illum-message { font-size:15px; line-height:1.6; }
.explorer-chat .illum-form { align-items:flex-end; }
.explorer-chat .illum-form textarea { box-sizing:border-box; flex:1 1 auto; width:0; height:46px; min-height:46px; max-height:none; resize:none; font:400 16px/24px Montserrat,Arial,sans-serif; padding:10px 12px; }
.explorer-chat .illum-form button { flex:0 0 auto; min-height:46px; line-height:1.4; padding:10px 18px; }
.explorer-chat .explorer-suggestions { display:flex; flex-wrap:wrap; align-items:flex-start; gap:8px; padding:0 18px 14px; overflow:visible; }
.explorer-chat .explorer-suggestion { flex:0 1 auto; max-width:100%; min-height:40px; height:auto; margin:0; padding:8px 12px; font:400 13px/1.4 Montserrat,Arial,sans-serif; white-space:normal; }
.explorer-chat .illum-terms { padding:10px 18px; font-size:12px; line-height:1.6; }
.explorer-chat .illum-terms a { color:inherit; text-decoration:underline; text-underline-offset:3px; }
html[data-theme=dark] .explorer-page .explorer-tabs button[aria-selected="true"] { background:#d4aaa0; color:#403B37; }
@media(max-width:600px) {
  .explorer-page .header-top { gap:12px; }
  .explorer-page .header-tools { gap:10px; flex-wrap:wrap; }
  .explorer-page .explorer-tabs { order:3; width:100%; }
  .explorer-page .explorer-tabs button { flex:1; }
  .explorer-section { padding-top:18px; }
  .explorer-chat { height:clamp(470px,calc(100dvh - 235px),720px); }
  .explorer-chat .illum-header { gap:8px; padding:10px 12px; }
  .explorer-chat .illum-heading { gap:8px; }
  .explorer-chat .clear-chat { max-width:80px; font-size:11px; line-height:1.35; }
  .explorer-chat .illum-message { font-size:14px; }
  .explorer-chat .explorer-suggestions { padding-inline:12px; gap:6px; }
}

/* Campaign-like welcome: real portraits and bounded controls inside the opening message. */
.welcome-gallery { width:min(100%,300px); margin:0 auto 16px; }
.welcome-gallery > a { display:block; }
.welcome-gallery img { display:block; width:100%; height:180px; object-fit:cover; object-position:center 24%; border:1px solid var(--mushroom); border-radius:10px; }
.welcome-gallery figcaption { display:flex; align-items:center; justify-content:space-between; gap:8px; padding-top:7px; font-size:12px; }
.welcome-person { text-decoration:underline; text-underline-offset:3px; }
.welcome-gallery-controls { display:flex; align-items:center; gap:2px; }
.welcome-gallery-controls button { min-width:36px; min-height:36px; height:auto; padding:4px 7px; border:1px solid var(--mushroom); border-radius:4px; background:transparent; color:inherit; font:400 12px/1.3 Montserrat,Arial,sans-serif; cursor:pointer; }
.welcome-gallery-controls button:first-child,.welcome-gallery-controls button:last-child { font-size:20px; }
.beyond-cfr { padding-top:10px; }
.beyond-cfr h2 { margin-bottom:26px; }
.beyond-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.beyond-grid article { min-width:0; padding:28px; }
.beyond-grid h3 { font-size:30px; line-height:1.15; margin:0 0 16px; }
.beyond-grid p { font-size:15px; line-height:1.7; }
.beyond-grid .text-link { font-size:13px; }
.explorer-page .skip:focus { position:fixed; top:8px; left:8px; z-index:100; }
@media(max-width:860px) { .beyond-grid { grid-template-columns:1fr; } }
@media(max-width:600px) {
  .explorer-page .header-top { flex-wrap:wrap; }
  .explorer-page .brand { flex:0 0 100%; margin:0; }
  .explorer-page .brand img { width:220px; max-width:100%; }
  .explorer-page .header-tools { width:100%; justify-content:space-between; }
  .explorer-page .explorer-tabs { order:0; width:auto; }
  .explorer-page .explorer-tabs button { padding:8px 12px; }
  .explorer-page .languages { order:3; }
  .welcome-gallery { width:220px; }
  .welcome-gallery img { height:144px; }
  .welcome-gallery figcaption { flex-wrap:wrap; justify-content:center; }
  .welcome-gallery-controls button { min-height:40px; min-width:40px; }
}

@media(max-width:600px) {
  .explorer-page .header-tools { display:flex; align-items:center; flex-wrap:wrap; gap:8px 12px; }
  .explorer-page .header-tools > * { grid-area:auto; }
  .explorer-page .brand { height:auto; }
  .explorer-page .header-tools .languages { order:0; margin-right:auto; }
  .explorer-page .header-tools .theme-toggle { order:1; }
  .explorer-page .header-tools .menu-toggle { order:2; }
  .explorer-page .header-tools .explorer-tabs { order:3; width:100%; }
  .explorer-chat { height:max(660px,calc(100svh - 200px)); }
}
@media(max-width:600px) {
  .explorer-page .header-tools { flex-direction:row; }
  .explorer-page .header-tools .languages { margin:0 auto 0 0; }
  .explorer-page .header-tools .explorer-tabs { flex-basis:100%; }
  .explorer-page .header-top { align-items:center; }
  .explorer-page .brand { display:flex; align-items:center; }
}
.explorer-chat { height:clamp(620px,calc(100dvh - 200px),820px); }
@media(max-width:600px) { .explorer-chat { height:max(700px,calc(100svh - 180px)); } }
@media(max-width:600px) { .welcome-gallery { width:260px; max-width:100%; } }

/* Content-led opening: title, portrait/name, prose, suggestions and composer stay together. */
.explorer-chat.is-welcome { height:auto; min-height:0; }
.explorer-chat.is-welcome .explorer-chat-body { flex:0 0 auto; }
.explorer-chat.is-welcome .illum-messages { flex:0 0 auto; overflow:visible; }
.explorer-chat.is-welcome .illum-message { max-width:880px; margin:0 auto 0; padding:22px 26px; }
.welcome-title { font:500 clamp(28px,3vw,38px)/1.15 'Cormorant Garamond',Georgia,serif; text-align:center; margin:0 0 20px; }
.welcome-gallery { width:min(100%,320px); margin:0 auto 20px; }
.welcome-gallery img { height:200px; }
.welcome-gallery figcaption { display:block; text-align:center; padding-top:10px; font-size:14px; line-height:1.5; }
.explorer-chat.is-welcome .illum-message > p { margin-bottom:14px; }
.explorer-chat.is-welcome .illum-message > p:last-child { margin-bottom:0; }
.explorer-chat.is-welcome .explorer-suggestions { max-width:916px; width:100%; margin:0 auto; padding-top:0; padding-bottom:16px; }
@media(max-width:600px) {
  .explorer-chat.is-welcome .illum-message { padding:18px 16px; }
  .welcome-title { font-size:28px; margin-bottom:16px; }
  .welcome-gallery { width:240px; max-width:100%; margin-bottom:16px; }
  .welcome-gallery img { height:170px; }
}

.explorer-chat .illum-form .chat-audio-mic,.explorer-chat .illum-form .chat-audio-read { display:inline-flex; align-items:center; justify-content:center; width:44px; min-width:44px; padding:10px; }
.chat-audio-mic svg,.chat-audio-read svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.explorer-chat .illum-form button[aria-pressed=true] { background:var(--rose); color:var(--charcoal); }
.chat-audio-status { flex:0 0 auto; margin:0; padding:0 18px 8px; font-size:12px; line-height:1.5; }
.chat-audio-status:empty { display:none; }
@media(max-width:600px) {
  .explorer-chat .illum-form { display:grid; grid-template-columns:44px 44px minmax(0,1fr) auto; }
  .explorer-chat .illum-form textarea { grid-column:1 / -1; width:100%; }
  .explorer-chat .illum-form .chat-audio-mic { grid-column:1; }
  .explorer-chat .illum-form .chat-audio-read { grid-column:2; }
  .explorer-chat .illum-form button[type=submit] { grid-column:4; }
}