/* Phoenix companion: layout and components */

.app { display: flex; flex-direction: column; height: 100%; max-width: 980px; margin: 0 auto; }

/* ---- header */
.top { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; border-bottom: var(--bw) solid var(--border); background: var(--bg); flex: none; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .5rem; font-family: var(--display); font-size: 1.6rem; line-height: 1; margin-right: auto; }
.nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.nav button { font: inherit; font-weight: 700; padding: .5em .95em; min-height: 42px; border-radius: 999px; border: var(--bw) solid transparent; background: transparent; color: var(--text); cursor: pointer; }
.nav button:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
.nav button[aria-current='page'] { border-color: var(--border); background: var(--card); box-shadow: var(--sh-sm); }
.help-btn { --b: var(--red); color: #fff; }

.view { flex: 1; min-height: 0; overflow: auto; padding: 1rem; }
.view.chat-view { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.view-title { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; }
.view-title h1 { margin: 0; }
.back { margin-bottom: .75rem; }

/* ---- chat */
.chat-head { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; flex: none; border-bottom: 2px dashed color-mix(in srgb, var(--border) 40%, transparent); }
.chat-head .who { flex: 1; min-width: 0; }
.chat-head .who strong { font-family: var(--display); font-size: 1.25rem; font-weight: 400; }
.ph-status { font-size: .88rem; color: var(--muted); }
.mode-pill { font-size: .8rem; }
.chat-list { flex: 1; overflow: auto; padding: 1rem; display: flex; flex-direction: column; gap: .8rem; }
.msg { max-width: min(46rem, 92%); padding: .75rem 1rem; border: var(--bw) solid var(--border); border-radius: var(--radius); background: var(--card); box-shadow: var(--sh-sm); overflow-wrap: anywhere; }
.msg.user { align-self: flex-end; background: color-mix(in srgb, var(--accent) 22%, var(--card)); }
.msg.assistant { align-self: flex-start; }
.msg.crisis { border-color: var(--red); background: var(--bad-bg); }
.msg .li { display: block; padding-left: 1.1em; text-indent: -1.1em; }
.msg .li::before { content: '\2022'; display: inline-block; width: 1.1em; text-indent: 0; text-align: center; }
.msg-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .7rem; }
.msg-tools { display: flex; gap: .25rem; margin-top: .4rem; }
.msg-tools button { font: inherit; font-size: .82rem; background: none; border: 0; color: var(--muted); cursor: pointer; text-decoration: underline; padding: .2em .3em; }
.typing { color: var(--muted); }

.welcome { max-width: 40rem; margin: auto; text-align: center; padding: 1rem; }
.welcome .ph { margin-bottom: .5rem; }
.chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 1rem .5rem; flex: none; }
.chip-btn { font: inherit; font-size: .92rem; font-weight: 700; padding: .45em .9em; min-height: 40px; border-radius: 999px; border: 2px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; }
.chip-btn:hover { background: color-mix(in srgb, var(--accent) 18%, var(--card)); }

