/* Ask Ceevara: the assistant and interaction layer of the Citizen app.
   Uses ds.css tokens only. Everything is prefixed .cva so it never collides with page styles.
   Spacing scale: 4, 8, 12, 16, 20, 24, 32, 40. */

.cva{position:fixed;inset:0;z-index:150;display:flex;align-items:stretch;justify-content:center;font-family:var(--font);color:var(--text)}
.cva[hidden]{display:none!important}
.cva-scrim{position:absolute;inset:0;background:var(--overlay);animation:cva-fade .2s var(--ease)}
.cva-panel{position:relative;display:flex;flex-direction:column;width:100%;height:100%;background:var(--bg);overflow:hidden;animation:cva-up .28s var(--ease)}
@media (min-width:760px){
  .cva{align-items:center;padding:24px}
  .cva-panel{width:min(720px,100%);height:min(880px,calc(100dvh - 48px));border-radius:var(--r-xl);box-shadow:var(--sh-lg);border:1px solid var(--line);animation:cva-pop .24s var(--ease)}
}
@keyframes cva-fade{from{opacity:0}}
@keyframes cva-up{from{opacity:0;transform:translateY(24px)}}
@keyframes cva-pop{from{opacity:0;transform:scale(.98) translateY(8px)}}
@keyframes cva-rise{from{opacity:0;transform:translateY(8px)}}
@keyframes cva-spin{to{transform:rotate(360deg)}}

/* ---------- header ---------- */
.cva-head{display:flex;align-items:center;gap:8px;min-height:60px;padding:8px 12px 8px 16px;padding-top:max(8px,env(safe-area-inset-top,0px));border-bottom:1px solid transparent;background:var(--bg);flex:none;transition:border-color var(--dur)}
.cva-head.scrolled{border-bottom-color:var(--line)}
.cva-mark{width:32px;height:32px;border-radius:10px;display:grid;place-items:center;background:var(--green);color:var(--on-green);flex:none}
.cva-mark .ic{width:18px;height:18px}
.cva-head h2{font-size:var(--fs-lg);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.cva-sp{flex:1}
.cva-hbtn{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 12px;border-radius:var(--r-full);font-weight:600;font-size:var(--fs-sm);color:var(--text);border:1px solid var(--line);background:var(--surface);flex:none}
.cva-hbtn:hover{background:var(--surface-2)}
.cva-hbtn .ic{width:18px;height:18px}
.cva-hbtn[aria-pressed="true"]{background:var(--text);color:var(--surface);border-color:var(--text)}

/* ---------- body and feed ---------- */
.cva-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scroll-padding:16px}
.cva-feed{display:flex;flex-direction:column;gap:24px;padding:8px 16px 32px;max-width:640px;margin:0 auto}
@media (min-width:760px){ .cva-feed{padding:12px 24px 40px} }

/* home: greeting and big choices */
.cva-hello{display:flex;flex-direction:column;gap:8px;padding-top:12px}
.cva-hello h3{font-size:var(--fs-3xl);line-height:1.1;letter-spacing:-.02em}
.cva-hello h3 span{display:block;color:var(--text-2);font-weight:700}
.cva-hello p{color:var(--text-2);font-size:var(--fs-md)}
.cva-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;list-style:none;margin:0;padding:0}
@media (min-width:600px){ .cva-opts{grid-template-columns:repeat(3,minmax(0,1fr))} }
.cva-opt{display:flex;flex-direction:column;align-items:flex-start;gap:12px;width:100%;height:100%;min-height:128px;padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);text-align:left;transition:transform var(--dur) var(--ease),box-shadow var(--dur),border-color var(--dur)}
.cva-opt:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--line-strong)}
.cva-opt:active{transform:translateY(0)}
.cva-opt b{font-size:var(--fs-base);line-height:1.25;font-weight:700}
.cva-opt small{display:block;color:var(--text-2);font-size:var(--fs-sm);line-height:1.35;margin-top:4px;font-weight:400}
.cva-ti{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;flex:none}
.cva-ti .ic{width:22px;height:22px}
.t-green{background:var(--green-50);color:var(--green)}.t-navy{background:var(--navy-50);color:var(--navy)}.t-saffron{background:var(--saffron-50);color:var(--saffron-text)}
.t-teal{background:var(--teal-50);color:var(--teal)}.t-amber{background:var(--amber-50);color:var(--amber)}.t-plain{background:var(--surface-2);color:var(--text-2)}.t-red{background:var(--red-50);color:var(--red)}
.cva-ways{display:flex;flex-direction:column;gap:12px}
.cva-ways h4{font-size:var(--fs-sm);font-weight:700;color:var(--text-2);text-transform:none}
.cva-waylist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
@media (min-width:600px){ .cva-waylist{grid-template-columns:repeat(4,minmax(0,1fr))} }
.cva-way{display:flex;align-items:center;gap:8px;min-height:48px;padding:8px 12px;border-radius:var(--r-md);background:var(--surface-2);font-size:var(--fs-sm);font-weight:600;color:var(--text);text-align:left;text-decoration:none}
.cva-way:hover{background:var(--surface-3)}
.cva-way .ic{width:18px;height:18px;color:var(--text-2)}
.cva-links{display:flex;flex-wrap:wrap;gap:8px 16px}

