/* जनप्रतिनिधि और कानूनी मदद (docs/SPEC-V8.md §7 batches 5–6, picture-first): /representatives, a representative's page, /whom-to-ask, /legal, a guide, /advocates and an advocate's page — the ward finder, role cards with our drawings, problem tiles, compact rows, the person header. Loaded after pages.css and help.css (civicStylesheets). 12 KB budget; tokens only. */
@layer components {
/* the site's loud sun, softened among these pale cards (as in help.css) */
.tone-sun:is(.cv-rep,.cv-issue,.cv-disc,.cv-person,.cv-card,.cv-guide){--tone:color-mix(in srgb,var(--sun) 26%,var(--surface));--art-accent:var(--sun-deep)}
.cv-find{display:grid;gap:12px;margin-block-start:4px;padding:16px;border-radius:24px;background:var(--mint);color:var(--mint-ink)}
.cv-find-head{display:flex;align-items:center;gap:12px;min-width:0}
.cv-find-art{flex:none;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;background:var(--surface)}
.cv-find-art svg{width:40px;height:40px}
.cv-find-text{display:grid;gap:2px;min-width:0}
.cv-find-title{margin:0;font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.25;color:var(--ink)}
.cv-find-sub{font-size:var(--t-sm);font-weight:600}
.cv-find-sub a{text-decoration:underline;text-underline-offset:.2em}
.cv-find .hp-search{max-width:none;margin:0}
.cv-find .hp-search input::-webkit-calendar-picker-indicator{display:none !important}
.cv-ward-big{margin:0;font-family:var(--font-display);font-weight:800;font-size:32px;line-height:1.1;color:var(--ink)}
.cv-reps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cv-rep{display:grid;align-content:start;gap:6px;min-width:0;padding:8px 8px 14px;border-radius:20px;background:var(--surface);box-shadow:var(--shadow);color:var(--ink)}
.cv-rep{position:relative}
.cv-rep-name::after{content:"";position:absolute;inset:0;border-radius:20px}
.cv-rep:hover .cv-rep-name{text-decoration:underline;text-underline-offset:.2em}
.cv-rep-call{position:relative;z-index:1;justify-self:start;display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-block-start:4px;padding:0 14px;border-radius:var(--r-pill);background:var(--ink);color:var(--on-ink);font-size:var(--t-sm);font-weight:700}
.cv-rep-call:hover{color:var(--on-ink)}
a.cv-rep:hover{color:var(--ink)}
.cv-rep-pic{display:grid;place-items:center;aspect-ratio:4/3;overflow:hidden;border-radius:14px;background:var(--tone);color:var(--tone-ink)}
.cv-rep-pic svg{width:64px;height:64px}
.cv-rep-pic img{display:block;width:100%;height:100%;object-fit:cover}
.cv-rep>:not(.cv-rep-pic){margin-inline:6px}
.cv-role{justify-self:start;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:var(--r-pill);background:var(--tone);color:var(--tone-ink);font-size:12px;font-weight:700;line-height:1.2}
.cv-rep-name{font-weight:700;font-size:15.5px;line-height:1.3;color:var(--ink)}
.cv-rep-where{font-size:var(--t-xs);color:var(--muted);line-height:1.4}
.cv-rep.is-empty .cv-rep-name{font-weight:600;color:var(--ink-2)}
.cv-issues{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.cv-issue{display:flex;align-items:center;gap:10px;min-height:60px;height:100%;padding:10px 12px;border-radius:18px;background:var(--tone);color:var(--tone-ink);font-weight:700;font-size:14px;line-height:1.3}
.cv-issue:hover{color:var(--tone-ink)}
.cv-issue>span{color:var(--ink)}
.cv-issue>.icon{flex:none}
.cv-issue.is-on{box-shadow:0 0 0 2px var(--ink)}
.cv-issue>.cv-count{flex:none;margin-inline-start:auto;min-width:24px;padding:1px 7px;border-radius:var(--r-pill);background:var(--surface);color:var(--ink-2);font-size:12px;text-align:center}
.cv-issue.is-all>.cv-count{background:color-mix(in srgb,var(--on-ink) 18%,transparent);color:var(--on-ink)}
.cv-issue.is-empty{opacity:.7}
.refine-body{display:grid;gap:12px;min-width:min(300px,86vw);padding:14px}
.refine>.refine-body{inset-inline:0 auto}
.cv-issue.is-all{background:var(--ink);color:var(--on-ink)}
.cv-issue.is-all>span{color:var(--on-ink)}
.cv-row{display:flex;align-items:center;gap:12px;padding-block:10px;color:var(--ink)}
.cv-row+.cv-row{border-block-start:1px solid var(--line)}
.cv-row:hover .cv-row-name{text-decoration:underline;text-underline-offset:.2em}
.cv-no{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--mint);color:var(--mint-ink);font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1}
.cv-disc{flex:none;display:grid;place-items:center;width:44px;height:44px;overflow:hidden;border-radius:50%;background:var(--tone);color:var(--tone-ink);font-family:var(--font-display);font-weight:800;font-size:18px;line-height:1}
.cv-disc img{display:block;width:100%;height:100%;object-fit:cover}
.cv-disc svg{width:32px;height:32px}
.cv-row-text{flex:1;min-width:0;display:grid;gap:1px}
.cv-row-name{font-weight:600;font-size:15px;line-height:1.35}
.cv-row-sub{font-size:var(--t-xs);color:var(--muted);line-height:1.45}
.cv-row>.icon{flex:none;color:var(--muted)}
.cv-row .hp-call{margin-inline-start:4px}
.cv-cols{columns:1}
.cv-cols .cv-row{break-inside:avoid}
.cv-what{display:grid;gap:2px;flex:1;min-width:0}
.cv-what strong{font-size:15px}
.cv-what span{font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.cv-list{margin:0;padding:0 14px 8px;list-style:none}
.cv-list>li{display:flex;align-items:flex-start;gap:12px;padding-block:12px;border-block-start:1px solid var(--line)}
.cv-list>.cv-cols{margin-block-end:4px}
.cv-person{display:flex;align-items:center;gap:16px;margin-block-start:10px}
.cv-person-pic{flex:none;display:grid;place-items:center;width:92px;height:92px;overflow:hidden;border-radius:24px;background:var(--tone);color:var(--tone-ink);font-family:var(--font-display);font-weight:800;font-size:36px}
.cv-person-pic svg{width:66px;height:66px}
.cv-person-pic img{display:block;width:100%;height:100%;object-fit:cover}
.cv-person-text{display:grid;gap:4px;min-width:0}
.cv-person .pg-h1{margin:0}
.cv-chips{display:flex;flex-wrap:wrap;gap:6px}
.cv-card{display:flex;align-items:flex-start;gap:12px;margin-block-start:18px;padding:14px;border-radius:20px;background:var(--tone);color:var(--tone-ink)}
.cv-card .cv-what span{color:var(--ink)}
.cv-card .hp-row-tile{background:var(--surface)}
.cv-links{display:flex;flex-wrap:wrap;gap:0 18px;margin-block-start:10px}
.cv-step{display:grid;gap:6px;padding-block:10px;border-block-start:1px solid var(--line)}
.cv-step-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px}
.cv-step .cv-row{padding-block:6px}
.cv-first{margin:0 0 6px;font-size:var(--t-sm);line-height:1.55;color:var(--ink)}
.cv-label{margin:10px 0 2px;font-size:var(--t-xs);font-weight:700;letter-spacing:.02em;color:var(--muted)}
.cv-tip{display:flex;gap:8px;align-items:flex-start;margin-block:10px 4px;padding:10px 12px;border-radius:14px;background:var(--surface-2);font-size:var(--t-sm);color:var(--ink-2);line-height:1.5}
.cv-tip .icon{flex:none;margin-block-start:2px}
.cv-help{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-block-start:16px;padding:16px;border-radius:24px;background:var(--lilac);color:var(--lilac-ink)}
.cv-help-art{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--surface)}
.cv-help-art svg{width:44px;height:44px}
.cv-help-text{flex:1 1 200px;display:grid;gap:4px;min-width:0}
.cv-help-title{font-family:var(--font-display);font-weight:800;font-size:19px;line-height:1.25;color:var(--ink)}
.cv-help-sub{font-size:var(--t-sm);font-weight:600}
.cv-help-acts{display:flex;flex-wrap:wrap;gap:8px}
.cv-help-acts .btn{min-height:46px}
.cv-guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cv-guide{display:grid;align-content:start;gap:8px;min-width:0;padding:12px;border-radius:20px;background:var(--tone);color:var(--tone-ink)}
.cv-guide:hover{color:var(--tone-ink)}
.cv-guide svg{width:48px;height:48px}
.cv-guide-name{font-weight:700;font-size:14.5px;line-height:1.3;color:var(--ink)}
.cv-guide-sub{font-size:12.5px;font-weight:600;line-height:1.35}
.cv-ticks{display:grid;gap:8px;margin:4px 0 8px;padding:0;list-style:none;font-size:var(--t-sm);line-height:1.5;color:var(--ink)}
.cv-ticks li{display:flex;gap:8px;align-items:flex-start}
.cv-ticks .icon{flex:none;margin-block-start:3px;color:var(--mint-ink)}
.cv-steps{display:grid;gap:14px;margin:0;padding:0;list-style:none}
.cv-steps li{display:grid;grid-template-columns:32px minmax(0,1fr);gap:12px;align-items:start;font-size:16px;line-height:1.6}
.cv-num{display:grid;place-items:center;width:32px;height:32px;border-radius:50%;background:var(--ink);color:var(--on-ink);font-family:var(--font-display);font-weight:800;font-size:15px}
.cv-modes{display:grid;gap:16px;margin-block-start:16px}
.cv-mode{overflow:hidden;border-radius:24px;background:var(--surface);box-shadow:var(--shadow)}
.cv-mode-pic{position:relative;display:grid;place-items:center;aspect-ratio:16/9;margin:0;overflow:hidden;background:var(--tone,var(--surface-2));color:var(--tone-ink)}
.cv-mode-pic img{display:block;width:100%;height:100%;object-fit:cover}
.cv-mode-pic svg{width:88px;height:88px}
.cv-mode-body{padding:12px 16px 8px}
.cv-mode-body .pg-h2{margin:0 0 4px}
.cv-body{max-width:68ch;font-size:16px;line-height:1.75}
.cv-body h2{margin:26px 0 8px;font-family:var(--font-display);font-weight:800;font-size:20px;line-height:1.3}
.cv-body p,.cv-body ul,.cv-body ol{margin:0 0 12px}
.cv-body ul,.cv-body ol{padding-inline-start:22px}
.cv-body li+li{margin-block-start:6px}
@media (min-width:720px){
.cv-find{grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);align-items:center;gap:16px 28px;padding:20px 24px;border-radius:28px}
.cv-find-art{width:72px;height:72px}
.cv-find-art svg{width:52px;height:52px}
.cv-find-title{font-size:24px}
.cv-ward-big{font-size:40px}
.cv-reps{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cv-rep-pic{aspect-ratio:16/11}
.cv-rep-pic svg{width:112px;height:112px}
.cv-rep-name{font-size:17px}
.cv-issues{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.cv-issue{min-height:68px;padding:12px 14px;font-size:15px}
.cv-cols{columns:2;column-gap:32px}
.cv-person-pic{width:120px;height:120px;border-radius:28px;font-size:46px}
.cv-person-pic svg{width:86px;height:86px}
.cv-help{gap:16px 22px;padding:20px 24px;border-radius:28px}
.cv-help-art{width:84px;height:84px}
.cv-help-art svg{width:58px;height:58px}
.cv-help-title{font-size:23px}
.cv-guides{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.cv-modes{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start}
.cv-guide{padding:16px;border-radius:24px}
.cv-guide svg{width:60px;height:60px}
.cv-guide-name{font-size:16px}
}
}