.composer { flex: none; padding: .6rem 1rem 1rem; border-top: 2px dashed color-mix(in srgb, var(--border) 40%, transparent); background: var(--bg); }
.composer-row { display: flex; gap: .5rem; align-items: flex-end; }
textarea.input, input.input, select.input, .input {
  font: inherit; color: var(--text); background: var(--card); border: var(--bw) solid var(--border); border-radius: var(--radius-sm); padding: .65em .85em; width: 100%; min-height: 46px;
}
textarea.input { resize: none; max-height: 9rem; line-height: 1.4; }
.composer .btn { flex: none; }
.composer-foot { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; justify-content: space-between; margin-top: .5rem; font-size: .85rem; color: var(--muted); }
.voice-row { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; margin-bottom: .5rem; font-size: .9rem; }
.switch { display: inline-flex; align-items: center; gap: .45em; cursor: pointer; }
.switch input { width: 1.2rem; height: 1.2rem; accent-color: var(--purple-deep); }
.ph-mic.on { background: var(--lime); color: #16121f; }

/* ---- generic layout */
.grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(15rem, 100%), 1fr)); }
.tile { display: flex; flex-direction: column; gap: .35rem; text-align: left; font: inherit; color: var(--text); cursor: pointer; }
.tile:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--shadow); }
.tile .ico { font-size: 1.8rem; line-height: 1; }
.tile strong { font-family: var(--display); font-weight: 400; font-size: 1.2rem; }
.stack > * + * { margin-top: 1rem; }
.row { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
label.field { display: block; font-weight: 700; }
label.field > .hint { display: block; font-weight: 400; color: var(--muted); font-size: .9rem; margin-bottom: .3rem; }
label.field > .input { margin-top: .3rem; font-weight: 400; }
fieldset { border: var(--bw) solid var(--border); border-radius: var(--radius); padding: 1rem; margin: 0 0 1rem; }
legend { font-family: var(--display); font-size: 1.15rem; padding: 0 .4rem; }
.notice { padding: .8rem 1rem; border-radius: var(--radius-sm); border: 2px solid var(--border); background: var(--warn-bg); }
.notice.good { background: var(--good-bg); }
.notice.bad { background: var(--bad-bg); }
.seg { display: inline-flex; border: var(--bw) solid var(--border); border-radius: 999px; overflow: hidden; flex-wrap: wrap; }
.seg button { font: inherit; font-weight: 700; padding: .5em 1em; min-height: 42px; background: var(--card); color: var(--text); border: 0; border-right: 2px solid var(--border); cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button[aria-pressed='true'] { background: var(--accent); color: var(--accent-ink); }
.tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.tag { font: inherit; font-weight: 700; font-size: .92rem; padding: .35em .85em; border-radius: 999px; border: 2px solid var(--border); background: var(--card); color: var(--text); cursor: pointer; min-height: 38px; }
.tag[aria-pressed='true'] { background: var(--lime); color: #16121f; }

/* ---- tools */
.breath { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1rem 0; }
.breath-orb { width: 11rem; height: 11rem; border-radius: 50%; border: var(--bw) solid var(--border); background: radial-gradient(circle at 35% 30%, var(--lime), var(--purple)); display: grid; place-items: center; font-family: var(--display); font-size: 1.4rem; color: #16121f; transition: transform 4s ease-in-out; box-shadow: var(--sh); }
.breath-count { font-size: 2.4rem; font-family: var(--display); }
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; }
.steps li { display: flex; gap: .7rem; align-items: flex-start; padding: .7rem .9rem; border: 2px solid var(--border); border-radius: var(--radius-sm); background: var(--card); }
.steps li.done span.t { text-decoration: line-through; color: var(--muted); }
.steps input[type=checkbox] { width: 1.4rem; height: 1.4rem; flex: none; margin-top: .15rem; accent-color: var(--purple-deep); }
.range { width: 100%; accent-color: var(--purple-deep); }
.scale-labels { display: flex; justify-content: space-between; font-size: .85rem; color: var(--muted); }
.bars { display: flex; align-items: flex-end; gap: 6px; height: 7rem; padding: .5rem 0; }
.bars .bar { flex: 1; min-width: 8px; background: var(--accent); border: 2px solid var(--border); border-radius: 6px 6px 0 0; position: relative; }
.bars .bar span { position: absolute; bottom: -1.5rem; left: 50%; transform: translateX(-50%); font-size: .7rem; color: var(--muted); white-space: nowrap; }
.timer-face { font-family: var(--display); font-size: clamp(3rem, 14vw, 5.5rem); text-align: center; }
.script { display: flex; gap: .75rem; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.script p { margin: .25rem 0 0; flex: 1 1 18rem; }
.learn-item { padding: 0; overflow: hidden; }
.learn-item summary { cursor: pointer; padding: 1rem 1.25rem; font-family: var(--display); font-size: 1.15rem; list-style: none; }
.learn-item summary::-webkit-details-marker { display: none; }
.learn-item summary::before { content: 'â–¸ '; }
.learn-item[open] summary::before { content: 'â–¾ '; }
.learn-item .body { padding: 0 1.25rem 1.1rem; }

/* ---- overlays */
.modal-overlay { position: fixed; inset: 0; background: rgba(10, 8, 20, .6); display: grid; place-items: center; padding: 1rem; z-index: 200; }
.modal { width: min(32rem, 100%); max-height: 92vh; overflow: auto; }
.modal.wide { width: min(40rem, 100%); }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.modal-head h2 { margin: 0; }
.modal-foot { display: flex; gap: .6rem; justify-content: flex-end; flex-wrap: wrap; margin-top: 1rem; }
#toasts { position: fixed; left: 50%; bottom: 1.2rem; transform: translateX(-50%); display: grid; gap: .5rem; z-index: 300; width: min(30rem, 92vw); }
.toast { display: flex; gap: .5rem; padding: .7rem 1rem; border: var(--bw) solid var(--border); border-radius: var(--radius-sm); background: var(--card); box-shadow: var(--sh); transition: opacity .35s; }
.toast.out { opacity: 0; }
.help-emergency { padding: .8rem 1rem; border: var(--bw) solid var(--red); border-radius: var(--radius-sm); background: var(--bad-bg); margin-bottom: .8rem; }
.help-line { display: flex; gap: .7rem; padding: .6rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 30%, transparent); }
.help-line-icon { font-size: 1.4rem; }
.help-sub { margin-top: 1.2rem; }
.help-country { display: block; margin-bottom: .8rem; }
.help-country select { width: 100%; font: inherit; padding: .6em; min-height: 46px; border-radius: var(--radius-sm); border: var(--bw) solid var(--border); background: var(--card); color: var(--text); }

/* ---- onboarding */
.onboard { max-width: 38rem; margin: 0 auto; }

/* ---- accessibility panel */
.a11y h3 { margin: 1rem 0 0; }
.a11y-row { display: grid; gap: .5rem; padding: .7rem 0; border-bottom: 1px solid color-mix(in srgb, var(--border) 25%, transparent); }
.a11y-label { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; }
.a11y-label .muted { flex-basis: 100%; }
.a11y-preview { position: sticky; top: 0; z-index: 2; padding: .8rem 1rem; box-shadow: var(--sh-sm); }
.a11y-preview h3 { margin: 0 0 .2rem; font-size: 1rem; }
.a11y-preview p { margin: 0 0 .4rem; }
.seg { border-radius: 18px; }
.modal-body:has(.a11y) { max-height: 68vh; overflow: auto; padding-right: .3rem; }
select.input optgroup { font-weight: 700; }

@media print {
  .top, .back, .composer, .btn, #toasts { display: none !important; }
  body, .view { height: auto !important; overflow: visible !important; background: #fff; color: #000; }
  .app { display: block; }
}

@media (max-width: 560px) {
  .brand span.name { display: none; }
  .msg { max-width: 100%; }
  .nav button { padding: .45em .7em; }
}

/* ---- daily check-in (6PF-Wellness) ---- */
.checkin-nudge { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; margin: .5rem 1rem 0; padding: .6rem .9rem; border: 2px dashed var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--accent) 12%, var(--card)); font-size: .95rem; }
#nav button { position: relative; }
.nav-dot { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--red); border: 2px solid var(--card); }
.row-wrap { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.progress { height: 10px; border: 2px solid var(--border); border-radius: 999px; overflow: hidden; background: var(--card); }
.progress > span { display: block; height: 100%; background: var(--accent); transition: width .2s ease; }
.ratings { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; }
.rate { position: relative; }
.rate input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rate label { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .15rem; min-height: 84px; padding: .5rem .25rem; text-align: center; border: var(--bw) solid var(--border); border-radius: var(--radius-sm); background: var(--card); cursor: pointer; }
.rate .big { font-size: 1.7rem; line-height: 1.1; font-weight: 700; }
.rate .cap { font-size: .78rem; line-height: 1.15; color: var(--muted); }
.rate input:checked + label { background: var(--accent); color: var(--accent-ink); box-shadow: var(--sh-sm); }
.rate input:checked + label .cap { color: inherit; }
.rate input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
@media (max-width: 480px) { .ratings { grid-template-columns: 1fr; } .rate label { flex-direction: row; justify-content: flex-start; gap: .8rem; min-height: 52px; padding-left: 1rem; } .rate .cap { font-size: .95rem; } }
.advice-card h3 { margin-bottom: .3rem; }
.notice-help { border-color: var(--red); background: var(--bad-bg); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: .75rem; }
.kpi { display: flex; flex-direction: column; gap: .1rem; padding: .8rem 1rem; box-shadow: var(--sh-sm); }
.kpi-v { font-family: var(--display); font-weight: 400; font-size: 1.8rem; line-height: 1.1; }
.chart { width: 100%; height: auto; display: block; color: var(--text); }
.chart .grid { stroke: color-mix(in srgb, var(--text) 18%, transparent); stroke-width: 1; }
.chart .axis { fill: var(--muted); font-size: 12px; font-family: var(--font); }
.chart .strongtext { fill: var(--text); font-weight: 700; }
.chart .series { stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .series.strong { stroke-width: 4; }
.chart .pt { stroke: var(--card); stroke-width: 1.5; }
.chart .cell { stroke: var(--border); stroke-width: 1; }
.chart .cell.empty { stroke-dasharray: 3 3; stroke: color-mix(in srgb, var(--text) 30%, transparent); }
.chart .cellnum { font-size: 13px; font-weight: 700; font-family: var(--font); }
.chart.heat { min-width: 520px; }
.scroll-x { overflow-x: auto; }
fieldset.toggles { border: 0; padding: 0; margin: .75rem 0 0; display: flex; flex-wrap: wrap; gap: .4rem .9rem; }
fieldset.toggles legend { font-weight: 700; padding: 0; margin-bottom: .3rem; }
.tg { display: inline-flex; align-items: center; gap: .4rem; min-height: 32px; cursor: pointer; }
.tg input { width: 20px; height: 20px; accent-color: var(--accent); }
table.data { border-collapse: collapse; width: 100%; font-size: .95rem; }
table.data th, table.data td { border-bottom: 1px solid color-mix(in srgb, var(--text) 20%, transparent); padding: .35rem .5rem; text-align: center; }
table.data th[scope='row'], table.data th:first-child { text-align: left; }
ul.changes { padding-left: 1.2rem; }

/* ---- documents (reflection forms, PDF) ---- */
.docs-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.doc-card { display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.doc-card .ico { font-size: 2rem; }
.doc-card h2 { font-size: 1.25rem; margin: 0; }
.doc-card .btn { margin-top: auto; }
.doc-row { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.doc-nav .chip-btn { min-width: 44px; padding: .35em .6em; }
.doc-nav .chip-btn[aria-current='step'] { background: var(--accent); color: var(--accent-ink); }
.draft-badge { margin-top: .35rem; background: var(--warn-bg); }
.rating10 { margin-top: 1rem; }
.rating10 .pills { display: flex; flex-wrap: wrap; gap: .4rem; margin: .5rem 0; }
.rating10 .pill { position: relative; }
.rating10 .pill input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.rating10 .pill label { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: var(--bw) solid var(--border); border-radius: var(--radius-sm); background: var(--card); font-weight: 700; cursor: pointer; }
.rating10 .pill input:checked + label { background: var(--accent); color: var(--accent-ink); box-shadow: var(--sh-sm); }
.rating10 .pill input:focus-visible + label { outline: 3px solid var(--focus); outline-offset: 3px; }
#print-root { display: none; }
@media print {
  body > *:not(#print-root) { display: none !important; }
  #print-root { display: block !important; color: #000; background: #fff; font: 12pt/1.5 'Atkinson Hyperlegible', system-ui, sans-serif; padding: 0; }
  #print-root h1 { font-size: 20pt; } #print-root h2 { font-size: 14pt; margin: 1em 0 .3em; break-after: avoid; }
  #print-root .q { font-weight: 700; margin: .6em 0 0; break-after: avoid; } #print-root .a { margin: 0 0 .4em; }
  #print-root .pi { color: #444; } #print-root .pn { border: 1px solid #999; padding: .5em; font-style: italic; font-size: 10pt; }
  #print-root table { border-collapse: collapse; } #print-root td { border-bottom: 1px solid #ccc; padding: .2em .8em .2em 0; }
}
/* donate: noticeable, but softer than the red Help button */
.donate-btn { --b: color-mix(in srgb, var(--pink) 55%, var(--card)); color: var(--text); box-shadow: var(--sh-sm); }
.donate-btn span[aria-hidden] { color: #d6246e; }
:root[data-theme='dark'] .donate-btn span[aria-hidden], :root[data-theme='contrast'] .donate-btn span[aria-hidden] { color: #ff8fc4; }
@media (max-width: 560px) { .donate-text { display: none; } }
.donate-amounts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.donate-amt { --b: color-mix(in srgb, var(--pink) 55%, var(--card)); color: var(--text); padding-left: .4em; padding-right: .4em; }
@media (max-width: 400px) { .donate-amounts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* install invitation */
#install-invite-host:empty { display: none; }
.install-invite { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .6rem 1rem; background: color-mix(in srgb, var(--lime) 35%, var(--card)); border-bottom: var(--bw) solid var(--border); font-size: .95rem; }

/* weekly donate reminder: soft, dismissible, never a notification */
#donate-nudge-host:empty { display: none; }
.donate-nudge { display: flex; align-items: center; justify-content: space-between; gap: .75rem; flex-wrap: wrap; padding: .6rem 1rem; background: color-mix(in srgb, var(--pink) 30%, var(--card)); border-bottom: var(--bw) solid var(--border); font-size: .95rem; }