/* a turn: what the resident said, then the answer building itself */
.cva-turn{display:flex;flex-direction:column;gap:12px;animation:cva-rise .24s var(--ease)}
.cva-me{align-self:flex-end;max-width:85%;padding:10px 16px;border-radius:20px 20px 6px 20px;background:var(--surface-3);font-size:var(--fs-base);line-height:1.4;overflow-wrap:anywhere}
.cva-me .cva-via{display:flex;align-items:center;gap:4px;font-size:var(--fs-xs);color:var(--text-3);margin-bottom:2px}
.cva-me .cva-via .ic{width:12px;height:12px}
.cva-ans{display:flex;flex-direction:column;gap:12px}
.cva-steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.cva-step{display:flex;align-items:center;gap:12px;font-size:var(--fs-md);color:var(--text-2);animation:cva-rise .2s var(--ease)}
.cva-step .st{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none}
.cva-step .st .ic{width:14px;height:14px}
.cva-step.run .st{border:2px solid var(--line-strong);border-top-color:var(--green);animation:cva-spin .8s linear infinite}
.cva-step.done .st{background:var(--green-50);color:var(--green)}
.cva-step.done{color:var(--text)}
.cva-steps.folded .cva-step.done{font-size:var(--fs-sm);color:var(--text-3)}
.cva-rtitle{font-size:var(--fs-xl);line-height:1.2;font-weight:700;animation:cva-rise .24s var(--ease)}
.cva-said{font-size:var(--fs-base);line-height:1.5;color:var(--text);animation:cva-rise .24s var(--ease)}

