/* phwo-match — My PHWO dashboard v3 (8 Oct 2026). Depends on phwo-acct-ds (tokens).
 * Overrides the plugin's inline <style> blocks; selectors are prefixed with .phwo-acct for specificity.
 * Mobile first: 360/390/414 base, 768 + 1280 enhancements. */

/* ---------- shared ---------- */
.phwo-acct :is(.ms-wrap,.vp-wrap,.mr-wrap){max-width:960px;width:100%;box-sizing:border-box;color:var(--ds-ink,#13262b)}
.phwo-acct :is(.ms-wrap,.vp-wrap,.mr-wrap) h2{font-size:var(--ds-fs-xl,1.375rem);margin:0 0 var(--ds-s2,8px);color:var(--ds-ink,#13262b);line-height:1.3}
.phwo-acct :is(.ms-wrap,.vp-wrap,.mr-wrap,.mrv) :is(h2,h3,h4,h5,p,span,b,label,legend,summary,button,a){overflow-wrap:normal;word-break:normal;hyphens:none}
.phwo-acct :is(.ms-lead,.mr-lead,.ms-fine,.vp-fine,.mr-fine){color:var(--ds-mute,#5b6c70);font-size:var(--ds-fs-sm,.875rem);line-height:1.55}
.phwo-acct :is(.ms-note,.vp-note){border-radius:var(--ds-r,12px);padding:var(--ds-s3,12px) var(--ds-s4,16px);background:var(--ds-info-50,#eaf2fa);color:var(--ds-ink-2,#3a4b50);border:0}
.phwo-acct :is(.ms-warn,.vp-warn){background:var(--ds-warn-50,#fff4e0);border:0;border-inline-start:4px solid var(--ds-gold,#E8A33D)}
.phwo-acct .ms-note a{font-weight:600;color:var(--ds-teal,#0D5C63)}

/* ---------- Find a match: segmented tabs ---------- */
.phwo-acct .ms-seg{display:flex;gap:4px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;background:#eef1f2;border-radius:var(--ds-r-pill,999px);padding:4px;margin:var(--ds-s2,8px) 0 var(--ds-s3,12px)}
.phwo-acct .ms-seg::-webkit-scrollbar{display:none}
.phwo-acct .ms-seg a{flex:1 0 auto;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 var(--ds-s4,16px);border:0;border-radius:var(--ds-r-pill,999px);color:var(--ds-ink-2,#3a4b50);font-weight:600;font-size:var(--ds-fs-sm,.875rem);white-space:nowrap;text-decoration:none;background:transparent}
.phwo-acct .ms-seg a.is-on{background:var(--ds-surface,#fff);color:var(--ds-teal,#0D5C63);box-shadow:var(--ds-sh-1)}
.phwo-acct .ms-how{background:var(--ds-surface,#fff);border:1px solid var(--ds-line,#e3e8e9);border-radius:var(--ds-r,12px)}
.phwo-acct .ms-how summary{min-height:44px;display:flex;align-items:center}
.phwo-acct .ms-pick select{max-width:100%}

/* search + filter bar */
.phwo-acct .md-search input{border-color:var(--ds-line-2,#d3dbdc);border-radius:var(--ds-r-pill,999px);font-size:16px}
.phwo-acct .ms-bar{gap:var(--ds-s2,8px)}
.phwo-acct .ms-fbtn{min-height:48px;border-radius:var(--ds-r-pill,999px);border-color:var(--ds-line-2,#d3dbdc);color:var(--ds-teal,#0D5C63);white-space:nowrap}
.phwo-acct :is(.ms-count,.md-count,.ms-sort){color:var(--ds-mute,#5b6c70);white-space:nowrap}

/* filters: bottom sheet on phones */
.phwo-acct .ms-sheet{background:rgba(19,38,43,.45)}
.phwo-acct .ms-sheet-in{border-radius:var(--ds-r-lg,16px) var(--ds-r-lg,16px) 0 0;padding:var(--ds-s4,16px) var(--ds-s4,16px) calc(var(--ds-s4,16px) + var(--ds-safe-b,0px));box-shadow:var(--ds-sh-3)}
.phwo-acct .ms-sheet-in::before{content:"";justify-self:center;width:40px;height:4px;border-radius:4px;background:var(--ds-line-2,#d3dbdc)}
.phwo-acct .ms-sheet-in select{min-height:48px;width:100%}
.phwo-acct .ms-sheet-act{border-top:1px solid var(--ds-line,#e3e8e9);padding-top:var(--ds-s3,12px)}
.phwo-acct .ms-sheet-act :is(button,a){min-height:48px;flex:1}

/* cards: full width on phones */
.phwo-acct .ms-list{gap:var(--ds-s3,12px)}
.phwo-acct .ms-card{border:1px solid var(--ds-line,#e3e8e9);border-radius:var(--ds-r-lg,16px);box-shadow:var(--ds-sh-1);padding:var(--ds-s4,16px);gap:var(--ds-s2,8px);min-width:0}
.phwo-acct .ms-card h4,.phwo-acct .md-head h4{color:var(--ds-ink,#13262b);font-size:var(--ds-fs,1rem);line-height:1.35}
.phwo-acct .md-head{min-width:0}.phwo-acct .md-head>div{min-width:0}
.phwo-acct .md-sub{color:var(--ds-mute,#5b6c70)}
.phwo-acct .md-av{background-color:var(--ds-teal,#0D5C63)}
.phwo-acct :is(.ms-fit,.md-fit){white-space:normal;font-size:var(--ds-fs-xs,.75rem);border-radius:var(--ds-r-pill,999px)}
.phwo-acct :is(.ms-fit,.md-fit.ok){background:var(--ds-ok-50,#e9f6ef);color:var(--ds-ok,#1f7a4d)}
.phwo-acct .md-fit.soft{background:var(--ds-warn-50,#fff4e0);color:var(--ds-warn,#9a5b00)}
.phwo-acct .md-fit.hard{background:#eef1f2;color:var(--ds-mute,#5b6c70)}
.phwo-acct .ms-chip{background:#eef1f2;color:var(--ds-ink-2,#3a4b50);font-size:var(--ds-fs-xs,.75rem);font-weight:600;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.phwo-acct .ms-chip.u{background:var(--ds-warn-50,#fff4e0);color:var(--ds-warn,#9a5b00)}
.phwo-acct .ms-chip.v{background:var(--ds-teal-50,#eef5f5);color:var(--ds-teal,#0D5C63)}
.phwo-acct .ms-row{color:var(--ds-ink-2,#3a4b50);font-size:var(--ds-fs-sm,.875rem)}
.phwo-acct .ms-row b{color:var(--ds-mute,#5b6c70)}
.phwo-acct .ms-sum{background:var(--ds-bg,#f5f7f7);border-radius:var(--ds-r-sm,8px);font-size:var(--ds-fs-sm,.875rem)}
.phwo-acct .ms-req{min-height:48px;border-radius:var(--ds-r,12px);background:var(--ds-teal,#0D5C63);color:#fff;font-size:var(--ds-fs-sm,.875rem);white-space:nowrap;padding:0 var(--ds-s4,16px)}
.phwo-acct .ms-req:hover{background:var(--ds-teal-700,#0a4a50)}
.phwo-acct .ms-req[disabled]{background:#b9c4c6}
.phwo-acct .md-star{border-color:var(--ds-line-2,#d3dbdc);border-radius:var(--ds-r,12px);color:var(--ds-gold,#E8A33D)}
.phwo-acct .md-star[aria-pressed=true]{background:var(--ds-gold-50,#fdf5e7);border-color:var(--ds-gold,#E8A33D)}
.phwo-acct .md-cmp{white-space:nowrap}
.phwo-acct .ms-empty{border-color:var(--ds-line-2,#d3dbdc);border-radius:var(--ds-r,12px);background:var(--ds-surface,#fff);color:var(--ds-mute,#5b6c70)}
.phwo-acct .ms-empty .phwo-btn{margin-top:var(--ds-s2,8px)}
.phwo-acct .md-pager{flex-wrap:wrap}
.phwo-acct .md-pager button{border-color:var(--ds-line-2,#d3dbdc);color:var(--ds-teal,#0D5C63);border-radius:var(--ds-r,12px);white-space:nowrap}

/* compare bar: sticky above the mobile tab bar */
.phwo-acct .md-cbar{background:var(--ds-ink,#13262b);border-radius:var(--ds-r,12px);bottom:calc(72px + var(--ds-safe-b,0px));box-shadow:var(--ds-sh-3)}
.phwo-acct .md-cbar .ms-req{background:var(--ds-gold,#E8A33D);color:var(--ds-ink,#13262b)}
.phwo-acct .md-ctab th{background:var(--ds-bg,#f5f7f7)}
.phwo-acct .md-ctab :is(th,td){border-color:var(--ds-line,#e3e8e9)}

/* detail sheet + request form */
.phwo-acct .md-dlg{background:rgba(19,38,43,.5)}
.phwo-acct .md-dlg-in{border-radius:var(--ds-r-lg,16px) var(--ds-r-lg,16px) 0 0;padding-bottom:calc(var(--ds-s5,24px) + var(--ds-safe-b,0px));box-shadow:var(--ds-sh-3)}
.phwo-acct .md-x{background:#eef1f2}
.phwo-acct .md-sec h5{color:var(--ds-ink,#13262b);font-size:var(--ds-fs-sm,.875rem)}
.phwo-acct .md-meter i{background:var(--ds-teal,#0D5C63)}
.phwo-acct :is(.md-stars,.vp-rv .st){color:var(--ds-gold,#E8A33D)}
.phwo-acct .md-form{border-top-color:var(--ds-line,#e3e8e9)}
.phwo-acct .md-opt{min-height:48px;align-items:center;border-color:var(--ds-line,#e3e8e9);border-radius:var(--ds-r,12px)}
.phwo-acct .md-opt:has(input:checked){border-color:var(--ds-teal,#0D5C63);background:var(--ds-teal-50,#eef5f5)}
.phwo-acct .md-form :is(select,textarea){font-size:16px;border-color:var(--ds-line-2,#d3dbdc)}
.phwo-acct .md-form .ms-req{position:sticky;bottom:0;width:100%}
.phwo-acct .md-rep summary{color:var(--ds-mute,#5b6c70)}

/* ---------- My volunteer profile ---------- */
.phwo-acct .vp-meter{border:1px solid var(--ds-line,#e3e8e9);border-radius:var(--ds-r-lg,16px);padding:var(--ds-s4,16px);background:var(--ds-surface,#fff)}
.phwo-acct .vp-mh span{color:var(--ds-teal,#0D5C63)}
.phwo-acct .vp-bar{background:#eef1f2;height:10px}
.phwo-acct .vp-bar i{background:var(--ds-teal,#0D5C63)}
.phwo-acct .vp-form :is(input[type=text],input[type=number],textarea){border-color:var(--ds-line-2,#d3dbdc);border-radius:var(--ds-r-sm,8px)}
.phwo-acct .vp-l{color:var(--ds-ink,#13262b)}
.phwo-acct .vp-grid{overflow-x:auto;max-width:100%}
.phwo-acct .vp-grid table{min-width:0}
.phwo-acct .vp-cell input:checked+span{background:var(--ds-teal,#0D5C63);border-color:var(--ds-teal,#0D5C63)}
.phwo-acct .vp-cell input:focus-visible+span{outline-color:var(--ds-teal,#0D5C63)}
.phwo-acct :is(.vp-btn,.mrv-btn){background:var(--ds-teal,#0D5C63);border-radius:var(--ds-r,12px);white-space:nowrap}
.phwo-acct :is(.vp-btn,.mrv-btn):hover{background:var(--ds-teal-700,#0a4a50)}
.phwo-acct .vp-rv li{border-top-color:var(--ds-line,#e3e8e9)}

/* ---------- Match requests ---------- */
.phwo-acct .mr-card{background:var(--ds-surface,#fff);border:1px solid var(--ds-line,#e3e8e9);border-radius:var(--ds-r-lg,16px);box-shadow:var(--ds-sh-1);padding:var(--ds-s4,16px);margin:0 0 var(--ds-s3,12px);scroll-margin-top:80px}
.phwo-acct .mr-card:target{border-color:var(--ds-teal,#0D5C63);box-shadow:var(--ds-focus)}
.phwo-acct .mr-st-asked{border-inline-start:4px solid var(--ds-gold,#E8A33D)}
.phwo-acct .mr-top{display:flex;flex-wrap:wrap;gap:var(--ds-s2,8px);align-items:center;margin:0 0 var(--ds-s2,8px)}
.phwo-acct .mr-contact{font-weight:600;overflow-wrap:anywhere}
.phwo-acct .mr-acts{display:grid;grid-template-columns:1fr;gap:var(--ds-s2,8px);margin-top:var(--ds-s3,12px)}
.phwo-acct .mr-ans{margin:0}
.phwo-acct .mr-ans .phwo-ds-btn{width:100%;min-height:48px}
.phwo-acct .phwo-mlife{border-top:1px solid var(--ds-line,#e3e8e9);margin-top:var(--ds-s3,12px);padding-top:var(--ds-s3,12px)}
.phwo-acct .ml-box{border-radius:var(--ds-r,12px);padding:var(--ds-s3,12px) var(--ds-s4,16px);margin:var(--ds-s2,8px) 0}
.phwo-acct .ml-act{background:var(--ds-warn-50,#fff4e0);border-inline-start:4px solid var(--ds-gold,#E8A33D)}
.phwo-acct .ml-info{background:var(--ds-info-50,#eaf2fa)}
.phwo-acct .phwo-mlife-f{display:grid;gap:var(--ds-s2,8px);margin:var(--ds-s2,8px) 0}
.phwo-acct .phwo-mlife-f label{display:block;font-weight:600;font-size:var(--ds-fs-sm,.875rem)}
.phwo-acct .phwo-mlife-f label:has(input[type=radio]),.phwo-acct .phwo-mlife-f label:has(input[type=checkbox]){display:inline-flex;align-items:center;gap:var(--ds-s2,8px);min-height:48px;margin-inline-end:var(--ds-s4,16px)}
.phwo-acct .phwo-mlife-f :is(input[type=radio],input[type=checkbox]){width:22px;height:22px}
.phwo-acct .phwo-mlife-f :is(input[type=text],input[type=date],input[type=time],input[type=number],select){width:100%;box-sizing:border-box;min-height:48px}
.phwo-acct .phwo-mlife-f br{display:none}
.phwo-acct .phwo-mlife :is(.button,button){display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 var(--ds-s4,16px);border-radius:var(--ds-r,12px);border:1px solid var(--ds-line-2,#d3dbdc);background:#fff;color:var(--ds-teal,#0D5C63);font-weight:600;font-size:var(--ds-fs-sm,.875rem);white-space:nowrap;cursor:pointer;text-decoration:none;box-sizing:border-box}
.phwo-acct .phwo-mlife .button-primary{background:var(--ds-teal,#0D5C63);border-color:var(--ds-teal,#0D5C63);color:#fff}
.phwo-acct .phwo-mlife form[data-inl]{display:inline-block;margin-inline-end:var(--ds-s2,8px)}
.phwo-acct .ml-inl{display:inline-block}
.phwo-acct .phwo-mlife summary{min-height:48px;display:flex;align-items:center;gap:var(--ds-s2,8px);cursor:pointer;font-weight:600;color:var(--ds-teal,#0D5C63)}
.phwo-acct .ml-inl>summary.button{display:inline-flex}
.phwo-acct .ml-det{border-top:1px solid var(--ds-line,#e3e8e9);margin:0}
.phwo-acct .ml-h{display:flex;flex-wrap:wrap;gap:var(--ds-s2,8px);align-items:center;margin:var(--ds-s3,12px) 0 var(--ds-s1,4px);font-size:var(--ds-fs,1rem)}
.phwo-acct .ml-list{margin:0;padding-inline-start:var(--ds-s5,24px)}
.phwo-acct .ml-list li{padding:var(--ds-s1,4px) 0}
.phwo-acct .ml-sub{padding:var(--ds-s3,12px);border:1px solid var(--ds-line,#e3e8e9);border-radius:var(--ds-r,12px);background:var(--ds-surface,#fff)}
.phwo-acct .ml-link{color:var(--ds-teal,#0D5C63)}
/* The overview banner is replaced by the unified "Your progress" checklist (phwo_acct_progress_items). */
.phwo-acct .phwo-mlife-need{display:none}

/* ---------- review prompt ---------- */
.phwo-acct .mrv{background:var(--ds-surface,#fff);border:1px solid var(--ds-line,#e3e8e9);border-inline-start:4px solid var(--ds-gold,#E8A33D);border-radius:var(--ds-r-lg,16px);box-shadow:var(--ds-sh-1);padding:var(--ds-s4,16px)}
.phwo-acct .mrv h3{font-size:var(--ds-fs-lg,1.125rem)}
.phwo-acct .mrv-f{border-top-color:var(--ds-line,#e3e8e9)}
.phwo-acct .mrv-stars label{color:var(--ds-line-2,#d3dbdc)}
.phwo-acct .mrv-stars input:checked~label,.phwo-acct .mrv-stars label:hover,.phwo-acct .mrv-stars label:hover~label{color:var(--ds-gold,#E8A33D)}
.phwo-acct .mrv textarea{border-color:var(--ds-line-2,#d3dbdc)}
.phwo-acct .mrv-btn{width:100%}

/* ---------- report / block ---------- */
.phwo-acct .mrb-b{border-color:var(--ds-line-2,#d3dbdc);border-radius:var(--ds-r,12px);white-space:nowrap}
.phwo-acct .mrb-p{background:var(--ds-teal,#0D5C63);border-color:var(--ds-teal,#0D5C63)}

/* ---------- Urdu / RTL ---------- */
html[lang^="ur"] .phwo-acct :is(.ms-wrap,.vp-wrap,.mr-wrap,.mrv,.md-dlg-in){line-height:1.9}
html[lang^="ur"] .phwo-acct :is(.ms-chip,.md-fit,.ms-fit,.phwo-ds-chip){line-height:1.8;padding-top:0;padding-bottom:0}
html[dir="rtl"] .phwo-acct .ml-list{padding-inline-start:var(--ds-s5,24px)}
.phwo-acct bdi{unicode-bidi:isolate;direction:ltr}

/* ---------- larger screens ---------- */
@media (min-width:600px){
	.phwo-acct .mr-acts{grid-template-columns:auto auto;justify-content:start}
	.phwo-acct .mr-ans .phwo-ds-btn{width:auto;min-width:180px}
	.phwo-acct .mrv-btn{width:auto}
	.phwo-acct .phwo-mlife-f:has(input[type=date]){grid-template-columns:1fr 1fr}
	.phwo-acct .phwo-mlife-f:has(input[type=date])>:is(p,label:has(input[name=note]),label:has(input[name=reason]),label:has(input[name=weekly]),label:has(input[name=weeks])){grid-column:1/-1}
}
@media (min-width:782px){
	.phwo-acct .ms-sheet-in{border-radius:var(--ds-r-lg,16px);box-shadow:none;padding:var(--ds-s4,16px)}
	.phwo-acct .ms-sheet-in::before{display:none}
	.phwo-acct .md-cbar{bottom:var(--ds-s3,12px)}
	.phwo-acct .md-dlg-in{border-radius:var(--ds-r-lg,16px)}
}
@media (min-width:1200px){
	.phwo-acct .ms-list{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
}