/* cards */
.cva-card{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-sm);animation:cva-rise .26s var(--ease)}
@media (min-width:760px){ .cva-card{padding:20px} }
.cva-card h4{font-size:var(--fs-lg);line-height:1.25}
.cva-card p{font-size:var(--fs-md);color:var(--text-2);line-height:1.45}
.cva-card .k{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--text-3);letter-spacing:.02em;text-transform:uppercase;margin-bottom:2px}
.cva-ch{display:flex;align-items:flex-start;gap:12px}
.cva-ch .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.cva-rows{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.cva-row{display:flex;gap:12px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.cva-row:last-child{border-bottom:0;padding-bottom:0}
.cva-row .ic{width:20px;height:20px;color:var(--text-3);margin-top:2px}
.cva-row .grow{flex:1;min-width:0}
.cva-row b{display:block;font-size:var(--fs-md);font-weight:600;line-height:1.35}
.cva-btns{display:flex;flex-wrap:wrap;gap:8px}
.cva-btns .btn{min-height:48px}
.cva-btns .btn-primary{flex:1 1 auto}
@media (max-width:420px){ .cva-btns .btn{flex:1 1 100%} }
.cva-hint{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);color:var(--text-2);line-height:1.4}
.cva-hint .ic{width:16px;height:16px;margin-top:2px;flex:none;color:var(--text-3)}
.cva-big{font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.cva-ok{display:flex;align-items:center;gap:12px}
.cva-ok .cva-ti{background:var(--green);color:var(--on-green);border-radius:50%}
.cva-ok b{font-size:var(--fs-lg)}

/* documents and timeline */
.cva-docs{display:flex;flex-wrap:wrap;gap:8px}
.cva-doc{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:var(--r-full);font-size:var(--fs-sm);font-weight:600;background:var(--surface-2);color:var(--text-2)}
.cva-doc .ic{width:15px;height:15px}
.cva-doc.ok{background:var(--green-50);color:var(--green)}
.cva-stages{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;counter-reset:s}
.cva-stages li{display:flex;align-items:center;gap:12px;font-size:var(--fs-md);color:var(--text-2)}
.cva-stages li::before{counter-increment:s;content:counter(s);width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:var(--fs-xs);font-weight:700;background:var(--surface-2);color:var(--text-2);flex:none}
.cva-ol{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px;counter-reset:o}
.cva-ol li{display:grid;grid-template-columns:28px 1fr;gap:12px;font-size:var(--fs-md);line-height:1.45}
.cva-ol li::before{counter-increment:o;content:counter(o);width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:var(--fs-sm);background:var(--navy-50);color:var(--navy)}

/* radio chips (slots, reasons) */
.cva-pick{display:flex;flex-wrap:wrap;gap:8px}
.cva-pick button{min-height:44px;padding:0 16px;border-radius:var(--r-full);border:1px solid var(--line-strong);background:var(--surface);font-weight:600;font-size:var(--fs-md)}
.cva-pick button[aria-checked="true"],.cva-pick button[aria-pressed="true"]{background:var(--text);color:var(--surface);border-color:var(--text)}
.cva-field{display:flex;flex-direction:column;gap:8px}

/* AI disclosure */
.cva-ai{display:flex;flex-direction:column;gap:8px;padding-top:4px}
.cva-ai-line{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;font-size:var(--fs-sm);color:var(--text-2)}
.cva-ai-line>span{display:inline-flex;align-items:center;gap:6px}
.cva-ai-line .ic{width:15px;height:15px}
.cva-ai details{font-size:var(--fs-sm);color:var(--text-2)}
.cva-ai summary{display:inline-flex;align-items:center;gap:4px;min-height:44px;cursor:pointer;font-weight:600;color:var(--navy);list-style:none}
.cva-ai summary::-webkit-details-marker{display:none}
.cva-ai summary .ic{width:16px;height:16px;transition:transform var(--dur)}
.cva-ai details[open] summary .ic{transform:rotate(180deg)}
.cva-ai details ul{margin:0;padding:12px 16px 12px 32px;background:var(--surface-2);border-radius:var(--r-md);display:flex;flex-direction:column;gap:4px;line-height:1.45}
.cva-srcs{display:flex;flex-wrap:wrap;gap:8px}
.cva-src{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;border-radius:var(--r-full);background:var(--surface);border:1px solid var(--line);font-size:var(--fs-xs);font-weight:600;color:var(--text-2);text-decoration:none;max-width:100%}
.cva-src span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cva-src:hover{background:var(--surface-2);color:var(--text)}
.cva-src .ic{width:13px;height:13px;flex:none}
.cva-link{display:inline-flex;align-items:center;gap:6px;min-height:44px;color:var(--navy);font-weight:600;font-size:var(--fs-sm);text-decoration:none}
.cva-link:hover{text-decoration:underline}
.cva-link .ic{width:16px;height:16px}
.cva-sample{display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:700;background:var(--saffron-50);color:var(--saffron-text)}

/* profiling question */
.cva-q{display:flex;flex-direction:column;gap:16px}
.cva-qtop{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cva-dots{display:flex;gap:4px;flex:1;max-width:220px}
.cva-dots i{flex:1;height:4px;border-radius:2px;background:var(--surface-3)}
.cva-dots i.done{background:var(--green-100)}
.cva-dots i.on{background:var(--green)}
.cva-q h4{font-size:var(--fs-2xl);line-height:1.15;letter-spacing:-.01em}
.cva-qopts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.cva-qopts.one{grid-template-columns:1fr}
.cva-qopt{display:flex;align-items:center;gap:12px;min-height:60px;padding:12px;border-radius:var(--r-md);border:1px solid var(--line-strong);background:var(--surface);text-align:left;font-weight:600;font-size:var(--fs-md);line-height:1.25;transition:border-color var(--dur),background var(--dur)}
.cva-qopt:hover{background:var(--surface-2)}
.cva-qopt .ic{width:22px;height:22px;color:var(--text-2);flex:none}
.cva-qopt>span{flex:1;min-width:0}
.cva-qopt .chk{margin-left:auto;color:var(--green);opacity:0}
.cva-qopt[aria-checked="true"]{border-color:var(--green);background:var(--green-50);box-shadow:inset 0 0 0 1px var(--green)}
.cva-qopt[aria-checked="true"] .chk{opacity:1}
.cva-qfoot{display:flex;gap:8px;flex-wrap:wrap}
.cva-qfoot .btn{min-height:48px}
.cva-qfoot .grow{flex:1}

/* entitlements */
.cva-ent{display:flex;flex-direction:column;gap:32px}
.cva-group{display:flex;flex-direction:column;gap:12px}
.cva-gh{display:flex;align-items:center;gap:12px}
.cva-gh h4{font-size:var(--fs-xl);line-height:1.2}
.cva-gh small{display:block;font-size:var(--fs-sm);color:var(--text-2);font-weight:400;margin-top:2px}
.cva-item{gap:12px}
.cva-item .top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.cva-item .top b{font-size:var(--fs-base);line-height:1.3}
.cva-item .why{display:flex;gap:8px;align-items:flex-start;font-size:var(--fs-sm);color:var(--green);line-height:1.4;font-weight:600}
.cva-item .why .ic{width:16px;height:16px;flex:none;margin-top:2px}
.cva-item .cond{color:var(--saffron-text)}
.cva-item .where{font-size:var(--fs-sm);color:var(--text-2)}
.cva-badge{display:inline-flex;align-items:center;height:24px;padding:0 8px;border-radius:var(--r-full);font-size:var(--fs-xs);font-weight:700;white-space:nowrap;flex:none}
.cva-explain{font-size:var(--fs-md);line-height:1.5;color:var(--text);background:var(--surface-2);border-radius:var(--r-md);padding:12px 16px}
.cva-sum{display:flex;flex-direction:column;gap:8px;padding:16px;border-radius:var(--r-lg);background:var(--green-50);color:var(--text)}
.cva-sum b{font-size:var(--fs-lg)}
.cva-sum p{font-size:var(--fs-sm);color:var(--text-2)}

/* summary: In short */
.cva-thumb{align-self:center;width:min(240px,70%);padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-md);display:flex;flex-direction:column;gap:8px;transform-origin:top center;animation:cva-shrink .6s var(--ease) both}
.cva-thumb b{font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cva-thumb i{display:block;height:8px;border-radius:4px;background:var(--surface-3)}
@keyframes cva-shrink{from{transform:scale(1.5);opacity:.2}to{transform:scale(1);opacity:1}}
.cva-short{gap:16px}
.cva-short h4{display:flex;align-items:center;gap:8px;font-size:var(--fs-xl)}
.cva-short h4 .ic{color:var(--green)}
.cva-bul{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:12px}
.cva-bul li{display:grid;grid-template-columns:8px 1fr;gap:12px;font-size:var(--fs-base);line-height:1.45;animation:cva-rise .24s var(--ease)}
.cva-bul li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--green);margin-top:8px}

/* dock: chips and the input */
.cva-dock{flex:none;display:flex;flex-direction:column;gap:8px;padding:8px 0 12px;padding-bottom:max(12px,env(safe-area-inset-bottom,0px));background:linear-gradient(to bottom,transparent,var(--bg) 16px);position:relative}
.cva-chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:4px 16px;scroll-padding:0 16px;scroll-snap-type:x proximity;max-width:672px;width:100%;margin:0 auto}
.cva-chips::-webkit-scrollbar{display:none}
.cva-chips:empty{display:none}
.cva-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:0 14px;border-radius:var(--r-full);border:1px solid var(--line-strong);background:var(--surface);font-size:var(--fs-sm);font-weight:600;white-space:nowrap;scroll-snap-align:start;flex:none;animation:cva-rise .18s var(--ease)}
.cva-chip:hover{background:var(--surface-2)}
.cva-chip .ic{width:16px;height:16px;color:var(--text-2)}
.cva-form{display:flex;align-items:flex-end;gap:8px;margin:0 16px;padding:6px 6px 6px 18px;max-width:640px;width:calc(100% - 32px);align-self:center;border-radius:28px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:var(--sh-md);transition:border-color var(--dur),box-shadow var(--dur),border-radius var(--dur)}
.cva-form:focus-within{border-color:var(--green);box-shadow:var(--sh-md),var(--ring)}
.cva-form.tall{border-radius:22px}
.cva-ta{flex:1;min-width:0;border:0;background:transparent;resize:none;font-size:var(--fs-base);line-height:1.45;padding:10px 0;max-height:150px;min-height:44px;outline:none;color:var(--text)}
.cva-ta::placeholder{color:var(--text-3)}
.cva-send{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;min-width:48px;padding:0 18px;border-radius:var(--r-full);background:var(--green);color:var(--on-green);font-weight:700;font-size:var(--fs-md);flex:none;transition:background var(--dur),transform var(--dur)}
.cva-send:hover{background:var(--green-hover)}
.cva-send:active{transform:scale(.97)}
.cva-send .ic{width:20px;height:20px}
.cva-send.go{background:var(--text);color:var(--surface)}
.cva-note{margin:0 16px;max-width:640px;align-self:center;width:calc(100% - 32px);font-size:var(--fs-sm);color:var(--text-2);display:flex;gap:8px;align-items:center}
.cva-note:empty{display:none}
.cva-note .ic{width:16px;height:16px;flex:none;color:var(--saffron-text)}

/* listening */
.cva-listen{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;flex-direction:column;align-items:center;gap:16px;padding:24px 16px;padding-bottom:max(24px,env(safe-area-inset-bottom,0px));background:var(--surface);border-top:1px solid var(--line);border-radius:var(--r-xl) var(--r-xl) 0 0;box-shadow:0 -12px 40px rgba(16,24,20,.12);animation:cva-up .26s var(--ease)}
.cva-listen[hidden]{display:none!important}
.cva-orb{position:relative;width:112px;height:112px;border-radius:50%;display:grid;place-items:center;color:#fff}
.cva-orb::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,#0A6B3D,#1E3A8A,#F28C28,#0A6B3D);filter:saturate(1.05);animation:cva-spin 6s linear infinite}
.cva-orb::after{content:"";position:absolute;inset:6px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.28),rgba(255,255,255,0) 60%),#0B4F2E}
.cva-orb .ic{position:relative;z-index:1;width:36px;height:36px}
.cva-orb.idle::before{animation:none;background:var(--line-strong)}
.cva-orb.idle::after{background:var(--surface-3)}
.cva-orb.idle{color:var(--text-2)}
.cva-wave{display:flex;align-items:center;justify-content:center;gap:4px;height:40px}
.cva-wave i{display:block;width:4px;height:8px;border-radius:2px;background:var(--green);transition:height .08s linear}
.cva-wave.anim i{animation:cva-bar 1.1s ease-in-out infinite}
@keyframes cva-bar{0%,100%{height:6px}50%{height:32px}}
.cva-ltitle{font-size:var(--fs-lg);font-weight:700}
.cva-lang{display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-xs);font-weight:700;color:var(--text-2);background:var(--surface-2);border-radius:var(--r-full);padding:4px 10px}
.cva-lang .ic{width:13px;height:13px}
.cva-trans{min-height:2.9em;max-width:560px;text-align:center;font-size:var(--fs-xl);line-height:1.35;font-weight:600;color:var(--text)}
.cva-trans:empty::before{content:attr(data-ph);color:var(--text-3);font-weight:400;font-size:var(--fs-base)}
.cva-lbtns{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cva-lbtns .btn{min-height:48px}

/* summary sheet: never covers the page completely; tap above it to close */
.cva.is-sheet{align-items:flex-end}
.cva.is-sheet .cva-panel{height:auto;max-height:84dvh;border-radius:var(--r-xl) var(--r-xl) 0 0}
.cva.is-sheet .cva-dock{display:none}
@media (min-width:760px){ .cva.is-sheet{align-items:center} .cva.is-sheet .cva-panel{border-radius:var(--r-xl);max-height:min(760px,calc(100dvh - 48px))} }
.cva-body{min-height:0}

/* "Did it work?" nudge when the page regains focus */
.cva-nudge{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:140;width:min(440px,calc(100vw - 32px));display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-lg);animation:cva-rise .26s var(--ease)}
.cva-nudge[hidden]{display:none!important}
.cva-nudge b{font-size:var(--fs-base)}
.cva-nudge .cva-btns .btn{min-height:44px}

/* pinch feedback on the page */
.cva-pinching{transition:transform .08s linear;transform-origin:center 30%}
.cva-pill{position:fixed;left:50%;top:24px;transform:translateX(-50%);z-index:149;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:var(--r-full);background:var(--text);color:var(--surface);font-weight:600;font-size:var(--fs-md);box-shadow:var(--sh-lg);pointer-events:none;animation:cva-rise .18s var(--ease)}
.cva-pill .ic{width:18px;height:18px}

@media (prefers-reduced-motion:reduce){
  .cva-orb::before,.cva-wave.anim i,.cva-step.run .st{animation:none!important}
  .cva-step.run .st{border-top-color:var(--line-strong);background:var(--green-50)}
}
@media (max-width:380px){
  .cva-head{gap:6px;padding-left:12px;padding-right:8px}
  .cva-head h2{font-size:var(--fs-md)}
  .cva-hbtn{padding:0 10px;gap:4px}
  .cva-mark{width:28px;height:28px}
}
.cva [tabindex="-1"]:focus-visible{outline:none}

/* ---------- life guides ---------- */
.cva-browse{display:flex;align-items:center;gap:12px;width:100%;min-height:72px;padding:12px 16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--line);box-shadow:var(--sh-sm);text-align:left;transition:box-shadow var(--dur),border-color var(--dur)}
.cva-browse:hover{box-shadow:var(--sh-md);border-color:var(--line-strong)}
.cva-browse .grow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.cva-browse b{font-size:var(--fs-base)}
.cva-browse small{font-size:var(--fs-sm);color:var(--text-2);line-height:1.35}
.cva-browse>.ic:last-child{color:var(--text-3)}
.cva-gmeta{display:flex;flex-wrap:wrap;gap:8px}
.cva-gmeta .cva-badge{gap:6px;height:28px;padding:0 10px}
.cva-card h4{display:flex;align-items:center;gap:8px}
.cva-card h4>.ic{color:var(--text-2);flex:none}
.cva-gsteps .d{display:block;color:var(--text-2);font-size:var(--fs-md);margin-top:2px}
.cva-gsteps b{display:block;font-weight:700}
.cva-gsteps .cva-link{min-height:36px}
.cva-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.cva-tile{padding:12px 16px;border-radius:var(--r-md);background:var(--surface-2)}
.cva-tile b{display:block;font-size:var(--fs-md);line-height:1.35}
.cva-callout,.cva-caution{display:flex;gap:12px;align-items:flex-start;padding:4px 0}
.cva-callout>.ic{color:var(--navy);flex:none;margin-top:2px}
.cva-caution>.ic{color:var(--saffron-text);flex:none;margin-top:2px}
.cva-callout p{color:var(--text)}
.cva-caution ul{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:var(--fs-md);line-height:1.45}
.cva-card:has(.cva-callout){background:var(--navy-50);border-color:transparent;box-shadow:none}
.cva-card:has(.cva-caution){background:var(--saffron-50);border-color:transparent;box-shadow:none}
.cva-tel{font-variant-numeric:tabular-nums;min-height:44px;--h:44px}
.cva-sos{display:flex;flex-direction:column;gap:12px;padding:16px;border-radius:var(--r-lg);background:var(--surface);border:1px solid var(--red-100);border-left:4px solid var(--red);box-shadow:var(--sh-sm);animation:cva-rise .24s var(--ease)}
.cva-sos .cva-ti{background:var(--red-50);color:var(--red)}
.cva-sos h4{font-size:var(--fs-lg)}
.cva-sos p{color:var(--text-2);font-size:var(--fs-md)}
.cva-sosbtns{display:flex;flex-direction:column;gap:8px}
.cva-sosbtns .btn{justify-content:flex-start;white-space:normal;text-align:left;min-height:52px}
.cva-call{background:var(--red);border-color:var(--red);color:#fff}
.cva-call:hover{background:var(--red);filter:brightness(.95)}
:root[data-theme="dark"] .cva-call{color:#1A0806}
.cva-gacts .btn{min-height:44px}
.cva-related{display:flex;flex-direction:column;gap:8px}
.cva-related .cva-pick button{white-space:normal;text-align:left;min-height:44px;padding:8px 16px}
.cva-tell{padding-top:4px}
.cva-browse-v{display:flex;flex-direction:column;gap:16px}
.cva-search{position:relative}
.cva-search>.ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--text-3);pointer-events:none}
.cva-search .input{padding-left:44px;min-height:52px;border-radius:var(--r-full);font-size:var(--fs-base)}
.cva-topics{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px;scroll-padding:0 16px}
.cva-topics::-webkit-scrollbar{display:none}
.cva-topics button{flex:none;white-space:nowrap}
@media (min-width:760px){ .cva-topics{flex-wrap:wrap;margin:0;padding:0;overflow:visible} }
.cva-row .faint{display:block;font-size:var(--fs-sm);line-height:1.4}
.cva-row .cva-link{display:flex;width:fit-content;min-height:36px}