#volunteerScreen{max-width:1200px;margin:0 auto;padding:24px 6px 72px;color:#203044} .v-heading-actions{display:flex;align-items:flex-start;gap:14px}.v-flow-back{border:1px solid #d6e3eb;background:#f3f8fa;color:#2c6a82;border-radius:999px;padding:8px 13px;font-size:12px;white-space:nowrap}.v-flow-steps{display:flex;align-items:center;gap:9px;margin:0 8px 15px;color:#91a0ad;font-size:12px}.v-flow-steps span{padding:7px 11px;border-radius:999px;background:#f2f5f7}.v-flow-steps span.is-active{background:#e4f3ee;color:#1d705b;font-weight:650}.v-flow-steps i{font-style:normal;color:#aab6bf}.v-result-summary{margin:12px 4px;padding:11px 14px;border:1px solid #d7e8e0;border-radius:10px;background:#f4fbf8;color:#2f6d5c;font-size:12px;line-height:1.6}.v-probability-note{margin:-5px 0 12px;color:#8a7966;font-size:11px;line-height:1.7}.v-candidate-main{min-width:0;flex:1}.v-candidate-title{display:flex;align-items:center;gap:10px;min-width:0}.v-candidate-title h3{min-width:0}.v-major-select{border:1px solid #2d72ff;background:#f3f7ff;color:#2d67d2;border-radius:999px;padding:6px 11px;font-size:11px;font-weight:600;white-space:nowrap;flex-shrink:0}.v-major-select.is-selected{background:#e9f0ff}.v-year-compare{font-weight:650;color:#c16932}.v-history-audit{color:#9a8575!important}.v-risk-reach{background:#fff0e9;color:#c06137} #volunteerScreen[data-flow-page="profile"] .v-workspace,#volunteerScreen[data-flow-page="profile"] .v-result-summary,#volunteerScreen[data-flow-page="profile"] .v-mobile-tabs{display:none} #volunteerScreen[data-flow-page="results"] .v-profile,#volunteerScreen[data-flow-page="results"] .v-context-note{display:none} .v-heading{display:flex;align-items:center;justify-content:space-between;padding:24px 8px 30px;gap:20px} .v-heading p{font-size:10px;letter-spacing:2px;color:#5c7b91;margin:0 0 12px;font-weight:650} .v-heading h1{font-size:36px;letter-spacing:-1.3px;font-weight:650;margin:0 0 10px;line-height:1.3} .v-heading span{font-size:14px;color:#6f7c8c}.v-heading-mark{width:88px;flex-shrink:0;font-size:46px;line-height:1;color:#246b82;font-weight:300;text-align:center;letter-spacing:-2px} .v-heading-mark small{display:block;font-size:10px;letter-spacing:2px;margin-top:12px} .v-profile{padding:22px 24px;background:#fff;border:1px solid #e2e7ed;border-radius:20px;box-shadow:0 4px 18px #21334903} .v-profile-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px} .v-profile label,.v-adjustment{font-size:12px;color:#66758a;font-weight:500;display:flex;flex-direction:column;gap:7px} #volunteerScreen input,#volunteerScreen select{border:1px solid #dce2e9;border-radius:10px;background:#f8fafc;color:#203044;min-height:44px;width:100%;padding:10px 12px;font-size:14px;outline:none;min-width:0} #volunteerScreen input:focus,#volunteerScreen select:focus{border-color:#3885a2;box-shadow:0 0 0 3px #3885a214} #volunteerScreen button:focus-visible{outline:3px solid #80b8df;outline-offset:3px} .v-button{border:1px solid #dbe3ea;background:#fff;color:#314d64;border-radius:10px;padding:10px 14px;font-size:13px;font-weight:550;min-height:40px;white-space:nowrap;transition:background .15s} .v-button-primary{background:#225f7a;border-color:#225f7a;color:#fff}.v-button-primary:hover{background:#18485e}.v-button-quiet{background:#eff4f7;border-color:#e3eaf0;color:#325a70} .v-profile-grid>.v-button{align-self:end;min-height:44px;font-size:14px}.v-profile-grid>.v-button span{margin-left:15px} #volunteerScreen button:disabled{opacity:.4;cursor:default}.v-rules{border-top:1px solid #edf0f4;margin-top:20px;padding-top:14px;font-size:12px;color:#6c7b8d;line-height:1.8} .v-rules summary,.v-source summary{cursor:pointer;color:#4b6b82}.v-rules p{margin:12px 0}.v-thresholds{display:flex;gap:20px;flex-wrap:wrap}.v-thresholds label{display:flex;flex-direction:row;align-items:center;gap:8px}#volunteerScreen .v-thresholds input{width:65px;min-height:36px;padding:5px 8px} .v-context-note{font-size:12px;line-height:1.9;color:#6b7b8c;margin:16px 4px 0}.v-status{font-size:13px;color:#225f7a;min-height:20px;line-height:1.7;margin:8px 4px 16px} .v-workspace{display:grid;grid-template-columns:minmax(0,1fr) 332px;align-items:start;gap:24px}.v-section-title{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:0 0 15px} .v-section-title h2{font-size:18px;letter-spacing:-.4px;margin:0;font-weight:650}.v-section-title h3{font-size:15px;margin:0}.v-section-title>span{font-size:12px;color:#8090a1;white-space:nowrap}.v-section-title>strong{font-size:18px;font-variant-numeric:tabular-nums;color:#376882;font-weight:500} .v-filters{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px}#volunteerScreen .v-filters input,#volunteerScreen .v-filters select{background:white;font-size:12px;min-height:40px;padding:8px 10px} .v-risk-tabs{display:flex;gap:5px;flex-wrap:wrap;margin:14px 0}.v-risk-tabs button{border:0;background:#e9eef3;border-radius:8px;color:#738295;padding:8px 10px;font-size:12px}.v-risk-tabs button[aria-pressed="true"]{background:#243e53;color:white}.v-risk-tabs span{opacity:.75;font-size:10px;margin-left:3px} .v-candidate{border:1px solid #e3e8ee;border-radius:16px;background:white;padding:19px 20px;margin-bottom:12px;box-shadow:0 3px 12px #1a3a5103} .v-candidate header{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.v-candidate h3{font-size:17px;font-weight:600;line-height:1.5;margin:0;color:#203044}.v-candidate header p{font-size:11px;color:#7b8796;line-height:1.7;margin:5px 0 0} .v-risk{display:inline-block;border-radius:6px;padding:4px 8px;font-size:11px;font-weight:550;white-space:nowrap;background:#f0f2f5;color:#758295}.v-risk-reach{background:#fff2e8;color:#ae7040}.v-risk-steady{background:#edf2ff;color:#5369a5}.v-risk-safe{background:#eaf5ee;color:#398362}.v-risk-far{background:#f7eded;color:#ad7070} .v-candidate-badges{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:4px;max-width:46%}.v-risk-tag{display:inline-block;border-radius:5px;padding:3px 5px;font-size:10px;line-height:1.2;white-space:nowrap;background:#f0f2f5;color:#687789}.v-risk-tag-shrink{background:#fff0ee;color:#c54843}.v-risk-tag-expand{background:#ecf8f1;color:#23834e}.v-risk-tag-volatile{background:#fff7df;color:#a87610}.v-risk-tag-new{background:#edf1f5;color:#687789} .v-candidate-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:18px 0 12px;padding:13px 14px;background:#f6f8fa;border-radius:10px;gap:10px}.v-candidate-metrics small{display:block;color:#8190a0;font-size:10px;margin-bottom:6px}.v-candidate-metrics strong{font-size:19px;font-weight:550;letter-spacing:-.3px;font-variant-numeric:tabular-nums}.v-candidate-metrics em{font-size:10px;font-weight:400;color:#8794a3;font-style:normal;margin-left:3px} .v-major-summary{color:#64758a;font-size:12px;line-height:1.8;margin:8px 0 13px;overflow-wrap:anywhere}.v-candidate-footer{display:flex;align-items:center;justify-content:space-between;gap:8px}.v-verification{font-size:10px;color:#8d8173}.v-candidate-footer>div{display:flex;gap:12px;align-items:center;flex-shrink:0}.v-text-button{border:0;background:none;font-size:12px;color:#4b7b98;padding:7px 0} .v-source{margin-top:12px;border-top:1px solid #eef1f5;padding-top:10px;font-size:10px;line-height:1.7;color:#8a94a1}.v-source p{overflow-wrap:anywhere}.v-source a,.v-rules a{color:#326d8a} .v-more{width:100%;background:transparent}.v-empty{padding:36px 20px;text-align:center;color:#8592a2}.v-empty strong{font-size:14px;font-weight:500;display:block;color:#62748b}.v-empty p{font-size:12px;line-height:1.9;margin-top:10px}.v-empty-icon{display:block;font-size:24px;width:46px;height:46px;line-height:46px;border:1px dashed #ccd8e2;border-radius:50%;margin:0 auto 18px;color:#89a2b6} .v-draft-panel{position:sticky;top:72px;border:1px solid #dce5eb;background:#fbfcfe;border-radius:18px;padding:20px;max-height:calc(100vh - 95px);overflow:auto} .v-draft-distribution{display:flex;align-items:center;gap:7px}.v-draft-distribution small{font-size:11px;color:#8b96a4;margin-left:auto}.v-draft-hint{font-size:11px;line-height:1.8;color:#8390a0;margin:14px 0} .v-choice{display:flex;gap:10px;padding:16px 0;border-top:1px solid #e7ecf1}.v-choice-number{font-size:15px;color:#99aaba;font-variant-numeric:tabular-nums;padding-top:2px;width:20px;flex-shrink:0}.v-choice-content{min-width:0;flex:1}.v-choice-content h3{font-size:14px;line-height:1.6;font-weight:600;margin:0}.v-choice-content p,.v-choice-content small{font-size:10px;color:#8090a1;margin:4px 0 8px}.v-choice-content ol{font-size:11px;line-height:1.7;color:#667b90;margin:8px 0;padding-left:17px;overflow-wrap:anywhere}.v-choice-invalid .v-choice-number{color:#ad7044}.v-choice-actions{display:flex;gap:8px;margin-top:9px}.v-choice-actions button{border:1px solid #dde6ed;border-radius:6px;padding:5px 8px;background:white;color:#75879a;font-size:11px;min-width:29px;min-height:29px}.v-choice-actions button:last-child{margin-left:auto} .v-draft-bottom{border-top:1px solid #e5ebf0;padding-top:15px;display:flex;flex-direction:column;align-items:stretch;gap:8px}.v-draft-bottom small{font-size:10px;color:#8b97a6;text-align:center;line-height:1.7} .v-mobile-tabs{display:none}.v-dialog{border:1px solid #e0e6ed;border-radius:20px;padding:0;max-width:620px;width:calc(100% - 28px);max-height:90dvh;color:#203044;background:#fff;box-shadow:0 30px 100px #162d4930}.v-dialog[open]{display:flex;flex-direction:column}.v-dialog::backdrop{background:#12203455;backdrop-filter:blur(3px)} .v-dialog-heading{padding:24px 24px 16px;display:flex;justify-content:space-between;gap:15px;border-bottom:1px solid #edf1f5;flex-shrink:0}.v-dialog-heading h2{font-size:20px;font-weight:600;margin:0;line-height:1.6}.v-dialog-heading p{font-size:12px;color:#8390a0;margin:6px 0;line-height:1.6}.v-dialog-heading>button{border:0;background:#f1f4f7;color:#7b899a;font-size:22px;width:32px;height:32px;border-radius:50%;flex-shrink:0} .v-dialog-body{padding:20px 24px;overflow:auto}.v-dialog-footer{padding:16px 24px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid #edf1f5;flex-shrink:0;background:#fff}.v-selected-majors{background:#f4f7f9;padding:12px;border-radius:10px;margin-bottom:18px}.v-selected-majors>div{display:flex;align-items:center;gap:8px;padding:6px 0;font-size:12px}.v-selected-majors span{flex:1;line-height:1.7}.v-selected-majors button{border:0;border-radius:5px;background:white;padding:6px 9px;color:#62829a;flex-shrink:0}.v-selected-majors p{font-size:12px;color:#8b98a5;margin:5px} .v-major-option{display:flex;gap:12px;padding:14px 0;border-bottom:1px solid #edf1f4;align-items:start;cursor:pointer}.v-major-option strong{display:block;font-size:13px;line-height:1.7;font-weight:550}.v-major-option small{display:block;font-size:10px;color:#8391a1;line-height:1.9}.v-major-option small:last-child{color:#9d8b78}#volunteerScreen .v-major-option input{width:18px;height:18px;min-height:18px;flex-shrink:0;margin:2px 0;accent-color:#225f7a}.v-major-disabled{opacity:.55;cursor:default}.v-adjustment{margin-top:20px}.v-field-error{font-size:12px;line-height:1.8;color:#b36a52}.v-export-dialog{max-width:440px}.v-export-dialog .v-dialog-body>p{font-size:12px;color:#8090a2;line-height:1.8}.v-export-option{display:block;width:100%;text-align:left;border:1px solid #e1e8ee;background:#f8fafb;padding:16px;border-radius:12px;margin:10px 0;color:#285872;font-size:15px;font-weight:550}.v-export-option strong{display:block;font-size:15px;font-weight:550}.v-export-option span{display:block;font-weight:400;font-size:11px;color:#8b98a5;margin-top:6px} #openVolunteer{margin-top:16px;border:1px solid #d6e3eb;border-radius:14px;background:linear-gradient(110deg,#eef5f8,#f9fbfd);padding:18px 20px;color:#275c76}#openVolunteer .row-content small{color:#8298a8} @media(min-width:1100px){body.volunteer-mode #appMain{width:min(1200px,calc(100% - 400px));max-width:none;margin-left:max(350px,calc(50% - 350px));margin-right:30px}} @media(max-width:1000px){.v-workspace{grid-template-columns:minmax(0,1fr) 290px;gap:16px}.v-candidate{padding:16px}.v-candidate-footer{flex-direction:column;align-items:flex-start;gap:8px}.v-candidate-footer>div{width:100%;justify-content:space-between}.v-draft-panel{padding:16px}} @media(max-width:760px){#volunteerScreen{padding:4px 0 40px}.v-heading{padding:22px 2px;gap:8px}.v-heading h1{font-size:27px;letter-spacing:-.8px}.v-heading p{font-size:8px;letter-spacing:1.3px;margin-bottom:10px}.v-heading span{font-size:11px}.v-heading-mark{width:60px;font-size:35px}.v-heading-mark small{font-size:8px;letter-spacing:1px}.v-profile{padding:16px;border-radius:16px}.v-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 10px}#volunteerScreen input,#volunteerScreen select{font-size:16px;padding:10px 8px}.v-profile label{font-size:11px}.v-rules{font-size:11px;margin-top:16px}.v-thresholds{gap:10px}.v-thresholds label{font-size:11px}.v-context-note{font-size:10px;line-height:1.85}.v-status{font-size:11px;margin-bottom:12px}.v-mobile-tabs{display:grid;grid-template-columns:1fr 1fr;padding:4px;background:#e5ebf0;border-radius:11px;margin:0 0 20px;position:sticky;top:52px;z-index:5;box-shadow:0 5px 14px #f2f2f799}.v-mobile-tabs button{border:0;border-radius:8px;background:none;color:#7890a3;padding:10px;font-size:13px;font-weight:550}.v-mobile-tabs button[aria-pressed="true"]{background:white;color:#285872;box-shadow:0 1px 5px #142d4710}.v-mobile-tabs span{font-size:11px;margin-left:3px}.v-workspace{display:block}.v-draft-panel{position:static;max-height:none;padding:20px}.v-section-title h2{font-size:16px}.v-section-title>span{font-size:10px}.v-filters{grid-template-columns:1fr 1fr}#volunteerScreen .v-filters input{grid-column:1/-1;font-size:16px}#volunteerScreen .v-filters select{font-size:14px}.v-risk-tabs{gap:5px}.v-risk-tabs button{font-size:11px;padding:8px 9px}.v-candidate{border-radius:14px;padding:16px}.v-candidate h3{font-size:16px}.v-candidate header p{font-size:10px}.v-candidate-metrics{padding:12px;gap:6px}.v-candidate-metrics strong{font-size:18px}.v-candidate-metrics small{font-size:9px}.v-major-summary{font-size:11px}.v-candidate-footer{flex-direction:row;align-items:center;flex-wrap:wrap}.v-candidate-footer>div{width:auto;margin-left:auto;gap:12px}.v-verification{font-size:9px}.v-candidate-footer .v-button{font-size:12px;padding:8px 11px}.v-text-button{font-size:11px}.v-choice-content h3{font-size:16px}.v-choice-content ol{font-size:12px}.v-choice-actions button{min-height:36px;min-width:36px}.v-dialog-heading{padding:20px 18px 12px}.v-dialog-body{padding:16px 18px}.v-dialog-footer{padding:14px 18px}.v-dialog-heading h2{font-size:18px}.v-dialog{max-height:92dvh}.v-major-option strong{font-size:14px}.v-major-option small{font-size:11px}.v-selected-majors button{min-width:34px;min-height:34px}#volunteerScreen[data-pane="matches"] .v-draft-panel{display:none}#volunteerScreen[data-pane="draft"] .v-matches{display:none}} @media(max-width:760px){.v-heading-actions{gap:6px;align-items:center}.v-flow-back{font-size:10px;padding:7px 9px}.v-flow-steps{margin:0 2px 12px;font-size:10px}.v-flow-steps span{padding:6px 8px}.v-result-summary{margin:10px 0;padding:10px;font-size:11px}.v-probability-note{font-size:10px}.v-candidate-title{gap:7px}.v-major-select{font-size:10px;padding:5px 8px}.v-candidate header{gap:7px}.v-candidate header .v-risk{font-size:10px;padding:4px 6px}} @media(prefers-reduced-motion:reduce){.v-button{transition:none}} .v-profile-grid label[hidden]{display:none} .v-rank-mode .v-context-note{border-left-color:#1d8b70;background:#f1fbf7} .v-candidate-metrics strong{font-variant-numeric:tabular-nums} .v-candidate-metrics strong em{font-style:normal;font-size:.72em;color:#728092;margin-left:3px} .v-risk-unknown{color:#687789;background:#edf1f5} .v-source p{overflow-wrap:anywhere} .v-demo-badge{display:inline-flex;align-items:center;margin-left:6px;padding:3px 8px;border-radius:999px;background:#fff0cf;color:#8a5a13;font-size:10px;font-weight:600;letter-spacing:0} .v-profile-grid label small.v-rank-status{display:block;margin-top:5px;color:#9a6b20;font-size:11px;font-weight:500} .v-rank-breakdown{margin-top:16px;padding:14px 16px;border:1px solid #d7e8e0;border-radius:12px;background:#f7fcfa} .v-rank-breakdown-heading{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:8px;color:#1d5f50} .v-rank-breakdown-heading strong{font-size:13px;font-weight:650}.v-rank-breakdown-heading span{font-size:11px;color:#6b877f} .v-rank-breakdown-table-wrap{overflow:auto}.v-rank-breakdown table{border-collapse:collapse;width:100%;min-width:520px;font-size:11px;color:#536c68} .v-rank-breakdown th,.v-rank-breakdown td{padding:7px 9px;border-bottom:1px solid #e0eee8;text-align:left;white-space:nowrap}.v-rank-breakdown thead th{font-weight:600;color:#668078;background:#eef8f3} .v-rank-breakdown tbody tr.is-current{background:#e9f7f0;color:#185d4c}.v-rank-breakdown tbody tr.is-current th{font-weight:700}.v-rank-breakdown td strong{font-size:14px;font-weight:650;color:#176b59} .v-rank-breakdown-note,.v-rank-breakdown-empty{margin:9px 0 0;color:#7b8d88;font-size:10px;line-height:1.7}.v-rank-breakdown-empty{padding:4px 0} .v-profile-grid label:has([name="rank"]){background:#f2f8f5;border-color:#b9ddce} .v-profile-grid [name="rank"]{color:#176b59;background:#fff} .v-history{margin:12px 0 2px;border-top:1px solid #e6edf1;padding-top:10px} .v-history summary{cursor:pointer;color:#28647d;font-size:12px;font-weight:600} .v-history-note{margin:8px 0 0;color:#8a6d3b;font-size:10px;line-height:1.7} .v-history-table-wrap{overflow:auto;margin-top:8px} .v-history table{width:100%;min-width:420px;border-collapse:collapse;font-size:11px;color:#596b78} .v-history th,.v-history td{padding:7px 8px;border-bottom:1px solid #edf1f3;text-align:left;white-space:nowrap} .v-history th{font-weight:600;color:#72818c;background:#f8fafb} .v-history td small{display:block;margin-top:3px;color:#8796a1;font-size:10px} .v-history-change{display:inline-block;margin-top:4px;padding:1px 5px;border-radius:4px;background:#fff0d8;color:#9a671f;font-size:10px;font-style:normal} .v-history-missing{margin:12px 0;padding:10px 12px;border:1px dashed #e8cf9b;border-radius:8px;background:#fffaf0;color:#936b29;font-size:11px} .v-group-meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:14px} .v-group-meta span{display:flex;flex-direction:column;gap:4px;padding:10px;border:1px solid #e5edf0;border-radius:9px;background:#f8fbfc;color:#788995;font-size:11px} .v-group-meta strong{color:#1e3f50;font-size:14px} .v-group-note{margin:0 0 12px;padding:10px 12px;border:1px solid #eadfbf;border-radius:8px;background:#fffaf0;color:#75633d;font-size:12px;line-height:1.6} .v-group-major-list{display:grid;gap:8px} .v-group-major-list article{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border:1px solid #e1e9ed;border-radius:10px;background:#fff} .v-group-major-list article>div{min-width:0} .v-group-major-list strong,.v-group-major-list small{display:block} .v-group-major-list strong{font-size:14px;color:#253e4d} .v-group-major-list small{margin-top:4px;color:#7a8b95;font-size:11px} .v-group-major-list .v-button{flex:none;font-size:12px;padding:8px 10px} .v-preview-dialog{max-width:min(500px,calc(100% - 20px));width:500px} .v-preview-body{padding:0;background:#f4f6fa;overflow:auto;min-height:300px;max-height:68dvh} .v-preview-body iframe{display:block;width:100%;max-width:430px;height:900px;border:0;background:#f4f6fa;margin:0 auto} @media(max-width:760px){.v-group-meta{grid-template-columns:repeat(2,minmax(0,1fr))}.v-group-meta span:last-child{grid-column:1/-1}.v-group-major-list article{align-items:flex-start}.v-group-major-list .v-button{margin-top:1px}} @media(max-width:760px){.v-rank-breakdown{padding:12px}.v-rank-breakdown-heading{display:block}.v-rank-breakdown-heading span{display:block;margin-top:3px}} @media(max-width:760px){.v-preview-dialog{width:calc(100% - 16px)}.v-preview-body{max-height:65dvh}.v-preview-body iframe{width:100%;max-width:430px;height:900px;transform:none;margin:0 auto}} /* Mobile planner surfaces: the volunteer flow is used like a small app. */ :root{--v-accent:#1769ff;--v-ink:#1f2937;--v-muted:#737b87;--v-panel:#f4f7fb} body.volunteer-mode{background:#f5f6fa} body.volunteer-mode .tab-bar{display:none} body.volunteer-mode .app-shell{padding-bottom:env(safe-area-inset-bottom)} body.volunteer-mode #appMain{width:100%;max-width:none;margin:0} body.volunteer-mode .app-bar{background:rgba(250,251,255,.92);border-bottom-color:#e7eaf0} #volunteerScreen{max-width:720px;margin:0 auto;padding:0 0 calc(88px + env(safe-area-inset-bottom));color:var(--v-ink)} #volunteerScreen .v-heading{margin:0;padding:22px 18px 24px;background:linear-gradient(145deg,#eef5ff 0%,#e4edff 100%);border-bottom:1px solid #d9e5ff} #volunteerScreen .v-heading p{margin:0 0 7px;color:#5778b9;font-size:10px;letter-spacing:1.4px} #volunteerScreen .v-heading h1{font-size:26px;letter-spacing:0;color:#162b4a;font-weight:750} #volunteerScreen .v-heading span{display:block;margin-top:8px;color:#60738f;font-size:12px} #volunteerScreen .v-heading-mark{width:74px;color:var(--v-accent);font-size:34px;font-weight:750;letter-spacing:-1px} #volunteerScreen .v-heading-mark small{font-size:9px;letter-spacing:0;color:#6681b1} #volunteerScreen .v-flow-steps{margin:0;padding:10px 16px;background:#fff;border-bottom:1px solid #edf0f4;gap:7px;font-size:11px} #volunteerScreen .v-flow-steps span{background:#f2f4f8;color:#9299a5;border-radius:999px;padding:7px 10px} #volunteerScreen .v-flow-steps span.is-active{background:#e7efff;color:#175ee5} #volunteerScreen .v-flow-steps i{color:#bbc1cb} #volunteerScreen .v-profile{margin:12px 12px 0;padding:16px 14px;border:0;border-radius:16px;background:#fff;box-shadow:0 3px 14px rgba(35,55,85,.06)} #volunteerScreen .v-profile-grid{grid-template-columns:1fr;gap:0} #volunteerScreen .v-profile-grid label{padding:13px 2px 12px;border-bottom:1px solid #edf0f4;color:#454d58;font-size:13px;gap:8px} #volunteerScreen .v-profile-grid label:has([name="rank"]){background:#f4fbf8;border:1px solid #cceadf;border-radius:12px;padding:12px;margin:10px 0} #volunteerScreen input,#volunteerScreen select{border:0;border-radius:0;background:transparent;min-height:30px;padding:0;color:#202832;font-size:16px} #volunteerScreen .v-profile-grid label:has(select){display:grid;grid-template-columns:1fr minmax(150px,auto);align-items:center} #volunteerScreen .v-profile-grid label:has(input){display:grid;grid-template-columns:1fr minmax(120px,auto);align-items:center} #volunteerScreen .v-profile-grid label:has([name="rank"]) small{grid-column:1/-1;margin-top:0} #volunteerScreen .v-profile-grid>.v-button{grid-column:1/-1;width:100%;margin-top:16px;min-height:48px;border-radius:999px;background:var(--v-accent);border-color:var(--v-accent);font-size:16px;font-weight:700;box-shadow:0 5px 12px rgba(23,105,255,.2)} #volunteerScreen .v-profile-grid>.v-button:hover{background:#0f58db} #volunteerScreen .v-rank-breakdown{margin:14px 0 0;padding:12px;border:1px solid #dceee7;border-radius:12px;background:#f5fbf8} #volunteerScreen .v-rules{margin:12px 0 0;padding:12px 2px 0;color:#7b8490} #volunteerScreen .v-context-note{margin:12px 12px 0;padding:11px 13px;border-radius:12px;background:#fff9ed;color:#8a681f;font-size:11px} #volunteerScreen .v-status{margin:8px 14px;color:#3c6ea8;font-size:11px} #volunteerScreen .v-result-summary{margin:12px 12px 8px;padding:12px 13px;border:0;border-radius:12px;background:#edf4ff;color:#315d9f;font-size:12px;line-height:1.6} #volunteerScreen .v-workspace{display:block} #volunteerScreen .v-matches{padding:0 12px} #volunteerScreen .v-section-title{margin:14px 2px 10px} #volunteerScreen .v-section-title h2{font-size:18px;color:#263242} #volunteerScreen .v-filters{display:flex;gap:7px;margin:0 -2px 10px;overflow-x:auto;padding:2px;scrollbar-width:none} #volunteerScreen .v-filters::-webkit-scrollbar{display:none} #volunteerScreen .v-filters input{min-width:180px;border:1px solid #e1e5eb;border-radius:9px;background:#fff;padding:0 10px;font-size:14px} #volunteerScreen .v-filters select{min-width:100px;height:38px;padding:0 8px;border:1px solid #e1e5eb;border-radius:9px;background:#fff;font-size:13px} #volunteerScreen .v-risk-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:0;margin:0 0 12px;border-bottom:1px solid #e5e9ef} #volunteerScreen .v-risk-tabs button{min-height:42px;border:0;border-bottom:2px solid transparent;border-radius:0;background:#fff;color:#7b8490;font-size:13px} #volunteerScreen .v-risk-tabs button[aria-pressed="true"]{background:#fff;color:var(--v-accent);border-bottom-color:var(--v-accent);font-weight:700} #volunteerScreen .v-candidate{margin-bottom:10px;padding:14px 13px;border:1px solid #e5e9ef;border-radius:14px;box-shadow:0 2px 8px rgba(35,55,85,.045)} #volunteerScreen .v-candidate h3{font-size:16px;line-height:1.4;color:#1d2a3b;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} #volunteerScreen .v-candidate-title{align-items:flex-start} #volunteerScreen .v-major-select{border-color:var(--v-accent);color:var(--v-accent);background:#f0f5ff;font-size:11px;padding:6px 9px} #volunteerScreen .v-risk-reach{background:#fff0ee;color:#ff554c} #volunteerScreen .v-risk-steady{background:#fff8e5;color:#cc8a00} #volunteerScreen .v-risk-safe{background:#ecf8f1;color:#1e9a58} #volunteerScreen .v-candidate-metrics{margin:13px 0 9px;padding:10px 11px;background:#f7f8fa;border-radius:9px;gap:6px} #volunteerScreen .v-candidate-metrics strong{font-size:17px} #volunteerScreen .v-history{margin-top:10px} #volunteerScreen .v-history table,#volunteerScreen .v-rank-breakdown table{min-width:0;width:100%;table-layout:fixed;font-size:10px} #volunteerScreen .v-history th,#volunteerScreen .v-history td,#volunteerScreen .v-rank-breakdown th,#volunteerScreen .v-rank-breakdown td{padding:6px 4px;white-space:normal;overflow-wrap:anywhere} #volunteerScreen .v-history th:nth-child(1){width:12%} #volunteerScreen .v-history th:nth-last-child(1){width:23%} #volunteerScreen .v-draft-panel{margin:0 12px;padding:14px 13px;border:0;border-radius:16px;background:#fff;box-shadow:0 2px 10px rgba(35,55,85,.05)} #volunteerScreen .v-draft-bottom{position:sticky;bottom:0;z-index:4;margin:14px -13px -14px;padding:10px 13px calc(10px + env(safe-area-inset-bottom));background:rgba(255,255,255,.95);border-top:1px solid #e8ebf0;display:grid;grid-template-columns:1fr 1fr;gap:8px;backdrop-filter:blur(14px)} #volunteerScreen .v-draft-bottom .v-button{width:100%;min-height:44px;border-radius:10px} #volunteerScreen .v-draft-bottom [data-v-clear],#volunteerScreen .v-draft-bottom small{grid-column:1/-1} #volunteerScreen .v-draft-bottom small{text-align:center} #volunteerScreen .v-choice{padding:13px 0} #volunteerScreen .v-choice-content h3{font-size:15px} #volunteerScreen .v-choice-actions button{min-height:34px} #volunteerScreen .v-dialog{width:100%;max-width:none;margin:auto auto 0;border-radius:18px 18px 0 0} #volunteerScreen .v-dialog-footer{padding-bottom:calc(14px + env(safe-area-inset-bottom))} #volunteerScreen .v-preview-dialog{width:calc(100% - 12px);max-width:none} #volunteerScreen .v-preview-body{max-height:68dvh} #volunteerScreen .v-preview-body iframe{width:100%;max-width:430px;height:900px;transform:none;margin:0 auto} #volunteerScreen[data-flow-page="results"] .v-flow-back{ display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:7px 12px; border:1px solid #c9d9ef; background:#f7faff; color:#2b62b8; font-size:12px; font-weight:650; } #volunteerScreen[data-pane="draft"] .v-draft-panel{display:block} @media(min-width:761px){body.volunteer-mode .tab-bar{display:grid}body.volunteer-mode .app-shell{padding-bottom:30px}#volunteerScreen{padding-bottom:60px}#volunteerScreen .v-profile-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}#volunteerScreen .v-profile-grid label:has(select),#volunteerScreen .v-profile-grid label:has(input){display:flex}#volunteerScreen .v-profile-grid>.v-button{grid-column:auto}} /* Small-screen interaction pass: keep the important action within thumb reach. */ #volunteerScreen .v-mobile-draft-bar{display:none} #volunteerScreen .v-extra-fields{grid-column:1/-1;margin:5px 0 0;border-top:1px solid #edf0f4} #volunteerScreen .v-extra-fields summary{padding:13px 2px 10px;color:#667384;font-size:12px;cursor:pointer;list-style:none} #volunteerScreen .v-extra-fields summary::-webkit-details-marker{display:none} #volunteerScreen .v-extra-fields summary::before{content:'＋';display:inline-grid;place-items:center;width:18px;height:18px;margin-right:5px;border:1px solid #b8c2cf;border-radius:50%;font-size:13px;line-height:1;color:#718096;vertical-align:-3px} #volunteerScreen .v-extra-fields[open] summary::before{content:'−'} #volunteerScreen .v-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px;padding:0 2px 3px} #volunteerScreen .v-extra-grid label{display:flex!important;min-width:0;align-items:center;justify-content:space-between;border-bottom:0;padding:10px 0!important;font-size:12px!important} #volunteerScreen .v-extra-grid input,#volunteerScreen .v-extra-grid select{max-width:140px;text-align:right;font-size:14px} #volunteerScreen .v-score-field input{font-size:23px;font-weight:750;color:#155edb;text-align:right} #volunteerScreen .v-rank-field input{font-size:21px;font-weight:750;color:#13855e;text-align:right} @media(max-width:760px){ body.volunteer-mode .app-bar{position:sticky;top:0;z-index:20;background:rgba(250,251,255,.96);backdrop-filter:blur(15px)} #volunteerScreen{padding-bottom:calc(102px + env(safe-area-inset-bottom))} #volunteerScreen .v-heading{padding:18px 16px 19px} #volunteerScreen .v-heading h1{font-size:23px} #volunteerScreen .v-heading span{font-size:11px} #volunteerScreen .v-heading-mark{width:65px;font-size:30px} #volunteerScreen .v-heading-mark small{font-size:8px} #volunteerScreen .v-heading-actions{flex-shrink:0;gap:6px} #volunteerScreen[data-flow-page="results"] .v-flow-back{min-height:38px;padding:8px 11px;font-size:12px} #volunteerScreen .v-flow-steps{padding:9px 12px;font-size:10px} #volunteerScreen .v-profile{margin:10px 10px 0;padding:12px 13px;border-radius:14px} #volunteerScreen .v-profile-grid label{min-height:48px} #volunteerScreen .v-profile-grid label:has(select),#volunteerScreen .v-profile-grid label:has(input){grid-template-columns:minmax(0,1fr) minmax(120px,auto)} #volunteerScreen .v-profile-grid>.v-button{position:sticky;bottom:calc(8px + env(safe-area-inset-bottom));z-index:8;margin:14px -2px 1px;width:calc(100% + 4px);min-height:50px;border-radius:13px;box-shadow:0 7px 18px rgba(23,105,255,.27)} #volunteerScreen .v-extra-grid{grid-template-columns:1fr} #volunteerScreen .v-extra-grid input,#volunteerScreen .v-extra-grid select{max-width:160px} #volunteerScreen .v-context-note{margin:10px 10px 0} #volunteerScreen .v-result-summary{margin:10px 10px 8px;padding:10px 12px;font-size:11px} #volunteerScreen .v-matches{padding:0 10px} #volunteerScreen .v-section-title{margin:13px 2px 9px} #volunteerScreen .v-section-title h2{font-size:17px} #volunteerScreen .v-probability-note{margin:0 2px 9px;font-size:10px;line-height:1.55} #volunteerScreen .v-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin:0 0 10px;overflow:visible;padding:0} #volunteerScreen .v-filters input{grid-column:1/-1;min-width:0;width:100%;height:40px;padding:0 10px;font-size:14px} #volunteerScreen .v-filters select{min-width:0;width:100%;height:38px;font-size:12px} #volunteerScreen .v-candidate{margin-bottom:9px;padding:13px 12px;border-radius:12px} #volunteerScreen .v-candidate h3{font-size:15px} #volunteerScreen .v-candidate header p{font-size:10px} #volunteerScreen .v-major-select{max-width:92px;overflow:hidden;text-overflow:ellipsis;font-size:10px;padding:6px 7px} #volunteerScreen .v-candidate-metrics{margin:11px 0 8px;padding:9px 10px} #volunteerScreen .v-candidate-metrics strong{font-size:16px} #volunteerScreen .v-candidate-metrics small{font-size:9px} #volunteerScreen .v-history summary{font-size:11px} #volunteerScreen .v-history-note{font-size:9px;line-height:1.55} #volunteerScreen .v-history table{font-size:9px} #volunteerScreen .v-history th,#volunteerScreen .v-history td{padding:6px 3px} #volunteerScreen .v-history th:nth-child(1){width:12%} #volunteerScreen .v-history th:nth-child(2){width:17%} #volunteerScreen .v-history th:nth-child(3){width:17%} #volunteerScreen .v-history th:nth-child(4){width:24%} #volunteerScreen .v-history th:nth-child(5){width:30%} #volunteerScreen .v-candidate-footer{gap:5px} #volunteerScreen .v-candidate-footer>div{gap:7px} #volunteerScreen .v-candidate-footer .v-text-button{font-size:10px;padding:6px 3px} #volunteerScreen .v-mobile-draft-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px calc(9px + env(safe-area-inset-bottom));border-top:1px solid #e2e7ee;background:rgba(255,255,255,.96);box-shadow:0 -5px 18px rgba(35,55,85,.09);backdrop-filter:blur(16px)} #volunteerScreen[data-flow-page="profile"] .v-mobile-draft-bar{display:none} #volunteerScreen .v-mobile-draft-bar>div:first-child{display:grid;min-width:0;gap:1px} #volunteerScreen .v-mobile-draft-bar strong{color:#1d2d45;font-size:19px;line-height:1.1} #volunteerScreen .v-mobile-draft-bar strong small{margin-left:2px;color:#8a96a4;font-size:11px;font-weight:500} #volunteerScreen .v-mobile-draft-bar>div:first-child>span{overflow:hidden;color:#7b8795;font-size:10px;white-space:nowrap;text-overflow:ellipsis} #volunteerScreen .v-mobile-draft-actions{display:flex;flex:0 0 auto;gap:7px} #volunteerScreen .v-mobile-draft-actions .v-button{min-width:84px;min-height:42px;padding:0 14px;border-radius:11px;font-size:13px} #volunteerScreen .v-mobile-draft-actions [data-v-mobile-export]{display:none} #volunteerScreen[data-pane="draft"] .v-mobile-draft-actions [data-v-mobile-export]{display:block} #volunteerScreen[data-pane="draft"] .v-mobile-draft-actions [data-v-preview]{display:block} #volunteerScreen[data-pane="draft"] .v-mobile-draft-bar>div:first-child>span{display:none} #volunteerScreen[data-pane="draft"] .v-mobile-draft-bar strong{font-size:17px} #volunteerScreen[data-pane="draft"] .v-mobile-draft-actions .v-button{min-width:76px;padding:0 11px} #volunteerScreen[data-pane="draft"] .v-draft-bottom{display:none} } /* Final phone pass: the first step is a touch-first form, while the result step keeps the few values parents compare most visible at a glance. */ @media(max-width:760px){ #volunteerScreen{font-size:15px} #volunteerScreen .v-heading{position:relative;min-height:150px;padding:22px 16px 20px;align-items:flex-start} #volunteerScreen .v-heading p{font-size:12px;letter-spacing:1px;margin-bottom:9px} #volunteerScreen .v-heading h1{font-size:30px;line-height:1.25;font-weight:750} #volunteerScreen .v-heading span{font-size:14px;line-height:1.55} #volunteerScreen .v-heading-actions{flex-direction:column;align-items:flex-end;gap:10px} #volunteerScreen .v-heading-mark{width:auto;font-size:32px;line-height:1} #volunteerScreen .v-heading-mark small{display:block;font-size:10px;margin-top:5px} #volunteerScreen .v-flow-back{min-height:38px;padding:7px 11px;border-radius:10px;font-size:14px;font-weight:650;background:#fff;color:#1769ff;border-color:#cfe0ff} #volunteerScreen .v-flow-steps{padding:12px 14px;font-size:13px;gap:8px} #volunteerScreen .v-flow-steps span{padding:8px 11px} #volunteerScreen .v-profile{margin:14px 10px 0;padding:18px 16px;border-radius:18px} #volunteerScreen .v-profile-grid label{min-height:56px;padding:14px 2px 13px;font-size:15px;line-height:1.35} #volunteerScreen .v-profile-grid label:has(select),#volunteerScreen .v-profile-grid label:has(input){grid-template-columns:minmax(0,1fr) minmax(132px,auto);gap:12px} #volunteerScreen input,#volunteerScreen select{min-height:42px;font-size:18px;line-height:1.3} #volunteerScreen .v-profile-grid label:has([name="rank"]){padding:14px 13px;margin:12px 0;border-radius:14px} #volunteerScreen .v-score-field input{font-size:28px;line-height:1.1} #volunteerScreen .v-rank-field input{font-size:25px;line-height:1.1} #volunteerScreen .v-profile-grid label small.v-rank-status{font-size:13px;line-height:1.55} #volunteerScreen .v-profile-grid>.v-button{min-height:56px;margin-top:20px;font-size:18px;border-radius:14px} #volunteerScreen .v-extra-fields summary{padding:15px 2px 12px;font-size:14px} #volunteerScreen .v-extra-grid label{font-size:14px!important} #volunteerScreen .v-extra-grid input,#volunteerScreen .v-extra-grid select{font-size:16px} #volunteerScreen .v-rules{font-size:13px;line-height:1.75} #volunteerScreen .v-rank-breakdown{padding:14px;margin-top:16px} #volunteerScreen .v-rank-breakdown-heading strong{font-size:15px} #volunteerScreen .v-rank-breakdown-heading span{font-size:13px;line-height:1.5} #volunteerScreen .v-rank-breakdown table{font-size:12px} #volunteerScreen .v-rank-breakdown th,#volunteerScreen .v-rank-breakdown td{padding:8px 5px} #volunteerScreen .v-rank-breakdown td strong{font-size:16px} #volunteerScreen .v-rank-breakdown-note{font-size:12px;line-height:1.65} #volunteerScreen .v-result-summary{font-size:14px;line-height:1.65;padding:13px 14px} #volunteerScreen .v-context-note{font-size:13px;line-height:1.7} #volunteerScreen .v-status{font-size:13px;line-height:1.6} #volunteerScreen .v-section-title h2{font-size:20px} #volunteerScreen .v-section-title>span{font-size:13px} #volunteerScreen .v-probability-note{font-size:12px;line-height:1.65} #volunteerScreen .v-filters input{font-size:17px;height:46px} #volunteerScreen .v-filters select{height:44px;font-size:15px} #volunteerScreen .v-risk-tabs button{min-height:48px;font-size:15px} #volunteerScreen .v-candidate{padding:16px 14px;border-radius:15px} #volunteerScreen .v-candidate h3{font-size:18px;line-height:1.4} #volunteerScreen .v-candidate header p{font-size:12px;line-height:1.55} #volunteerScreen .v-major-select{max-width:none;font-size:13px;padding:8px 10px} #volunteerScreen .v-risk{font-size:13px;padding:5px 8px} #volunteerScreen .v-candidate-metrics{padding:12px 11px} #volunteerScreen .v-candidate-metrics small{font-size:12px;margin-bottom:5px} #volunteerScreen .v-candidate-metrics strong{font-size:21px} #volunteerScreen .v-major-summary{font-size:13px;line-height:1.7} #volunteerScreen .v-history summary{font-size:14px} #volunteerScreen .v-history-note{font-size:12px;line-height:1.65} #volunteerScreen .v-history table{font-size:11px} #volunteerScreen .v-history th,#volunteerScreen .v-history td{padding:8px 4px} #volunteerScreen .v-candidate-footer .v-text-button{font-size:13px;padding:8px 4px} } /* v89 result header and compact match controls */ #volunteerScreen .v-flow-steps, #volunteerScreen .v-mobile-tabs, #volunteerScreen .v-mobile-draft-bar{display:none!important} #volunteerScreen .v-heading{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:14px;min-height:104px;padding:18px 16px} #volunteerScreen .v-heading-copy{min-width:0} #volunteerScreen .v-heading-copy p{margin:0 0 6px} #volunteerScreen .v-heading-copy h1{margin:0;font-size:25px;line-height:1.25} #volunteerScreen .v-heading-copy span{display:block;margin-top:7px;line-height:1.45;overflow-wrap:anywhere} #volunteerScreen .v-heading .v-flow-back{grid-column:1;grid-row:1;min-height:40px;padding:8px 12px;border:1px solid #c9d9ef;border-radius:10px;background:#f7faff;color:#1769ff;font-size:13px;font-weight:650;white-space:nowrap} #volunteerScreen .v-heading-draft{grid-column:3;grid-row:1;display:grid;justify-items:end;gap:1px;min-width:92px;padding:7px 0;border:0;background:transparent;color:#1f5fe0;text-align:right;cursor:pointer} #volunteerScreen .v-heading-draft strong{font-size:12px;font-weight:650;line-height:1.2} #volunteerScreen .v-heading-draft b{font-size:24px;line-height:1;font-variant-numeric:tabular-nums} #volunteerScreen .v-heading-draft b small{margin-left:2px;color:#7d91b7;font-size:11px;font-weight:550} #volunteerScreen .v-heading-draft em{color:#6d7f99;font-size:10px;font-style:normal;line-height:1.3} #volunteerScreen .v-match-toolbar{display:flex;align-items:center;gap:8px;min-width:0;margin:13px 2px 8px;overflow-x:auto;scrollbar-width:none} #volunteerScreen .v-match-toolbar::-webkit-scrollbar{display:none} #volunteerScreen .v-match-toolbar-title{display:flex;align-items:baseline;gap:5px;flex:0 0 auto;min-width:76px} #volunteerScreen .v-match-toolbar-title strong{font-size:16px;color:#263242;white-space:nowrap} #volunteerScreen .v-match-toolbar-title span{color:#8090a1;font-size:11px;white-space:nowrap} #volunteerScreen .v-match-toolbar .v-filters{display:flex;flex:0 0 auto;gap:6px;margin:0;overflow:visible} #volunteerScreen .v-match-toolbar .v-filters select{flex:0 0 96px;min-width:96px;height:38px;padding:0 8px;border:1px solid #e1e5eb;border-radius:9px;background:#fff;font-size:12px} #volunteerScreen .v-matches>.v-risk-tabs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;width:100%;min-width:0;margin:12px 0 9px} #volunteerScreen .v-matches>.v-risk-tabs button{min-width:0;min-height:42px;border:1px solid #e5e9ef;border-radius:8px;background:#fff;color:#7b8490;font-size:13px} #volunteerScreen .v-matches>.v-risk-tabs button[aria-pressed="true"]{background:#edf4ff;color:#1769ff;border-color:#cfe0ff;font-weight:700} #volunteerScreen .v-probability-note{margin:0 2px 10px;font-size:10px;line-height:1.5} #volunteerScreen .v-history th:last-child{color:#b46832} #volunteerScreen .v-history td:last-child strong{color:#b46832} #volunteerScreen .v-profile-grid label:has(select), #volunteerScreen .v-profile-grid label:has(input){box-sizing:border-box} #volunteerScreen .v-profile-grid label:has(select) select, #volunteerScreen .v-profile-grid label:has(input) input{font-variant-numeric:tabular-nums;text-align:right} #volunteerScreen .v-profile-grid label:has(select) select{text-align-last:right} #volunteerScreen .v-profile-grid label:has([name="rank"]){align-content:center} #volunteerScreen .v-profile-grid label:has([name="rank"]) input{font-weight:700} @media(max-width:760px){ #volunteerScreen .v-heading{grid-template-columns:auto minmax(0,1fr) auto;min-height:92px;padding:14px 12px;gap:8px} #volunteerScreen .v-heading-copy p{font-size:10px;letter-spacing:.7px;margin-bottom:4px} #volunteerScreen .v-heading-copy h1{font-size:22px} #volunteerScreen .v-heading-copy span{font-size:11px;margin-top:5px} #volunteerScreen .v-heading .v-flow-back{min-height:36px;padding:7px 9px;font-size:12px} #volunteerScreen .v-heading-draft{min-width:74px;padding:4px 0} #volunteerScreen .v-heading-draft strong{font-size:11px} #volunteerScreen .v-heading-draft b{font-size:20px} #volunteerScreen .v-heading-draft em{font-size:9px} #volunteerScreen .v-match-toolbar{margin:12px 0 7px;padding:0 1px;gap:7px} #volunteerScreen .v-match-toolbar-title{min-width:64px} #volunteerScreen .v-match-toolbar-title strong{font-size:14px} #volunteerScreen .v-match-toolbar-title span{font-size:10px} #volunteerScreen .v-match-toolbar .v-filters select{flex-basis:88px;min-width:88px;height:38px;font-size:12px} #volunteerScreen .v-matches>.v-risk-tabs{gap:5px;margin:10px 0 8px} #volunteerScreen .v-matches>.v-risk-tabs button{min-height:44px;font-size:14px} } @media(max-width:760px){ #volunteerScreen[data-pane="matches"] .v-draft-panel{display:none} #volunteerScreen[data-pane="draft"] .v-matches{display:none} #volunteerScreen[data-pane="draft"] .v-draft-bottom{display:grid} } /* v92: one predictable layout for the four-step mobile planner. */ #volunteerScreen{--v-accent:#1769ff;--v-ink:#202c3d;--v-muted:#697687;--v-line:#e4e9f0;--v-bottom-nav-height:62px;letter-spacing:0} #volunteerScreen *,#volunteerScreen *::before,#volunteerScreen *::after{box-sizing:border-box;letter-spacing:0} #volunteerScreen [hidden]{display:none!important} #volunteerScreen .v-flow-steps{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:12px 16px;background:#fff;border-top:1px solid #f1f3f6;border-bottom:1px solid var(--v-line)} #volunteerScreen .v-flow-steps span{min-width:0;padding:8px 4px;border-radius:4px;background:#f3f5f8;color:#788596;font-size:13px;font-weight:500;line-height:1.5;text-align:center;overflow-wrap:anywhere} #volunteerScreen .v-flow-steps span.is-active{background:#eaf2ff;color:#155fe8;font-weight:700} #volunteerScreen .v-flow-steps span.is-complete{background:#edf8f2;color:#218154} #volunteerScreen .v-flow-steps i{display:none} #volunteerScreen .v-heading{min-height:88px;padding:16px;gap:12px;background:#fff} #volunteerScreen .v-heading-copy p{font-size:12px;color:var(--v-muted)} #volunteerScreen .v-heading-copy h1{font-size:24px;line-height:1.3;color:var(--v-ink);font-weight:750} #volunteerScreen .v-heading-copy span{font-size:13px;line-height:1.55;color:var(--v-muted)} #volunteerScreen .v-heading-draft{min-width:76px;min-height:44px} #volunteerScreen .v-heading-draft strong{font-size:12px} #volunteerScreen .v-heading-draft b{font-size:24px} #volunteerScreen .v-heading-draft em{font-size:11px} #volunteerScreen .v-profile,#volunteerScreen .v-draft-panel{border-radius:8px;box-shadow:none} #volunteerScreen .v-profile-grid label{min-width:0;line-height:1.5} #volunteerScreen .v-profile-grid label:has(select),#volunteerScreen .v-profile-grid label:has(input){display:grid;grid-template-columns:minmax(88px,1fr) minmax(0,1.6fr);align-items:center;gap:12px} #volunteerScreen .v-profile-grid label small.v-rank-status{grid-column:1/-1;margin:2px 0 0;font-size:13px;line-height:1.6} #volunteerScreen .v-profile-grid label:has([name="rank"]){padding:14px 12px;margin:12px 0;border-radius:8px;background:#f1faf5;border-color:#cde9da} #volunteerScreen input,#volunteerScreen select{font-size:16px;min-width:0;max-width:100%;line-height:1.5} #volunteerScreen .v-button{min-height:44px;border-radius:8px;font-size:14px} #volunteerScreen .v-result-summary{border-radius:0;border-bottom:1px solid var(--v-line);background:#fff;color:var(--v-ink);font-size:14px;line-height:1.65} #volunteerScreen .v-match-toolbar{gap:10px;max-width:100%;padding-bottom:3px} #volunteerScreen .v-match-toolbar .v-filters{min-width:0;gap:8px} #volunteerScreen .v-match-toolbar .v-filters select{height:44px;min-height:44px;border-radius:6px;font-size:14px} #volunteerScreen .v-matches>.v-risk-tabs{grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;border:0} #volunteerScreen .v-matches>.v-risk-tabs button{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:46px;padding:8px 4px;border-radius:6px;font-size:15px;line-height:1.3} #volunteerScreen .v-risk-tabs span{margin:0;font-size:12px;opacity:.8;font-variant-numeric:tabular-nums} #volunteerScreen .v-candidate{border-radius:8px;padding:16px;margin:0 0 12px;box-shadow:none} #volunteerScreen .v-candidate header{gap:8px} #volunteerScreen .v-candidate-title{flex-wrap:wrap;gap:8px;align-items:center} #volunteerScreen .v-candidate h3{display:block;overflow:visible;font-size:18px;line-height:1.45;font-weight:700} #volunteerScreen .v-candidate header p{font-size:13px;line-height:1.6;color:var(--v-muted);margin-top:7px} #volunteerScreen .v-major-select{min-height:36px;max-width:100%;padding:7px 10px;border-radius:6px;font-size:13px;line-height:1.4;white-space:normal} #volunteerScreen .v-risk{border-radius:4px;font-size:13px;padding:5px 8px} #volunteerScreen .v-candidate-metrics{border-radius:6px;padding:12px;margin:14px 0 10px;gap:10px} #volunteerScreen .v-candidate-metrics small{font-size:12px;line-height:1.45;margin-bottom:5px} #volunteerScreen .v-candidate-metrics strong{font-size:22px;line-height:1.3;font-weight:700} #volunteerScreen .v-candidate-metrics em{font-size:12px} #volunteerScreen .v-major-summary{font-size:13px;line-height:1.7} #volunteerScreen .v-history summary{font-size:14px;line-height:1.55;min-height:32px} #volunteerScreen .v-history-note{font-size:12px;line-height:1.65} #volunteerScreen .v-history table{min-width:0;table-layout:fixed;font-size:12px} #volunteerScreen .v-history th,#volunteerScreen .v-history td{padding:9px 4px;line-height:1.5;vertical-align:top;white-space:normal;overflow-wrap:anywhere} #volunteerScreen .v-history th{font-size:11px} #volunteerScreen .v-history td small{font-size:11px;line-height:1.55} #volunteerScreen .v-history td strong{font-variant-numeric:tabular-nums} #volunteerScreen .v-candidate-footer{flex-wrap:wrap;gap:8px;align-items:center} #volunteerScreen .v-verification{font-size:11px;line-height:1.5} #volunteerScreen .v-candidate-footer .v-text-button{min-height:40px;padding:8px 4px;font-size:13px} #volunteerScreen .v-choice-content h3{font-size:16px;line-height:1.55} #volunteerScreen .v-choice-content p,#volunteerScreen .v-choice-content small,#volunteerScreen .v-choice-content ol{font-size:13px;line-height:1.65} #volunteerScreen .v-choice-actions{gap:8px;flex-wrap:wrap} #volunteerScreen .v-choice-actions button{min-height:40px;min-width:40px;font-size:13px;border-radius:6px} #volunteerScreen .v-dialog{max-width:620px;border-radius:8px;overflow:hidden} #volunteerScreen .v-dialog-heading h2{font-size:20px;line-height:1.45} #volunteerScreen .v-dialog-heading p,#volunteerScreen .v-major-option small{font-size:13px;line-height:1.6} #volunteerScreen .v-dialog-heading>button{width:40px;height:40px;min-height:40px;border-radius:6px} #volunteerScreen .v-major-option strong{font-size:15px;line-height:1.55} #volunteerScreen .v-selected-majors>div{font-size:14px;line-height:1.6} #volunteerScreen .v-group-meta span{border-radius:6px;font-size:12px} #volunteerScreen .v-group-meta strong{font-size:16px} #volunteerScreen .v-group-major-list article{border-radius:6px} #volunteerScreen .v-group-major-list strong{font-size:15px;line-height:1.5} #volunteerScreen .v-group-major-list small{font-size:12px;line-height:1.6} @media(max-width:760px){ body.volunteer-mode .app-shell{padding-bottom:0} #volunteerScreen{max-width:100%;padding:0 0 calc(96px + env(safe-area-inset-bottom));font-size:15px;overflow-x:clip} #volunteerScreen[data-pane="draft"]{padding-bottom:calc(154px + env(safe-area-inset-bottom))} #volunteerScreen[data-flow-page="profile"]{padding-bottom:calc(96px + env(safe-area-inset-bottom))} #volunteerScreen .v-heading{min-height:82px;padding:14px 12px;grid-template-columns:auto minmax(0,1fr) auto;gap:8px} #volunteerScreen .v-heading-copy h1{font-size:22px} #volunteerScreen .v-heading-copy p{font-size:11px;margin-bottom:4px} #volunteerScreen .v-heading-copy span{font-size:12px;margin-top:5px} #volunteerScreen .v-heading .v-flow-back{min-height:44px;padding:8px;font-size:13px;border-radius:6px} #volunteerScreen .v-heading-draft{min-width:65px} #volunteerScreen .v-heading-draft b{font-size:22px} #volunteerScreen[data-flow-page="profile"] .v-heading{grid-template-columns:minmax(0,1fr)} #volunteerScreen[data-flow-page="profile"] .v-heading-draft{display:none} #volunteerScreen .v-flow-steps{gap:5px;padding:10px 12px} #volunteerScreen .v-flow-steps span{padding:8px 2px;font-size:12px;line-height:1.45} #volunteerScreen .v-profile{margin:12px;padding:6px 14px 16px;border:1px solid var(--v-line)} #volunteerScreen .v-profile-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:0} #volunteerScreen .v-profile-grid label{min-height:60px;padding:14px 0;font-size:15px} #volunteerScreen .v-profile-grid label:has(select),#volunteerScreen .v-profile-grid label:has(input){grid-template-columns:minmax(88px,1fr) minmax(0,1.6fr);gap:10px} #volunteerScreen .v-profile-grid input,#volunteerScreen .v-profile-grid select{min-height:36px;font-size:16px} #volunteerScreen .v-score-field input{font-size:26px;font-weight:750} #volunteerScreen .v-rank-field input{font-size:24px;font-weight:750} #volunteerScreen .v-profile-grid>.v-button{position:fixed;left:12px;right:12px;bottom:calc(68px + env(safe-area-inset-bottom));z-index:28;width:calc(100% - 24px);min-height:52px;margin:0;border-radius:8px;font-size:17px;box-shadow:0 4px 14px rgba(23,105,255,.18)} #volunteerScreen .v-rank-breakdown{border-radius:6px;padding:12px} #volunteerScreen .v-rank-breakdown table{font-size:12px} #volunteerScreen .v-rank-breakdown th,#volunteerScreen .v-rank-breakdown td{padding:8px 4px;line-height:1.5} #volunteerScreen .v-result-summary{margin:0;padding:13px 12px} #volunteerScreen .v-status{margin:8px 12px;font-size:13px} #volunteerScreen .v-matches{padding:0 12px} #volunteerScreen .v-match-toolbar{margin:10px 0 7px;gap:8px} #volunteerScreen .v-match-toolbar-title{min-width:68px;flex-direction:column;align-items:flex-start;gap:2px} #volunteerScreen .v-match-toolbar-title strong{font-size:14px} #volunteerScreen .v-match-toolbar-title span{font-size:11px} #volunteerScreen .v-match-toolbar .v-filters select{flex-basis:96px;min-width:96px;font-size:14px} #volunteerScreen .v-probability-note{font-size:12px;line-height:1.65;margin:0 1px 10px} #volunteerScreen .v-matches>.v-risk-tabs{margin:12px 0 8px} #volunteerScreen .v-candidate{padding:14px 12px} #volunteerScreen .v-candidate h3{font-size:18px} #volunteerScreen .v-history th:nth-child(1){width:13%} #volunteerScreen .v-history th:nth-child(2){width:17%} #volunteerScreen .v-history th:nth-child(3){width:18%} #volunteerScreen .v-history th:nth-child(4){width:24%} #volunteerScreen .v-history th:nth-child(5){width:28%} #volunteerScreen .v-mobile-tabs{display:grid!important;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:30;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;min-height:calc(var(--v-bottom-nav-height) + env(safe-area-inset-bottom));margin:0;padding:5px 12px calc(5px + env(safe-area-inset-bottom));border-top:1px solid var(--v-line);border-radius:0;background:#fff;box-shadow:0 -3px 12px rgba(30,45,66,.04)} #volunteerScreen .v-mobile-tabs button{min-width:0;min-height:48px;padding:8px 6px;border-radius:6px;background:#fff;color:#68788d;font-size:14px;font-weight:600;line-height:1.5} #volunteerScreen .v-mobile-tabs button[aria-pressed="true"]{background:#edf4ff;color:#1769ff;box-shadow:none} #volunteerScreen .v-mobile-tabs span{font-size:12px} #volunteerScreen[data-flow-page="profile"] .v-mobile-tabs{display:none!important} #volunteerScreen .v-mobile-draft-bar{display:none!important} #volunteerScreen[data-flow-page="results"][data-pane="draft"] .v-mobile-draft-bar{display:flex!important;bottom:calc(var(--v-bottom-nav-height) + env(safe-area-inset-bottom));min-height:70px;padding:10px 12px;border-radius:0;box-shadow:none;background:#fff;border-top:1px solid var(--v-line)} #volunteerScreen .v-mobile-draft-bar strong{font-size:20px} #volunteerScreen .v-mobile-draft-actions .v-button{min-height:46px;min-width:76px;font-size:14px;border-radius:6px} #volunteerScreen[data-pane="draft"] .v-draft-panel{margin:12px;border:1px solid var(--v-line);padding:14px 12px;max-height:none;overflow:visible} #volunteerScreen[data-pane="draft"] .v-draft-bottom{display:none} #volunteerScreen .v-draft-distribution{flex-wrap:wrap;gap:6px} #volunteerScreen .v-draft-hint{font-size:13px;line-height:1.65} #volunteerScreen .v-dialog{width:100%;max-width:none;max-height:calc(100dvh - 18px);margin:auto auto 0;border-radius:8px 8px 0 0} #volunteerScreen .v-dialog-heading{padding:16px 14px 12px} #volunteerScreen .v-dialog-body{padding:16px 14px;overscroll-behavior:contain} #volunteerScreen .v-dialog-footer{padding:12px 14px calc(12px + env(safe-area-inset-bottom));gap:8px} #volunteerScreen .v-dialog-footer .v-button{flex:1;min-width:0;white-space:normal} #volunteerScreen .v-preview-dialog{width:100%;border-radius:8px 8px 0 0} #volunteerScreen .v-preview-body{padding:0;max-height:70dvh} } @media(max-width:359px){ #volunteerScreen .v-heading{padding:12px 10px;gap:6px} #volunteerScreen .v-heading-copy h1{font-size:20px} #volunteerScreen .v-heading .v-flow-back{font-size:12px;padding:7px 6px} #volunteerScreen .v-heading-draft{min-width:58px} #volunteerScreen .v-heading-draft strong{font-size:11px} #volunteerScreen .v-heading-draft em{font-size:10px} #volunteerScreen .v-profile,#volunteerScreen[data-pane="draft"] .v-draft-panel{margin-left:10px;margin-right:10px} #volunteerScreen .v-matches{padding:0 10px} #volunteerScreen .v-flow-steps{padding:9px 10px;gap:4px} #volunteerScreen .v-flow-steps span{font-size:11px} #volunteerScreen .v-candidate{padding:12px 10px} #volunteerScreen .v-candidate h3{font-size:17px} #volunteerScreen .v-candidate header p{font-size:12px} #volunteerScreen .v-history table{font-size:11px} #volunteerScreen .v-history th,#volunteerScreen .v-history td{padding:8px 3px} #volunteerScreen .v-history td small{font-size:10px} #volunteerScreen .v-candidate-metrics strong{font-size:20px} } @media(min-width:761px){ #volunteerScreen .v-mobile-tabs,#volunteerScreen .v-mobile-draft-bar{display:none!important} #volunteerScreen .v-workspace{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:20px;padding:0 12px} #volunteerScreen .v-matches{padding:0} #volunteerScreen .v-draft-panel{position:sticky;top:80px;max-height:calc(100dvh - 100px);margin:12px 0 0;padding:16px;border:1px solid var(--v-line);background:#fff} #volunteerScreen .v-profile{max-width:760px;margin:18px auto 0;padding:18px 24px;border:1px solid var(--v-line)} #volunteerScreen .v-profile-grid{grid-template-columns:minmax(0,1fr);gap:0} #volunteerScreen .v-profile-grid label{padding:14px 0;font-size:15px} #volunteerScreen .v-profile-grid>.v-button{position:static;width:100%;grid-column:1/-1;border-radius:8px} #volunteerScreen .v-draft-bottom{margin:12px -16px -16px;padding:12px 16px;border-radius:0;background:#fff} } /* v92 handoff surfaces: the new bottom navigation and compact result/export blocks. */ #volunteerScreen .v-mobile-tabs{display:none!important} #volunteerScreen .v-bottom-nav{display:none} #volunteerScreen .v-summary-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:10px 12px} #volunteerScreen .v-summary-metrics>*{min-width:0;padding:10px 9px;border:1px solid var(--v-line);border-radius:6px;background:#fff} #volunteerScreen .v-summary-metrics small,#volunteerScreen .v-summary-metrics span{display:block;color:var(--v-muted);font-size:11px;line-height:1.45} #volunteerScreen .v-summary-metrics strong{display:block;margin-top:4px;color:var(--v-ink);font-size:19px;line-height:1.3;font-variant-numeric:tabular-nums} #volunteerScreen .v-summary-context{margin:8px 12px;padding:10px 12px;border-left:3px solid #d9e5f5;background:#f7faff;color:#68778a;font-size:12px;line-height:1.65} #volunteerScreen .v-risk-filter-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:12px 2px 0;line-height:1.45} #volunteerScreen .v-risk-filter-head strong{flex:none;color:var(--v-ink);font-size:14px;font-weight:650} #volunteerScreen .v-risk-filter-head span{min-width:0;color:var(--v-muted);font-size:12px;text-align:right} #volunteerScreen .v-search{display:block;width:100%;min-height:44px;margin:10px 0;border:1px solid var(--v-line);border-radius:6px;background:#fff;padding:0 12px;font-size:16px} #volunteerScreen .v-filter-chips{display:flex;gap:7px;overflow-x:auto;margin:8px 0;padding:1px 0 4px;scrollbar-width:none} #volunteerScreen .v-filter-chips::-webkit-scrollbar{display:none} #volunteerScreen .v-filter-chips button{flex:0 0 auto;min-height:38px;border:1px solid var(--v-line);border-radius:6px;background:#fff;color:#68778a;padding:7px 12px;font-size:13px;white-space:nowrap} #volunteerScreen .v-filter-chips button[aria-pressed="true"],#volunteerScreen .v-filter-chips button.is-active{border-color:#c8dcff;background:#edf4ff;color:#155fe8;font-weight:650} #volunteerScreen .v-filter-dialog{max-width:460px} #volunteerScreen .v-filter-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #volunteerScreen .v-filter-grid label{display:grid;gap:5px;color:var(--v-muted);font-size:12px;line-height:1.45} #volunteerScreen .v-filter-grid select{min-width:0;width:100%;min-height:42px;border:1px solid var(--v-line);border-radius:6px;background:#fff;padding:0 8px;font-size:14px} #volunteerScreen .v-field-picker{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;border:1px solid var(--v-line);border-radius:6px;background:#fff;color:var(--v-ink);padding:8px 10px;font-size:15px;text-align:left} #volunteerScreen .v-field-picker::after{content:'›';color:#9aa5b2;font-size:20px;line-height:1} #volunteerScreen .v-profile-actions{display:flex;gap:8px;position:sticky;bottom:0;z-index:20;margin-top:14px;padding:10px 0;background:rgba(255,255,255,.96);border-top:1px solid var(--v-line);backdrop-filter:blur(12px)} #volunteerScreen .v-profile-actions .v-button{flex:1;min-width:0} #volunteerScreen .v-export-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:0 0 14px} #volunteerScreen .v-export-stats>*{min-width:0;padding:10px;border:1px solid var(--v-line);border-radius:6px;background:#fff} #volunteerScreen .v-export-stats strong,#volunteerScreen .v-export-stats span{display:block} #volunteerScreen .v-export-stats strong{font-size:18px;line-height:1.3;color:var(--v-ink);font-variant-numeric:tabular-nums} #volunteerScreen .v-export-stats span{margin-top:3px;color:var(--v-muted);font-size:11px;line-height:1.4} #volunteerScreen .v-export-checklist{display:grid;gap:8px;margin:0 0 14px} #volunteerScreen .v-export-checklist>*{display:flex;align-items:flex-start;gap:8px;padding:9px 10px;border:1px solid var(--v-line);border-radius:6px;background:#fff;color:#536274;font-size:13px;line-height:1.55} #volunteerScreen .v-export-checklist .v-check-ok{border-color:#cbe8d8;background:#f2fbf6;color:#25744e} #volunteerScreen .v-export-checklist .v-check-warn{border-color:#f0dfad;background:#fffaf0;color:#8a6820} #volunteerScreen .v-export-settings{display:grid;gap:8px} #volunteerScreen .v-export-setting{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:42px;color:#536274;font-size:13px} @media(max-width:760px){ #volunteerScreen .v-bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:35;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;min-height:calc(62px + env(safe-area-inset-bottom));padding:4px 6px calc(4px + env(safe-area-inset-bottom));border-top:1px solid var(--v-line);background:rgba(255,255,255,.97);box-shadow:0 -3px 14px rgba(30,45,66,.07);backdrop-filter:blur(14px)} #volunteerScreen .v-bottom-nav button,#volunteerScreen .v-bottom-nav a{display:grid;place-items:center;align-content:center;gap:2px;min-width:0;min-height:52px;border:0;border-radius:6px;background:transparent;color:#778596;padding:5px 2px;font-size:11px;line-height:1.35;text-align:center;text-decoration:none;white-space:nowrap} #volunteerScreen .v-bottom-nav button[aria-current="page"],#volunteerScreen .v-bottom-nav button[aria-pressed="true"],#volunteerScreen .v-bottom-nav a[aria-current="page"],#volunteerScreen .v-bottom-nav .is-active{background:#edf4ff;color:#155fe8;font-weight:700} #volunteerScreen .v-bottom-nav svg{width:20px;height:20px;flex:none} #volunteerScreen .v-bottom-nav strong{font-size:11px;font-weight:650} #volunteerScreen .v-bottom-nav small{font-size:10px} #volunteerScreen{padding-bottom:calc(84px + env(safe-area-inset-bottom))} #volunteerScreen[data-flow-page="profile"]{padding-bottom:calc(150px + env(safe-area-inset-bottom))} #volunteerScreen[data-pane="draft"]{padding-bottom:calc(164px + env(safe-area-inset-bottom))} #volunteerScreen[data-pane="draft"] .v-bottom-nav{bottom:0} #volunteerScreen[data-pane="draft"] .v-mobile-draft-bar{bottom:calc(62px + env(safe-area-inset-bottom))} #volunteerScreen .v-summary-metrics{margin:8px 12px;gap:6px} #volunteerScreen .v-summary-metrics>*{padding:9px 7px} #volunteerScreen .v-summary-metrics strong{font-size:17px} #volunteerScreen .v-summary-metrics small,#volunteerScreen .v-summary-metrics span{font-size:10px} #volunteerScreen .v-summary-context{margin:8px 12px;font-size:12px} #volunteerScreen .v-filter-grid{grid-template-columns:1fr} #volunteerScreen .v-profile-actions{position:fixed;left:12px;right:12px;bottom:calc(66px + env(safe-area-inset-bottom));z-index:28;margin:0;padding:8px 0;border-top:0;background:rgba(255,255,255,.97)} #volunteerScreen .v-export-stats{gap:6px} #volunteerScreen .v-export-stats>*{padding:9px 7px} #volunteerScreen .v-export-stats strong{font-size:17px} #volunteerScreen .v-export-checklist>*{font-size:13px} } @media(max-width:359px){ #volunteerScreen .v-bottom-nav button,#volunteerScreen .v-bottom-nav a{font-size:10px} #volunteerScreen .v-bottom-nav svg{width:18px;height:18px} #volunteerScreen .v-summary-metrics strong{font-size:16px} #volunteerScreen .v-summary-metrics small,#volunteerScreen .v-summary-metrics span{font-size:9px} } #volunteerScreen .v-export-checklist{padding:0;list-style:none} #volunteerScreen .v-export-filename{display:grid;gap:5px;padding:10px 0;color:var(--v-muted);font-size:12px;line-height:1.6} #volunteerScreen .v-export-filename strong{font-size:13px;color:var(--v-ink);font-weight:600;overflow-wrap:anywhere} #volunteerScreen .v-export-check-note{color:var(--v-muted);font-size:12px;line-height:1.65} /* Codex implementation spec: compact, phone-first surfaces. Keep this override block at the end so the new markup can coexist with the older volunteer flow while its data and event handlers are migrated. */ #volunteerScreen{ --v-bg:#f6f8fb; --v-surface:#fff; --v-line:#dde6ee; --v-text:#112235; --v-muted:#6e7f8f; --v-faint:#9aa8b5; --v-blue:#1769e0; --v-blue-soft:#eaf2ff; --v-navy:#123653; --v-green:#159568; --v-green-soft:#e6f7ef; --v-amber:#bd7608; --v-amber-soft:#fff2d7; --v-red:#d15058; --v-red-soft:#ffeded; --v-radius:12px; width:100%; max-width:430px; min-width:0; margin:0 auto; padding:0 0 calc(86px + env(safe-area-inset-bottom)); background:var(--v-bg); color:var(--v-text); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; overflow-x:clip; } body.volunteer-mode{background:var(--v-bg)} body.volunteer-mode #appMain{width:min(100%,430px);max-width:430px;margin:0 auto;padding:0;background:var(--v-bg)} /* Keep the volunteer shell in normal document flow at every viewport. The shared desktop shell promotes .app-bar to fixed; that would cover the first row when a wide browser previews the 430px phone layout. */ body.volunteer-mode .app-bar{ position:sticky; top:0; left:auto; right:auto; width:min(100%,430px); max-width:430px; margin:0 auto; z-index:20; } #volunteerScreen *,#volunteerScreen *::before,#volunteerScreen *::after{box-sizing:border-box} #volunteerScreen h1,#volunteerScreen h2,#volunteerScreen h3,#volunteerScreen p{overflow-wrap:anywhere} #volunteerScreen button,#volunteerScreen input,#volunteerScreen select{font-family:inherit} #volunteerScreen button{min-width:44px;min-height:44px;touch-action:manipulation} #volunteerScreen .v-button{min-height:44px;border-radius:10px;border:1px solid var(--v-line);background:var(--v-surface);color:var(--v-text);font-size:14px;font-weight:700} #volunteerScreen .v-button-primary{border-color:var(--v-blue);background:var(--v-blue);color:#fff} #volunteerScreen .v-button-quiet{background:var(--v-blue-soft);border-color:#c7daf9;color:var(--v-blue)} /* Profile form */ #volunteerScreen .v-form-section{margin:10px 12px 0;padding:0 14px;border:1px solid var(--v-line);border-radius:var(--v-radius);background:var(--v-surface);overflow:hidden} #volunteerScreen .v-form-section h2{margin:0 -14px;padding:13px 14px 8px;color:var(--v-blue);font-size:14px;line-height:1.45;font-weight:800;border-bottom:1px solid #eef2f6} #volunteerScreen .v-form-section>label,#volunteerScreen .v-form-section>.v-field{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:56px;padding:8px 0;border-bottom:1px solid #eef2f6;color:var(--v-muted);font-size:14px;line-height:1.45} #volunteerScreen .v-form-section>label:last-child,#volunteerScreen .v-form-section>.v-field:last-child{border-bottom:0} #volunteerScreen .v-form-section>label:has(.v-rank-status),#volunteerScreen .v-form-section>label:has(.v-field-error){display:grid;grid-template-columns:minmax(88px,1fr) minmax(0,1.6fr);align-items:center;gap:4px 12px} #volunteerScreen .v-form-section>label:has(.v-rank-status)> .v-field-value,#volunteerScreen .v-form-section>label:has(.v-field-error)> .v-field-value{grid-column:2;grid-row:1} #volunteerScreen .v-form-section>label:has(.v-rank-status)> .v-rank-status,#volunteerScreen .v-form-section>label:has(.v-field-error)> .v-field-error{grid-column:1/-1;grid-row:2;margin:0;color:var(--v-muted);font-size:11px;line-height:1.45} #volunteerScreen .v-form-section>label:has(.v-rank-status)> .v-rank-status{color:var(--v-amber)} #volunteerScreen .v-form-section>label:has(.v-field-error)> .v-field-error{color:var(--v-red)} #volunteerScreen .v-form-section input,#volunteerScreen .v-form-section select{min-width:0;min-height:42px;border:1px solid var(--v-line);border-radius:8px;background:var(--v-surface);color:var(--v-text);padding:8px 10px;font-size:16px;text-align:right;outline:0} #volunteerScreen .v-form-section input:focus,#volunteerScreen .v-form-section select:focus{border-color:var(--v-blue);box-shadow:0 0 0 3px #1769e01a} #volunteerScreen .v-field-value{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0;max-width:68%;color:var(--v-text);font-size:15px;font-weight:700;text-align:right;overflow-wrap:anywhere} #volunteerScreen .v-field-value input,#volunteerScreen .v-field-value select{width:min(190px,100%);flex:1 1 auto} #volunteerScreen .v-unit{flex:0 0 auto;color:var(--v-muted);font-size:13px;font-weight:500;white-space:nowrap} #volunteerScreen .v-form-section .v-choice-row{display:flex;justify-content:flex-end;gap:6px;flex-wrap:wrap} #volunteerScreen .v-form-section .v-choice{min-height:38px;padding:7px 10px;border:1px solid var(--v-line);border-radius:8px;background:var(--v-surface);color:var(--v-muted);font-size:13px;font-weight:700} #volunteerScreen .v-form-section .v-choice.active{border-color:var(--v-blue);background:var(--v-blue-soft);color:var(--v-blue)} /* Match summary and four risk segments */ #volunteerScreen .v-match-summary{margin:12px;padding:15px;border:0;border-radius:var(--v-radius);background:var(--v-navy);color:#fff;box-shadow:0 8px 20px #12365318} #volunteerScreen .v-match-summary h2{margin:0;color:#fff;font-size:15px;line-height:1.4} #volunteerScreen .v-match-summary p,#volunteerScreen .v-match-summary small{color:#c7d8e6;font-size:12px;line-height:1.6} #volunteerScreen .v-match-summary .v-summary-score{font-size:34px;line-height:1.1;font-weight:900;font-variant-numeric:tabular-nums} #volunteerScreen .v-match-summary>summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;cursor:pointer;list-style:none} #volunteerScreen .v-match-summary>summary::-webkit-details-marker{display:none} #volunteerScreen .v-match-summary>summary::after{content:'⌄';color:#b8cde0;font-size:18px;line-height:1} #volunteerScreen .v-match-summary[open]>summary::after{content:'⌃'} #volunteerScreen .v-risk-tabs{display:grid;grid-template-columns:1.1fr 1fr 1fr 1.1fr;gap:6px;margin:14px 0 0} #volunteerScreen .v-risk-tabs button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:68px;padding:8px 4px;border:1px solid transparent;border-radius:10px;background:#fff;color:var(--v-muted);font-size:14px;line-height:1.2;font-weight:800} #volunteerScreen .v-risk-tabs button strong{display:block;font-size:28px;line-height:1;font-variant-numeric:tabular-nums} #volunteerScreen .v-risk-tabs button span{display:block;margin:0;font-size:13px;line-height:1.3;opacity:1} #volunteerScreen .v-risk-tabs button[aria-pressed="true"]{border-color:#c6dafa;background:var(--v-blue);color:#fff} #volunteerScreen .v-risk-tabs button:nth-child(2){background:var(--v-red-soft);color:var(--v-red)} #volunteerScreen .v-risk-tabs button:nth-child(3){background:var(--v-amber-soft);color:var(--v-amber)} #volunteerScreen .v-risk-tabs button:nth-child(4){background:var(--v-green-soft);color:var(--v-green)} #volunteerScreen .v-risk-tabs button:nth-child(2)[aria-pressed="true"]{background:var(--v-red);color:#fff} #volunteerScreen .v-risk-tabs button:nth-child(3)[aria-pressed="true"]{background:var(--v-amber);color:#fff} #volunteerScreen .v-risk-tabs button:nth-child(4)[aria-pressed="true"]{background:var(--v-green);color:#fff} /* Year-by-year history: four values remain readable without a wide table. */ #volunteerScreen .v-history-grid{display:grid;gap:8px;margin:10px 0 0} #volunteerScreen .v-history-year{padding:10px;border:1px solid var(--v-line);border-radius:9px;background:var(--v-bg)} #volunteerScreen .v-history-year>h4,#volunteerScreen .v-history-year>strong{display:block;margin:0 0 8px;color:var(--v-text);font-size:13px;font-weight:800} #volunteerScreen .v-history-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px} #volunteerScreen .v-history-metrics>*{min-width:0;padding:7px 5px;border-radius:6px;background:#fff;color:var(--v-muted);font-size:10px;line-height:1.35;text-align:center;overflow-wrap:anywhere} #volunteerScreen .v-history-metrics strong,#volunteerScreen .v-history-metrics b{display:block;margin-top:3px;color:var(--v-text);font-size:14px;line-height:1.2;font-variant-numeric:tabular-nums} #volunteerScreen .v-history-metrics .is-positive,#volunteerScreen .v-history-metrics [data-direction="high"]{color:var(--v-green)} #volunteerScreen .v-history-metrics .is-negative,#volunteerScreen .v-history-metrics [data-direction="low"]{color:var(--v-red)} /* Result cards, detail sheets and dialogs */ #volunteerScreen .v-candidate{border-radius:var(--v-radius);box-shadow:0 4px 14px #2347670d} #volunteerScreen .v-candidate h3{color:var(--v-text);font-weight:800} #volunteerScreen .v-candidate .v-risk{flex:0 0 auto} #volunteerScreen .v-dialog{width:min(100% - 20px,430px);max-width:430px;border:0;border-radius:16px;background:var(--v-surface);overflow:hidden} #volunteerScreen .v-dialog-heading{padding:17px 16px 12px;border-bottom:1px solid var(--v-line)} #volunteerScreen .v-dialog-heading h2{font-size:19px;color:var(--v-text)} #volunteerScreen .v-dialog-body{padding:15px 16px} #volunteerScreen .v-dialog-footer{padding:11px 16px calc(11px + env(safe-area-inset-bottom));border-top:1px solid var(--v-line)} #volunteerScreen .v-dialog-footer .v-button{flex:1} /* Basket risk summary and ratio track */ #volunteerScreen .v-draft-risk-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin:12px 0} #volunteerScreen .v-draft-risk-cards>*{min-width:0;padding:11px 6px;border-radius:9px;text-align:center} #volunteerScreen .v-draft-risk-cards strong{display:block;font-size:28px;line-height:1.05;font-weight:900;font-variant-numeric:tabular-nums} #volunteerScreen .v-draft-risk-cards span{display:block;margin-top:4px;font-size:12px;font-weight:800} #volunteerScreen .v-draft-risk-cards>*:nth-child(1){background:var(--v-red-soft);color:var(--v-red)} #volunteerScreen .v-draft-risk-cards>*:nth-child(2){background:var(--v-amber-soft);color:var(--v-amber)} #volunteerScreen .v-draft-risk-cards>*:nth-child(3){background:var(--v-green-soft);color:var(--v-green)} #volunteerScreen .v-draft-risk-track{display:grid;grid-template-columns:var(--v-risk-reach,1fr) var(--v-risk-steady,1fr) var(--v-risk-safe,1fr);gap:3px;min-height:9px;margin:11px 0 14px;overflow:hidden;border-radius:5px;background:#edf0f4} #volunteerScreen .v-draft-risk-track>*{min-width:0;min-height:9px} #volunteerScreen .v-draft-risk-track>*:nth-child(1){background:#e86a71} #volunteerScreen .v-draft-risk-track>*:nth-child(2){background:#efb04a} #volunteerScreen .v-draft-risk-track>*:nth-child(3){background:#4fbe91} /* Export preview */ #volunteerScreen .v-export-page{padding:16px 12px 24px} #volunteerScreen .v-export-page h1{margin:0;color:var(--v-text);font-size:24px;line-height:1.3} #volunteerScreen .v-export-page .v-export-summary{margin-top:14px;padding:14px;border:1px solid var(--v-line);border-radius:var(--v-radius);background:var(--v-surface)} #volunteerScreen .v-export-page .v-export-filename{padding:11px;border-radius:8px;background:var(--v-bg);color:#285b84} #volunteerScreen .v-export-page .v-export-stats{margin-top:12px} #volunteerScreen .v-export-page .v-export-checklist>*{min-height:44px;border-radius:8px} #volunteerScreen .v-export-page .v-export-actions{display:flex;gap:8px;margin-top:16px} #volunteerScreen .v-export-page .v-export-actions>*{flex:1;min-width:0} /* The fixed nav stays inside the phone content width and keeps 44px targets. */ #volunteerScreen .v-bottom-nav{left:50%;right:auto;width:min(100%,430px);transform:translateX(-50%);background:rgba(255,255,255,.98);border-top:1px solid var(--v-line);box-shadow:0 -4px 16px #23476710} #volunteerScreen .v-bottom-nav button,#volunteerScreen .v-bottom-nav a{min-height:52px;border-radius:8px;color:var(--v-muted);font-size:11px} #volunteerScreen .v-bottom-nav button[aria-current="page"],#volunteerScreen .v-bottom-nav button[aria-pressed="true"],#volunteerScreen .v-bottom-nav .is-active{background:var(--v-blue-soft);color:var(--v-blue)} /* Keep the profile save action and the volunteer basket action in one stable header slot. On the profile step the save action remains visible; after matching, the same slot becomes the basket shortcut. */ #volunteerScreen .v-heading-actions{grid-column:3;grid-row:1;display:flex;align-items:center;justify-content:flex-end;gap:5px;min-width:0} #volunteerScreen .v-heading-actions .v-heading-draft{grid-column:auto;grid-row:auto} #volunteerScreen .v-heading-save{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:0 8px;border:1px solid #c8dcff;border-radius:8px;background:#edf4ff;color:#155fe8;font-size:13px;font-weight:700;white-space:nowrap} #volunteerScreen[data-flow-page="results"] .v-heading-save{display:none} #volunteerScreen[data-flow-page="profile"] .v-heading-draft{display:none} /* The planner remains a phone-width flow even when the browser viewport is wide. Keep result and basket pages as one readable column. */ #volunteerScreen .v-workspace{display:block} #volunteerScreen[data-pane="matches"] .v-draft-panel{display:none} #volunteerScreen[data-pane="draft"] .v-matches{display:none} @media(max-width:760px){ #volunteerScreen[data-flow-page="profile"] .v-heading{grid-template-columns:minmax(0,1fr) auto;gap:8px} #volunteerScreen[data-flow-page="profile"] .v-heading-actions{grid-column:2;min-width:44px} } @media(max-width:430px){ #volunteerScreen .v-heading-actions{gap:3px} #volunteerScreen .v-heading-save{min-width:44px;padding:0 7px;font-size:12px} #volunteerScreen .v-match-summary,#volunteerScreen .v-matches{margin-left:10px;margin-right:10px} #volunteerScreen .v-match-summary{padding:13px} #volunteerScreen .v-risk-tabs{gap:4px} #volunteerScreen .v-risk-tabs button{min-height:64px;font-size:12px} #volunteerScreen .v-risk-tabs button strong{font-size:26px} #volunteerScreen .v-risk-tabs button span{font-size:12px} #volunteerScreen .v-history-metrics{gap:4px} #volunteerScreen .v-history-metrics>*{padding:6px 3px;font-size:9px} #volunteerScreen .v-history-metrics strong,#volunteerScreen .v-history-metrics b{font-size:13px} } @media(max-width:359px){ #volunteerScreen[data-flow-page="profile"] .v-heading{grid-template-columns:minmax(0,1fr) auto;gap:5px} #volunteerScreen[data-flow-page="profile"] .v-heading-actions{grid-column:2;min-width:44px} #volunteerScreen .v-heading-save{min-width:44px;padding:0 5px;font-size:11px} #volunteerScreen{font-size:14px} #volunteerScreen .v-form-section{margin-left:10px;margin-right:10px;padding-left:11px;padding-right:11px} #volunteerScreen .v-form-section h2{margin-left:-11px;margin-right:-11px;padding-left:11px;padding-right:11px} #volunteerScreen .v-field-value{max-width:64%;font-size:14px} #volunteerScreen .v-field-value input,#volunteerScreen .v-field-value select{font-size:15px} #volunteerScreen .v-risk-tabs button{min-height:60px} #volunteerScreen .v-risk-tabs button strong{font-size:24px} #volunteerScreen .v-history-metrics>*{font-size:8px} #volunteerScreen .v-history-metrics strong,#volunteerScreen .v-history-metrics b{font-size:12px} } /* Final markup alignment: keep each field's label, control, unit and error on predictable rows after the form was split into information sections. */ #volunteerScreen .v-profile-grid .v-form-section>label{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; text-align:left; } #volunteerScreen .v-profile-grid .v-form-section>label:has(.v-rank-status), #volunteerScreen .v-profile-grid .v-form-section>label:has(.v-field-error){ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.65fr); align-items:center; } #volunteerScreen .v-profile-grid .v-form-section>label>small{ grid-column:1/-1; min-height:0; margin:0; } #volunteerScreen .v-profile-grid .v-form-section .v-field-value{ margin-left:auto; } #volunteerScreen .v-match-summary-heading{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:8px} #volunteerScreen .v-match-summary-heading h2{margin:0;color:#fff;font-size:15px;line-height:1.4} #volunteerScreen .v-match-summary-heading span{color:#c7d8e6;font-size:11px;line-height:1.45;text-align:right} #volunteerScreen .v-match-summary .v-summary-context{margin:9px 0 0;padding:9px 0 0;border-top:1px solid #ffffff26;background:transparent;color:#c7d8e6;font-size:11px;line-height:1.55} #volunteerScreen .v-match-summary .v-summary-metrics{margin:0;gap:6px} #volunteerScreen .v-match-summary .v-summary-metrics>*{border-color:#ffffff24;background:#ffffff12} #volunteerScreen .v-match-summary .v-summary-metrics small{color:#c7d8e6} #volunteerScreen .v-match-summary .v-summary-metrics strong{color:#fff} #volunteerScreen .v-match-summary .v-summary-metrics em{font-style:normal;color:#c7d8e6;font-size:.65em;font-weight:600} /* v96 profile redesign: six fields, one calm phone-first intake surface. */ #volunteerScreen[data-flow-page="profile"]{ max-width:430px; margin:0 auto; padding:0 12px calc(34px + env(safe-area-inset-bottom)); color:#14283a; } #volunteerScreen[data-flow-page="profile"] .v-heading{ display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:start; gap:12px; padding:24px 2px 15px; } #volunteerScreen[data-flow-page="profile"] .v-heading-copy p{ margin:0 0 7px; color:#1769e0; font-size:11px; font-weight:750; letter-spacing:.08em; } #volunteerScreen[data-flow-page="profile"] .v-heading-copy h1{ margin:0; color:#14283a; font-size:27px; line-height:1.2; letter-spacing:-.03em; font-weight:760; } #volunteerScreen[data-flow-page="profile"] .v-heading-copy>span{ display:block; margin-top:8px; color:#6b7c8d; font-size:13px; line-height:1.5; } #volunteerScreen[data-flow-page="profile"] .v-heading-actions{grid-column:2;grid-row:1;align-self:start} #volunteerScreen[data-flow-page="profile"] .v-flow-steps{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:6px; margin:0 0 12px; color:#7a8b9b; font-size:11px; } #volunteerScreen[data-flow-page="profile"] .v-flow-steps i{display:none} #volunteerScreen[data-flow-page="profile"] .v-flow-steps span{ min-width:0; padding:8px 6px; border:1px solid #e2eaf2; border-radius:8px; background:#fff; text-align:center; white-space:nowrap; } #volunteerScreen[data-flow-page="profile"] .v-flow-steps span[data-v-flow-step="export"]{display:none} #volunteerScreen[data-flow-page="profile"] .v-flow-steps span.is-active{border-color:#c8dcff;background:#edf4ff;color:#1769e0;font-weight:700} #volunteerScreen[data-flow-page="profile"] .v-profile{margin:0;padding:0;border:0;background:transparent;box-shadow:none} #volunteerScreen[data-flow-page="profile"] .v-profile-grid{display:grid;grid-template-columns:1fr;gap:12px} #volunteerScreen[data-flow-page="profile"] .v-form-section{ min-width:0; margin:0; padding:17px 16px; border:1px solid #dfe8f0; border-radius:14px; background:#fff; box-shadow:0 7px 18px rgba(35,65,92,.06); } #volunteerScreen[data-flow-page="profile"] .v-form-section-heading{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin:0 0 14px; } #volunteerScreen[data-flow-page="profile"] .v-form-section-heading h2{margin:0;color:#183249;font-size:16px;line-height:1.35;font-weight:750} #volunteerScreen[data-flow-page="profile"] .v-form-section-heading span{color:#8393a1;font-size:11px;white-space:normal;text-align:right;max-width:66%;line-height:1.45} #volunteerScreen[data-flow-page="profile"] .v-form-section-heading span b{display:block;margin-top:2px;color:#1769e0;font-size:10px;font-weight:700} #volunteerScreen[data-flow-page="profile"] .v-profile-choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 10px} #volunteerScreen[data-flow-page="profile"] .v-profile-choice-grid label, #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid label{display:grid;gap:7px;min-width:0;color:#53697b;font-size:13px;line-height:1.35;font-weight:650} #volunteerScreen[data-flow-page="profile"] .v-profile-choice-grid .v-field-value, #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-field-value{display:flex;align-items:center;gap:6px;width:100%;max-width:none;min-width:0;margin:0;justify-content:stretch} #volunteerScreen[data-flow-page="profile"] .v-profile-choice-grid select{min-width:0;width:100%;height:46px;padding:0 10px;border-radius:9px;background:#f7f9fc;color:#1b3045;font-size:15px} #volunteerScreen[data-flow-page="profile"] .v-profile-choice-grid .v-field-value select{width:100%;max-width:none} #volunteerScreen[data-flow-page="profile"] .v-batch-field{min-width:0;margin:0;padding:0;border:0} #volunteerScreen[data-flow-page="profile"] .v-batch-field legend{padding:0;color:#53697b;font-size:13px;line-height:1.35;font-weight:650} #volunteerScreen[data-flow-page="profile"] .v-batch-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-top:7px} #volunteerScreen[data-flow-page="profile"] .v-batch-options label{display:block;position:relative;min-width:0;margin:0;cursor:pointer} #volunteerScreen[data-flow-page="profile"] .v-batch-options input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} #volunteerScreen[data-flow-page="profile"] .v-batch-options span{display:flex;align-items:center;justify-content:center;width:100%;height:46px;padding:0 8px;border:1px solid #dce4ed;border-radius:9px;background:#f7f9fc;color:#53697b;font-size:15px;line-height:1.3;font-weight:650;white-space:nowrap} #volunteerScreen[data-flow-page="profile"] .v-batch-options label:has(input:checked) span{border-color:#1769e0;background:#edf4ff;color:#1769e0;box-shadow:0 0 0 2px rgba(23,105,224,.09)} #volunteerScreen[data-flow-page="profile"] .v-batch-options label:has(input:focus-visible) span{outline:3px solid rgba(23,105,224,.24);outline-offset:2px} #volunteerScreen[data-flow-page="profile"] .v-exam-type-field, #volunteerScreen[data-flow-page="profile"] .v-batch-field{grid-column:1 / -1} #volunteerScreen[data-flow-page="profile"] .v-exam-type-field{min-width:0;margin:0;padding:0;border:0} #volunteerScreen[data-flow-page="profile"] .v-exam-type-field legend{padding:0;color:#53697b;font-size:13px;line-height:1.35;font-weight:650} #volunteerScreen[data-flow-page="profile"] .v-exam-type-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px;margin-top:7px} #volunteerScreen[data-flow-page="profile"] .v-exam-type-options label{display:block;position:relative;min-width:0;margin:0;cursor:pointer} #volunteerScreen[data-flow-page="profile"] .v-exam-type-options input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} #volunteerScreen[data-flow-page="profile"] .v-exam-type-options span{display:flex;align-items:center;justify-content:center;width:100%;height:46px;padding:0 8px;border:1px solid #dce4ed;border-radius:9px;background:#f7f9fc;color:#53697b;font-size:15px;line-height:1.3;font-weight:650;white-space:nowrap} #volunteerScreen[data-flow-page="profile"] .v-exam-type-options label:has(input:checked) span{border-color:#1769e0;background:#edf4ff;color:#1769e0;box-shadow:0 0 0 2px rgba(23,105,224,.09)} #volunteerScreen[data-flow-page="profile"] .v-exam-type-options label:has(input:focus-visible) span{outline:3px solid rgba(23,105,224,.24);outline-offset:2px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid>label{ display:grid; grid-template-columns:1fr; grid-template-rows:auto auto auto; align-items:stretch; gap:7px; } #volunteerScreen[data-flow-page="profile"] .v-profile-grid .v-form-section .v-profile-score-grid>label{ display:grid; grid-template-columns:1fr; grid-template-rows:auto auto auto; align-items:stretch; } #volunteerScreen[data-flow-page="profile"] .v-profile-grid .v-form-section .v-profile-score-grid>label>.v-field-value{ grid-column:auto; grid-row:auto; width:100%; max-width:none; margin-left:0; flex:1 1 auto; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid>label>.v-field-value{ grid-column:auto; grid-row:auto; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid>label{padding:13px 12px;border:1px solid #dce7f1;border-radius:11px;background:#f7faff} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-label-title{color:#506a7e;font-size:13px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid input{min-width:0;width:100%;height:50px;padding:0 2px;border:0;border-bottom:2px solid #c5d5e4;border-radius:0;background:transparent;color:#14283a;font-size:24px;font-weight:760;line-height:1;text-align:left} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-field{border-color:#bfe4d5;background:#f2fbf7} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-field input{border-bottom-color:#9dd2bd;color:#147050} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid input:focus{border-bottom-color:#1769e0;box-shadow:none} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-unit{flex:none;color:#6c8191;font-size:13px;font-weight:650} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-field-error, #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-status{display:block;min-height:34px;margin:0;color:#738596;font-size:11px;line-height:1.5;font-weight:500} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-field-error{color:#bf4d58} #volunteerScreen[data-flow-page="profile"] input[type="number"]::-webkit-inner-spin-button, #volunteerScreen[data-flow-page="profile"] input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0} #volunteerScreen[data-flow-page="profile"] input[type="number"]{appearance:textfield} #volunteerScreen[data-flow-page="profile"] .v-profile-note{margin:0 2px;color:#8293a1;font-size:11px;line-height:1.7} #volunteerScreen[data-flow-page="profile"] .v-profile-actions{position:sticky;bottom:0;z-index:4;margin:0;padding:10px 0 max(10px,env(safe-area-inset-bottom));border-top:1px solid #dfe8f0;background:rgba(246,248,251,.95);backdrop-filter:blur(12px)} #volunteerScreen[data-flow-page="profile"] .v-profile-actions .v-button{width:100%;min-height:52px;border-radius:11px;background:#1769e0;border-color:#1769e0;font-size:16px;font-weight:750;box-shadow:0 6px 14px rgba(23,105,224,.18)} #volunteerScreen[data-flow-page="profile"] .v-profile-actions .v-button:hover{background:#0f58c5} #volunteerScreen[data-flow-page="profile"] .v-bottom-nav{display:none} #volunteerScreen[data-flow-page="profile"] .v-heading-draft{display:none} #volunteerScreen[data-flow-page="profile"] .v-rank-breakdown{margin-top:0} @media(max-width:359px){ #volunteerScreen[data-flow-page="profile"]{padding-left:9px;padding-right:9px} #volunteerScreen[data-flow-page="profile"] .v-heading-copy h1{font-size:24px} #volunteerScreen[data-flow-page="profile"] .v-heading-copy>span{font-size:12px} #volunteerScreen[data-flow-page="profile"] .v-form-section{padding:15px 13px} #volunteerScreen[data-flow-page="profile"] .v-profile-choice-grid{grid-template-columns:1fr;gap:10px} #volunteerScreen[data-flow-page="profile"] .v-profile-choice-grid select{padding-left:7px;padding-right:7px;font-size:14px} #volunteerScreen[data-flow-page="profile"] .v-batch-options span{height:44px;font-size:14px} #volunteerScreen[data-flow-page="profile"] .v-exam-type-options span{height:44px;font-size:14px;padding-left:4px;padding-right:4px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid{gap:7px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid>label{padding:11px 9px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid input{font-size:21px} } /* Final screenshot pass: keep the intake controls readable in two columns, then let result cards use the full phone width without clipping titles. */ #volunteerScreen[data-flow-page="profile"] .v-profile-grid .v-form-section .v-profile-choice-grid>label{ display:grid; grid-template-columns:1fr; gap:7px; align-items:stretch; min-width:0; font-size:14px; line-height:1.4; } #volunteerScreen[data-flow-page="profile"] .v-profile-grid .v-form-section .v-profile-choice-grid>label>.v-field-value{ display:flex; width:100%; max-width:none; min-width:0; margin:0; } #volunteerScreen[data-flow-page="profile"] .v-profile-grid .v-form-section .v-profile-choice-grid select{ width:100%; min-width:0; height:44px; padding:0 10px; font-size:15px; line-height:1.3; text-align:left; text-align-last:left; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid input{ font-size:22px; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid input::placeholder{ font-size:16px; font-weight:650; color:#7b8793; } #volunteerScreen[data-flow-page="results"] .v-heading{ position:relative; z-index:1; min-height:104px; overflow:visible; } #volunteerScreen[data-flow-page="results"] .v-heading-copy{min-width:0} #volunteerScreen[data-flow-page="results"] .v-heading-copy h1{ white-space:normal; overflow-wrap:anywhere; } #volunteerScreen[data-flow-page="results"] .v-candidate h3{ display:block; overflow:visible; -webkit-line-clamp:unset; -webkit-box-orient:initial; white-space:normal; overflow-wrap:anywhere; } #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="reach"]{background:var(--v-red-soft);color:var(--v-red)} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="steady"]{background:var(--v-amber-soft);color:var(--v-amber)} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="safe"]{background:var(--v-green-soft);color:var(--v-green)} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk=""]{background:#fff;color:var(--v-muted)} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="reach"][aria-pressed="true"]{background:var(--v-red);color:#fff} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="steady"][aria-pressed="true"]{background:var(--v-amber);color:#fff} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="safe"][aria-pressed="true"]{background:var(--v-green);color:#fff} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk=""][aria-pressed="true"]{background:var(--v-blue);color:#fff} /* The match toolbar is a filter row, not a school search box. Keep both choices visible and equal-width on the phone surface. */ #volunteerScreen .v-match-toolbar .v-filters{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); flex:1 1 auto; min-width:0; gap:8px; } #volunteerScreen .v-match-toolbar .v-filters select{ width:100%; min-width:0; height:44px; min-height:44px; padding:0 10px; border-radius:8px; font-size:14px; } /* v100 mobile result pass: one fixed draft bar and dense, scannable cards. */ #volunteerScreen.screen.active{transform:none} @media (max-width:760px){ #volunteerScreen[data-flow-page="results"]{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); } #volunteerScreen[data-flow-page="results"] .v-heading-draft, #volunteerScreen[data-flow-page="results"] .v-mobile-tabs, #volunteerScreen[data-flow-page="results"] .v-bottom-nav{ display:none!important; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-bar{ position:fixed; left:50%; right:auto; bottom:0; z-index:50; display:flex!important; align-items:center; justify-content:space-between; gap:10px; width:min(100%,430px); min-height:68px; margin:0; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); transform:translateX(-50%); border-top:1px solid var(--v-line); background:rgba(255,255,255,.98); box-shadow:0 -5px 18px rgba(35,55,85,.1); backdrop-filter:blur(16px); } #volunteerScreen[data-flow-page="results"][data-pane="draft"] .v-mobile-draft-bar{ bottom:0; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-open{ display:grid; grid-template-columns:auto auto; grid-template-rows:auto auto; align-items:center; justify-content:start; min-width:0; flex:1 1 auto; gap:0 7px; border:0; padding:2px 0; background:transparent; color:var(--v-text); text-align:left; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-open:focus-visible{ outline:3px solid rgba(23,105,224,.28); outline-offset:3px; border-radius:8px; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-label{ color:var(--v-text); font-size:14px; font-weight:750; line-height:1.2; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-open strong{ color:var(--v-blue); font-size:18px; font-weight:800; line-height:1.1; font-variant-numeric:tabular-nums; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-open strong small{ margin-left:2px; color:var(--v-faint); font-size:11px; font-weight:600; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-open em{ grid-column:1/-1; min-width:0; margin-top:3px; overflow:hidden; color:var(--v-muted); font-size:10px; font-style:normal; line-height:1.3; text-overflow:ellipsis; white-space:nowrap; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-actions{ display:none; } #volunteerScreen[data-flow-page="results"][data-pane="draft"] .v-mobile-draft-actions{ display:flex; flex:0 0 auto; gap:6px; } #volunteerScreen[data-flow-page="results"][data-pane="draft"] .v-mobile-draft-actions .v-button{ min-width:64px; min-height:44px; padding:7px 10px; border-radius:8px; font-size:12px; } #volunteerScreen[data-flow-page="results"][data-pane="draft"] .v-mobile-draft-open em{ color:var(--v-blue); } #volunteerScreen[data-flow-page="results"] .v-matches{ padding:0 10px; } #volunteerScreen[data-flow-page="results"] .v-candidate{ min-width:0; margin:0 0 6px; padding:8px 9px; border-radius:9px; box-shadow:0 2px 8px rgba(35,55,85,.05); } #volunteerScreen[data-flow-page="results"] .v-candidate header{ gap:5px; } #volunteerScreen[data-flow-page="results"] .v-candidate-main{ min-width:0; } #volunteerScreen[data-flow-page="results"] .v-candidate-title{ position:relative; gap:5px; align-items:center; } #volunteerScreen[data-flow-page="results"] .v-candidate-title h3{ min-width:0; flex:1 1 auto; padding-right:66px; font-size:14px; line-height:1.25; font-weight:750; } #volunteerScreen[data-flow-page="results"] .v-major-select{ position:absolute; top:50%; right:0; flex:0 0 auto; min-height:44px; padding:4px 7px; border-radius:6px; font-size:10px; line-height:1.2; transform:translateY(-50%); } #volunteerScreen[data-flow-page="results"] .v-candidate header p{ margin:2px 0 0; color:var(--v-muted); font-size:10px; line-height:1.3; } #volunteerScreen[data-flow-page="results"] .v-candidate header .v-risk{ flex:0 0 auto; align-self:flex-start; padding:3px 5px; border-radius:5px; font-size:10px; line-height:1.2; white-space:nowrap; } #volunteerScreen[data-flow-page="results"] .v-major-summary{ display:-webkit-box; min-width:0; margin:4px 0 3px; overflow:hidden; color:#65778a; font-size:10px; line-height:1.3; -webkit-box-orient:vertical; -webkit-line-clamp:1; } #volunteerScreen[data-flow-page="results"] .v-history-current{ display:grid; grid-template-columns:auto repeat(4,minmax(0,1fr)); align-items:center; gap:3px; min-width:0; margin:3px 0 0; padding:5px 5px; border-radius:6px; background:#f6f8fb; color:#6e7f8f; font-size:9px; line-height:1.2; } #volunteerScreen[data-flow-page="results"] .v-history-current>*{ min-width:0; overflow-wrap:anywhere; } #volunteerScreen[data-flow-page="results"] .v-history-current strong{ color:var(--v-text); font-size:10px; font-variant-numeric:tabular-nums; } #volunteerScreen[data-flow-page="results"] .v-history-current span, #volunteerScreen[data-flow-page="results"] .v-history-current b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } #volunteerScreen[data-flow-page="results"] .v-history-current b{ color:#b46832; font-weight:750; } #volunteerScreen[data-flow-page="results"] .v-history{ margin-top:3px; border-top:0; padding-top:0; } /* Full three-year history and provenance stay available in the group detail dialog; keeping them out of the match row makes scanning fast. */ #volunteerScreen[data-flow-page="results"] .v-candidate .v-history, #volunteerScreen[data-flow-page="results"] .v-candidate .v-source{ display:none; } #volunteerScreen[data-flow-page="results"] .v-history summary{ min-height:22px; padding:2px 0; color:#557794; font-size:10px; line-height:1.3; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-note, #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-table-wrap{ display:none; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history[open] .v-history-table-wrap{ display:block; } #volunteerScreen[data-flow-page="results"] .v-candidate-footer{ gap:4px; align-items:center; } #volunteerScreen[data-flow-page="results"] .v-verification{ min-width:0; overflow:hidden; color:#9a8d80; font-size:9px; line-height:1.25; text-overflow:ellipsis; white-space:nowrap; } #volunteerScreen[data-flow-page="results"] .v-candidate-footer>div{ gap:7px; } #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-text-button{ min-height:44px; padding:4px 2px; font-size:10px; line-height:1.2; } } @media (min-width:761px){ #volunteerScreen .v-mobile-draft-bar{display:none!important} } @media (max-width:359px){ #volunteerScreen[data-flow-page="results"] .v-matches{padding-left:8px;padding-right:8px} #volunteerScreen[data-flow-page="results"] .v-candidate{padding-left:8px;padding-right:8px} #volunteerScreen[data-flow-page="results"] .v-candidate-title h3{font-size:13px} #volunteerScreen[data-flow-page="results"] .v-major-select{font-size:9px;padding-left:5px;padding-right:5px} #volunteerScreen[data-flow-page="results"] .v-history-current{font-size:8px;gap:2px;padding-left:4px;padding-right:4px} } @media (max-width:760px){ /* Keep the decision context visible while removing explanatory repetition. */ #volunteerScreen[data-flow-page="results"] .v-heading{ min-height:86px; padding:10px 12px 11px; } #volunteerScreen[data-flow-page="results"] .v-heading-copy p{ margin-bottom:2px; font-size:9px; } #volunteerScreen[data-flow-page="results"] .v-heading-copy h1{ font-size:21px; line-height:1.25; } #volunteerScreen[data-flow-page="results"] .v-heading-copy>span{ margin-top:3px; font-size:10px; } #volunteerScreen[data-flow-page="results"] .v-flow-steps{ gap:3px; padding:6px 10px; } #volunteerScreen[data-flow-page="results"] .v-flow-steps span{ padding:6px 3px; font-size:10px; } #volunteerScreen[data-flow-page="results"] .v-match-summary{ margin:7px 10px 5px; padding:9px 10px; border-radius:9px; } #volunteerScreen[data-flow-page="results"] .v-match-summary-heading h2{ font-size:13px; } #volunteerScreen[data-flow-page="results"] .v-match-summary-heading span{ font-size:9px; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics{ gap:4px; margin:5px 0 0; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics>*{ padding:6px 5px; border-radius:6px; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics small, #volunteerScreen[data-flow-page="results"] .v-summary-metrics span{ font-size:9px; line-height:1.25; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics strong{ margin-top:2px; font-size:16px; line-height:1.15; } #volunteerScreen[data-flow-page="results"] .v-summary-context{ display:none; } #volunteerScreen[data-flow-page="results"] .v-risk-filter-head{ display:none; } #volunteerScreen[data-flow-page="results"] .v-risk-tabs{ display:flex; gap:4px; margin:5px 10px 6px; } #volunteerScreen[data-flow-page="results"] .v-risk-tabs button{ flex:1 1 0; flex-direction:row; gap:3px; min-height:44px; padding:5px 4px; border-radius:7px; font-size:11px; } #volunteerScreen[data-flow-page="results"] .v-risk-tabs button strong{ font-size:14px; } #volunteerScreen[data-flow-page="results"] .v-risk-tabs button span{ font-size:10px; } #volunteerScreen[data-flow-page="results"] .v-match-toolbar{ margin-top:5px; } } /* The standalone planner uses the same compact phone shell on wide screens. */ html:has(body.volunteer-mode),body.volunteer-mode{min-width:0} body.volunteer-mode .tab-bar{display:none} #volunteerScreen[data-flow-page="results"]{ padding-bottom:calc(80px + env(safe-area-inset-bottom)); } #volunteerScreen .v-status:empty{display:none} #volunteerScreen[data-flow-page="results"] .v-heading{ grid-template-columns:auto minmax(0,1fr); min-height:64px; gap:12px; padding:8px 12px; } #volunteerScreen[data-flow-page="results"] .v-heading .v-flow-back{ min-height:44px; padding:8px 2px; border:0; background:transparent; font-size:14px; } #volunteerScreen[data-flow-page="results"] .v-heading-copy{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:4px 8px; } #volunteerScreen[data-flow-page="results"] .v-heading-copy p{ margin:0; color:var(--v-text); font-size:16px; font-weight:750; line-height:1.4; letter-spacing:0; } #volunteerScreen[data-flow-page="results"] .v-heading-copy h1{ border-left:1px solid var(--v-line); padding-left:8px; color:var(--v-muted); font-size:14px; line-height:1.4; } #volunteerScreen[data-flow-page="results"] .v-heading-copy>span{ grid-column:1/-1; margin:0; font-size:12px; line-height:1.4; } #volunteerScreen[data-flow-page="results"] .v-heading-actions, #volunteerScreen[data-flow-page="results"] .v-flow-steps, #volunteerScreen[data-flow-page="results"] .v-mobile-tabs, #volunteerScreen[data-flow-page="results"] .v-bottom-nav, #volunteerScreen[data-flow-page="results"] .v-match-summary-heading, #volunteerScreen[data-flow-page="results"] .v-summary-context{ display:none!important; } #volunteerScreen[data-flow-page="results"] .v-match-summary{ margin:0; padding:8px 12px; border:0; border-bottom:1px solid var(--v-line); border-radius:0; background:#fff; } #volunteerScreen[data-flow-page="results"] .v-match-summary .v-summary-metrics{ display:flex; gap:20px; margin:0; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics>div{ display:flex; align-items:baseline; gap:6px; padding:0; border:0; background:transparent; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics>div:last-child{ display:none; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics small{ color:var(--v-muted); font-size:12px; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics strong{ margin:0; color:var(--v-text); font-size:16px; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics em{ color:var(--v-muted); font-size:12px; } #volunteerScreen[data-flow-page="results"] .v-matches{padding:0 10px} #volunteerScreen[data-flow-page="results"] .v-risk-filter-head{display:none} #volunteerScreen[data-flow-page="results"] .v-risk-tabs{ display:flex; gap:6px; margin:8px 0 4px; } #volunteerScreen[data-flow-page="results"] .v-risk-tabs button{ flex:1 1 0; flex-direction:row; gap:6px; min-height:44px; padding:6px; border-radius:6px; } #volunteerScreen[data-flow-page="results"] .v-risk-tabs button strong, #volunteerScreen[data-flow-page="results"] .v-risk-tabs button span{font-size:14px} #volunteerScreen[data-flow-page="results"] .v-match-toolbar{margin:0;gap:8px} #volunteerScreen[data-flow-page="results"] .v-match-toolbar-title{display:none} #volunteerScreen[data-flow-page="results"] .v-probability-note{ margin:6px 0; color:#776543; font-size:12px; line-height:1.5; } #volunteerScreen[data-flow-page="results"] .v-candidate{ margin:0; padding:10px 8px 2px; border:0; border-bottom:1px solid var(--v-line); border-radius:0; background:#fff; box-shadow:none; } #volunteerScreen[data-flow-page="results"] .v-candidate header{gap:8px} #volunteerScreen[data-flow-page="results"] .v-candidate-title h3{ padding:0; font-size:15px; font-weight:750; line-height:1.35; } #volunteerScreen[data-flow-page="results"] .v-candidate header p{ margin:3px 0 0; color:#59697a; font-size:12px; line-height:1.4; } #volunteerScreen[data-flow-page="results"] .v-candidate header .v-risk{ padding:4px 6px; border-radius:4px; font-size:12px; line-height:1.3; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-major-summary, #volunteerScreen[data-flow-page="results"] .v-candidate .v-source, #volunteerScreen[data-flow-page="results"] .v-candidate .v-history{display:none} #volunteerScreen[data-flow-page="results"] .v-compact-metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:4px; margin:6px 0 0; padding:0; border-radius:0; background:transparent; } #volunteerScreen[data-flow-page="results"] .v-compact-metrics>span{ overflow:visible; white-space:normal; text-overflow:clip; } #volunteerScreen[data-flow-page="results"] .v-compact-metrics small{ display:block; color:#59697a; font-size:12px; line-height:1.5; } #volunteerScreen[data-flow-page="results"] .v-compact-metrics strong, #volunteerScreen[data-flow-page="results"] .v-compact-metrics b{ display:block; margin-top:1px; color:var(--v-text); font-size:14px; font-weight:700; line-height:1.4; font-variant-numeric:tabular-nums; } #volunteerScreen[data-flow-page="results"] .v-compact-metrics b{color:#a45826} #volunteerScreen[data-flow-page="results"] .v-candidate-footer{ flex-direction:row; flex-wrap:nowrap; align-items:center; gap:4px; } #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-major-select{ position:static; min-height:44px; padding:4px 2px; border:0; background:transparent; color:var(--v-blue); font-size:12px; transform:none; } #volunteerScreen[data-flow-page="results"] .v-candidate-footer>div{ width:auto; gap:10px; margin-left:auto; } #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-text-button{ min-height:44px; padding:4px 0; font-size:12px; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-bar{ position:fixed; left:50%; right:auto; bottom:0; z-index:50; display:flex!important; align-items:center; gap:10px; width:min(100%,430px); min-height:64px; margin:0; padding:8px 12px calc(8px + env(safe-area-inset-bottom)); transform:translateX(-50%); border-top:1px solid var(--v-line); background:#fff; box-shadow:0 -4px 12px #2337550d; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-open{ display:grid; grid-template-columns:auto auto; justify-content:start; align-items:center; flex:1 1 auto; gap:2px 8px; min-width:0; padding:0; border:0; background:transparent; text-align:left; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-label{font-size:14px;font-weight:750} #volunteerScreen[data-flow-page="results"] .v-mobile-draft-open strong{color:var(--v-blue);font-size:18px} #volunteerScreen[data-flow-page="results"] .v-mobile-draft-open small{font-size:12px} #volunteerScreen[data-flow-page="results"] .v-mobile-draft-open em{ grid-column:1/-1; color:#59697a; font-size:11px; font-style:normal; } #volunteerScreen[data-flow-page="results"] .v-mobile-draft-actions{display:none} #volunteerScreen[data-flow-page="results"][data-pane="draft"] .v-mobile-draft-actions{display:flex;gap:6px} #volunteerScreen[data-flow-page="results"][data-pane="draft"] .v-draft-bottom{display:none} #volunteerScreen .v-dialog .v-source{font-size:12px} #volunteerScreen .v-dialog .v-source summary{min-height:44px;padding:10px 0} @media(max-width:359px){ #volunteerScreen[data-flow-page="results"] .v-heading{gap:8px;padding-left:10px;padding-right:10px} #volunteerScreen[data-flow-page="results"] .v-heading-copy{gap:4px 6px} #volunteerScreen[data-flow-page="results"] .v-heading-copy p{font-size:15px} #volunteerScreen[data-flow-page="results"] .v-heading-copy h1{font-size:13px;padding-left:6px} #volunteerScreen[data-flow-page="results"] .v-match-summary .v-summary-metrics{gap:12px} #volunteerScreen[data-flow-page="results"] .v-summary-metrics>div{gap:4px} } /* Audit mode: show every matched group's history and provenance while the imported plans, filing lines, and rank mappings are being reconciled. */ #volunteerScreen[data-flow-page="results"] .v-candidate .v-major-summary, #volunteerScreen[data-flow-page="results"] .v-candidate .v-history, #volunteerScreen[data-flow-page="results"] .v-candidate .v-source{ display:block; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-note, #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-table-wrap{ display:block; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-table-wrap{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-source{ margin-top:8px; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline{ margin:7px 0 2px; padding:0; border:0; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline .v-history-table-wrap{ margin:0; overflow-x:auto; -webkit-overflow-scrolling:touch; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline table{ width:100%; min-width:0; table-layout:fixed; border-collapse:collapse; font-size:11px; line-height:1.35; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline th, #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline td{ min-width:0; padding:5px 3px; border-bottom:1px solid #edf1f5; color:#526477; text-align:center; vertical-align:top; overflow-wrap:anywhere; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline th{ color:#7a8a99; font-size:10px; font-weight:700; white-space:normal; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline th:nth-child(1){width:14%} #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline th:nth-child(2){width:16%} #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline th:nth-child(3){width:16%} #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline th:nth-child(4){width:23%} #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline th:nth-child(5){width:31%} #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline tbody tr:last-child td{border-bottom:0} #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline td:first-child{ color:var(--v-text); font-weight:750; font-variant-numeric:tabular-nums; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline td:nth-child(2), #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline td:nth-child(3), #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline td:nth-child(4){ color:var(--v-text); font-variant-numeric:tabular-nums; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline .v-year-compare{ display:block; color:#a45826; font-size:11px; font-weight:750; font-variant-numeric:tabular-nums; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline .v-history-audit{ display:block; margin-top:2px; color:#9a8d80; font-size:9px; line-height:1.25; } #volunteerScreen[data-flow-page="results"] .v-audit-note{ margin:8px 0 12px; padding:8px 10px; border-left:3px solid #c28b54; background:#fff8ef; color:#765a3d; font-size:11px; line-height:1.6; } /* Public result surface: keep the verified data readable and remove internal reconciliation details from the student-facing view. */ #volunteerScreen[data-flow-page="results"] .v-source, #volunteerScreen[data-flow-page="results"] .v-verification, #volunteerScreen[data-flow-page="results"] .v-audit-note, #volunteerScreen[data-flow-page="results"] .v-history-audit{ display:none!important; } #volunteerScreen[data-flow-page="results"] .v-match-summary{ position:sticky; top:0; z-index:30; margin:0; padding:10px 12px 11px; border-bottom:1px solid #dfe7f0; background:rgba(255,255,255,.97); box-shadow:0 2px 10px rgba(32,55,84,.06); backdrop-filter:blur(10px); } #volunteerScreen[data-flow-page="results"] .v-match-summary-heading{ display:flex!important; align-items:center; justify-content:space-between; gap:10px; margin:0 0 8px; } #volunteerScreen[data-flow-page="results"] .v-match-summary-heading h2{ margin:0; color:var(--v-text); font-size:14px; font-weight:800; line-height:1.4; } #volunteerScreen[data-flow-page="results"] .v-summary-edit{ min-height:32px; border:1px solid #c9daf7; border-radius:999px; background:#f4f8ff; color:#2166df; padding:5px 11px; font-size:12px; font-weight:700; white-space:nowrap; } #volunteerScreen[data-flow-page="results"] .v-summary-edit:focus-visible{ outline:3px solid rgba(33,102,223,.25); outline-offset:2px; } #volunteerScreen[data-flow-page="results"] .v-match-summary .v-summary-metrics{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:6px; margin:0; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics>div, #volunteerScreen[data-flow-page="results"] .v-summary-metrics>div:last-child{ display:block; min-width:0; padding:7px 8px; border:1px solid #e3eaf3; border-radius:8px; background:#f8faff; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics small{ display:block; color:#748399; font-size:10px; line-height:1.35; white-space:nowrap; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics strong{ display:block; margin-top:3px; color:#1e2e44; font-size:15px; font-weight:800; line-height:1.3; overflow-wrap:anywhere; } #volunteerScreen[data-flow-page="results"] .v-summary-metrics em{ color:#7d8999; font-size:10px; font-style:normal; font-weight:600; } #volunteerScreen[data-flow-page="results"] .v-school-logo-wrap{ display:grid; place-items:center; flex:0 0 34px; width:34px; height:34px; overflow:hidden; border:1px solid #e0e7ef; border-radius:9px; background:#f7f9fc; } #volunteerScreen[data-flow-page="results"] .v-school-logo{ display:block; width:100%; height:100%; object-fit:contain; } #volunteerScreen[data-flow-page="results"] .v-school-logo-fallback{ display:grid; place-items:center; width:100%; height:100%; color:#2166df; font-size:16px; font-weight:800; } #volunteerScreen[data-flow-page="results"] .v-candidate-title h3 small{ color:#68778a; font-size:.78em; font-weight:650; white-space:nowrap; } #volunteerScreen[data-flow-page="results"] .v-candidate header p{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; } #volunteerScreen[data-flow-page="results"] .v-special-badge{ display:inline-flex; align-items:center; min-height:20px; padding:2px 6px; border-radius:5px; background:#fff0f0; color:#cf3e42; font-size:11px; font-style:normal; font-weight:750; } #volunteerScreen[data-flow-page="results"] .v-group-strip{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:7px 0 0; padding:7px 8px; border:1px solid #e5eaf1; border-radius:7px; background:#f8fafc; color:#62748a; font-size:11px; line-height:1.35; } #volunteerScreen[data-flow-page="results"] .v-group-strip strong{ color:#304762; font-size:12px; font-weight:750; font-variant-numeric:tabular-nums; } #volunteerScreen[data-flow-page="results"] .v-group-strip span+span::before{ content:'·'; margin-right:6px; color:#abb6c4; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history{ display:block; margin:8px 0 0; padding-top:7px; border-top:1px solid #edf1f6; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline{ border:0; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-note{display:none} #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-table-wrap{ display:block; max-width:100%; margin-top:0; overflow-x:auto; -webkit-overflow-scrolling:touch; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline table{ width:100%; min-width:0; table-layout:fixed; font-size:10px; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline th, #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline td{ padding:5px 3px; text-align:center; white-space:normal; overflow-wrap:anywhere; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline th{font-size:9px} #volunteerScreen[data-flow-page="results"] .v-candidate .v-history-inline td{font-size:10px} #volunteerScreen[data-flow-page="results"] .v-candidate-footer{ margin-top:4px; } #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-major-select{ font-weight:750; } #volunteerScreen[data-flow-page="results"] .v-match-toolbar .v-filters{ grid-template-columns:repeat(4,minmax(0,1fr)); } #volunteerScreen[data-flow-page="results"] .v-match-toolbar .v-filters select{ min-width:0; overflow:hidden; text-overflow:ellipsis; } @media(max-width:600px){ #volunteerScreen[data-flow-page="results"] .v-match-summary{padding-left:10px;padding-right:10px} #volunteerScreen[data-flow-page="results"] .v-summary-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important} #volunteerScreen[data-flow-page="results"] .v-summary-metrics>div{padding:6px 7px} #volunteerScreen[data-flow-page="results"] .v-summary-metrics strong{font-size:14px} #volunteerScreen[data-flow-page="results"] .v-match-toolbar .v-filters{grid-template-columns:repeat(2,minmax(0,1fr))} #volunteerScreen[data-flow-page="results"] .v-match-toolbar .v-filters select{font-size:13px} } @media(max-width:359px){ #volunteerScreen[data-flow-page="results"] .v-summary-metrics strong{font-size:13px} #volunteerScreen[data-flow-page="results"] .v-summary-metrics small{font-size:9px} } /* Brand and detail surfaces */ #volunteerScreen .v-brand-lockup{display:flex;align-items:center;gap:7px;margin-bottom:7px;color:#1769e0;font-size:12px;font-weight:760;letter-spacing:.02em} #volunteerScreen .v-brand-lockup img{width:25px;height:25px;border-radius:7px;box-shadow:0 3px 8px rgba(79,70,229,.18)} #volunteerScreen .v-candidate .v-major-summary{display:none} #volunteerScreen[data-flow-page="results"] .v-group-strip{font-size:12px;line-height:1.45;gap:7px} #volunteerScreen[data-flow-page="results"] .v-group-strip strong{font-size:12px} #volunteerScreen .v-major-option{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:10px} #volunteerScreen .v-major-option>span{min-width:0} #volunteerScreen .v-major-info-button{min-height:30px;padding:4px 7px;border:1px solid #d7e4f5;border-radius:6px;background:#f7faff;color:#1769e0;font-size:11px;white-space:nowrap} #volunteerScreen .v-major-info-button:focus-visible,#volunteerScreen .v-adjustment-check input:focus-visible{outline:3px solid rgba(23,105,224,.2);outline-offset:2px} #volunteerScreen .v-adjustment-check{display:flex;flex-direction:row;align-items:flex-start;gap:10px;margin-top:18px;padding:11px 12px;border:1px solid #dfe8f2;border-radius:10px;background:#f8fbff;color:#304762;cursor:pointer} #volunteerScreen .v-adjustment-check input{width:19px;height:19px;flex:none;margin:1px 0;accent-color:#1769e0} #volunteerScreen .v-adjustment-check span{display:grid;gap:3px} #volunteerScreen .v-adjustment-check strong{font-size:13px;line-height:1.35} #volunteerScreen .v-adjustment-check small{color:#718399;font-size:11px;line-height:1.45} #volunteerScreen .v-major-detail-card{padding:2px 0 4px} #volunteerScreen .v-major-detail-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding-bottom:12px;border-bottom:1px solid #e8eef5} #volunteerScreen .v-major-detail-head>div{min-width:0} #volunteerScreen .v-major-detail-head span{color:#1769e0;font-size:11px;font-weight:700} #volunteerScreen .v-major-detail-head h3{margin:4px 0 0;color:#172c43;font-size:20px;line-height:1.3} #volunteerScreen .v-major-detail-head .v-button{min-height:34px;padding:6px 9px;font-size:11px;white-space:nowrap} #volunteerScreen .v-major-detail-overview{margin:13px 0 15px!important;padding:10px 11px;border-radius:8px;background:#f5f8fc;color:#53677e!important;font-size:13px!important;line-height:1.65!important} #volunteerScreen .v-major-detail-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} #volunteerScreen .v-major-detail-grid section{min-width:0;padding:11px;border:1px solid #e4ebf3;border-radius:9px;background:#fff} #volunteerScreen .v-major-detail-grid h4{margin:0 0 6px;color:#58708a;font-size:12px;line-height:1.35} #volunteerScreen .v-major-detail-grid p,#volunteerScreen .v-major-detail-grid ul{margin:0;color:#2f4359;font-size:12px;line-height:1.6} #volunteerScreen .v-major-detail-grid ul{padding-left:17px} #volunteerScreen .v-major-detail-note{margin:13px 0 0!important;color:#8795a5!important;font-size:10px!important;line-height:1.6!important} #volunteerScreen .v-detail-empty{color:#9aa7b6!important} @media(max-width:420px){ #volunteerScreen .v-major-option{grid-template-columns:auto minmax(0,1fr)} #volunteerScreen .v-major-info-button{grid-column:2;justify-self:start} #volunteerScreen .v-major-detail-grid{grid-template-columns:1fr} #volunteerScreen .v-major-detail-head h3{font-size:18px} } /* v118 final intake and result header pass. The score area stays focused on the two values; the contextual bachelor line belongs with the exam choices. */ #volunteerScreen[data-flow-page="profile"] .v-profile-choice-grid > .v-bachelor-line{ grid-column:1 / -1; width:100%; margin:0; box-sizing:border-box; } #volunteerScreen[data-flow-page="profile"] .v-profile-choice-grid > .v-bachelor-line[hidden]{display:none!important} #volunteerScreen[data-flow-page="profile"] .v-profile-score-section .v-form-section-heading span{display:none} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid > label{margin:0} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid > label .v-rank-status, #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid > label .v-field-error{overflow-wrap:anywhere} /* Keep the results shell readable: return control, brand, page title and context are separate rows instead of competing for one horizontal line. */ #volunteerScreen[data-flow-page="results"] .v-heading{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:start; gap:0 10px; min-height:0; padding:12px 12px 10px; background:#fff; border-bottom:1px solid #e5ebf2; } #volunteerScreen[data-flow-page="results"] .v-heading .v-flow-back{ grid-column:1; grid-row:1 / span 3; align-self:start; min-height:40px; padding:7px 2px; border:0; background:transparent; color:#1769e0; font-size:13px; font-weight:700; white-space:nowrap; } #volunteerScreen[data-flow-page="results"] .v-heading-copy{ grid-column:2; grid-row:1; display:grid; grid-template-columns:minmax(0,1fr); gap:3px; min-width:0; } #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup{ min-width:0; margin:0; gap:6px; color:#1769e0; font-size:13px; line-height:1.3; } #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup img{width:22px;height:22px} #volunteerScreen[data-flow-page="results"] .v-heading-copy h1{ min-width:0; margin:0; padding:0; border:0; color:#14283a; font-size:19px; line-height:1.3; font-weight:800; overflow-wrap:anywhere; } #volunteerScreen[data-flow-page="results"] .v-heading-copy > span{ min-width:0; margin:0; color:#718296; font-size:12px; line-height:1.4; overflow-wrap:anywhere; } #volunteerScreen[data-flow-page="results"] .v-heading-actions{display:none!important} @media(max-width:420px){ #volunteerScreen[data-flow-page="profile"] .v-profile-choice-grid > .v-bachelor-line{ margin-top:1px; } #volunteerScreen[data-flow-page="results"] .v-heading{ padding:10px 10px 9px; gap:0 8px; } #volunteerScreen[data-flow-page="results"] .v-heading .v-flow-back{ min-height:36px; font-size:12px; } #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup{ font-size:12px; } #volunteerScreen[data-flow-page="results"] .v-heading-copy h1{font-size:18px} #volunteerScreen[data-flow-page="results"] .v-heading-copy > span{font-size:11px} } /* v118 profile polish: make the intake hierarchy calm and keep the score cards readable when the browser width is narrow. */ #volunteerScreen[data-flow-page="profile"] .v-profile-score-section .v-form-section-heading{ align-items:flex-start; margin-bottom:12px; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-section .v-form-section-heading span{ max-width:52%; color:#718394; font-size:12px; line-height:1.45; } #volunteerScreen[data-flow-page="profile"] .v-bachelor-line{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 13px; padding:10px 12px; border:1px solid #d8e7f5; border-radius:10px; background:#f6faff; } #volunteerScreen[data-flow-page="profile"] .v-bachelor-line span{ display:grid; gap:3px; min-width:0; } #volunteerScreen[data-flow-page="profile"] .v-bachelor-line span+span{ padding-left:10px; border-left:1px solid #dce8f3; } #volunteerScreen[data-flow-page="profile"] .v-bachelor-line small{ color:#6f8395; font-size:11px; line-height:1.35; } #volunteerScreen[data-flow-page="profile"] .v-bachelor-line strong{ color:#1a5f9f; font-size:17px; line-height:1.2; font-variant-numeric:tabular-nums; } #volunteerScreen[data-flow-page="profile"] .v-bachelor-line em{ margin-left:2px; color:#6f8395; font-size:11px; font-style:normal; font-weight:650; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid{ gap:12px; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid>label{ min-height:154px; padding:14px 13px 12px; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-label-title{ color:#4e677b; font-size:14px; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid input{ height:54px; font-size:27px; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-field.is-below-line{ border-color:#efd7c1; background:#fff8f1; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-field.is-below-line input{ border-bottom-color:#e4b98d; color:#a65d2c; font-size:20px; letter-spacing:0; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-field.is-below-line .v-rank-status{ color:#a65d2c; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-status{ min-height:37px; font-size:12px; line-height:1.5; } @media(max-width:420px){ #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid{ grid-template-columns:1fr; gap:9px; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid>label{ min-height:0; } #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid input{ height:48px; } #volunteerScreen[data-flow-page="profile"] .v-bachelor-line{ gap:6px; padding:9px 10px; } #volunteerScreen[data-flow-page="profile"] .v-bachelor-line strong{ font-size:16px; } } /* v119 final cascade for the compact result surface. */ #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup{display:block;margin:0;line-height:1} #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup span, #volunteerScreen[data-flow-page="results"] .v-heading-copy>h1, #volunteerScreen[data-flow-page="results"] .v-heading-copy>span{display:none!important} #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup img{display:block;width:34px;height:34px;border-radius:9px} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk=""]{background:#f0f5ff;color:#1769e0} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="reach"]{background:#fff0ee;color:#ff554c} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="steady"]{background:#fff8e5;color:#cc8a00} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="safe"]{background:#ecf8f1;color:#1e9a58} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk=""][aria-pressed="true"]{background:#1769e0;color:#fff} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="reach"][aria-pressed="true"]{background:#ff554c;color:#fff} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="steady"][aria-pressed="true"]{background:#cc8a00;color:#fff} #volunteerScreen[data-flow-page="results"] .v-risk-tabs button[data-v-risk="safe"][aria-pressed="true"]{background:#1e9a58;color:#fff} #volunteerScreen[data-flow-page="results"] .v-match-toolbar .v-filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;min-width:0} #volunteerScreen[data-flow-page="results"] .v-filter-field{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px;min-width:0} #volunteerScreen[data-flow-page="results"] .v-filter-field>span{color:#66798c;font-size:13px;line-height:1.3;white-space:nowrap} #volunteerScreen[data-flow-page="results"] .v-filter-field select{min-width:0;width:100%;height:44px;min-height:44px;padding:0 9px;overflow:hidden;text-overflow:ellipsis} @media(max-width:360px){ #volunteerScreen[data-flow-page="results"] .v-summary-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px} #volunteerScreen[data-flow-page="results"] .v-summary-metrics>div{min-width:0;padding:8px 7px;overflow-wrap:anywhere} #volunteerScreen[data-flow-page="results"] .v-summary-metrics small, #volunteerScreen[data-flow-page="results"] .v-summary-metrics span{overflow-wrap:anywhere;white-space:normal} #volunteerScreen[data-flow-page="results"] .v-summary-metrics strong{font-size:15px;line-height:1.25} #volunteerScreen[data-flow-page="results"] .v-filter-field{grid-template-columns:1fr;gap:3px} #volunteerScreen[data-flow-page="results"] .v-filter-field>span{font-size:12px} } /* v120 result header and four-up filter rail. The result surface keeps one centered brand lockup; the return control only appears on the draft page. */ #volunteerScreen[data-flow-page="results"] .v-heading{ position:relative; display:flex; align-items:center; justify-content:center; min-height:70px; padding:10px 48px; background:#fff; border-bottom:1px solid #e5ebf2; } #volunteerScreen[data-flow-page="results"] .v-heading-copy{ display:flex; align-items:center; justify-content:center; min-width:0; width:100%; } #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup{ display:flex!important; align-items:center; justify-content:center; gap:9px; margin:0; color:#1769e0; font-size:19px; line-height:1.2; font-weight:800; letter-spacing:.01em; } #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup span{display:inline!important} #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup img{ display:block; width:50px; height:50px; border-radius:13px; box-shadow:0 5px 14px rgba(23,105,224,.18); } #volunteerScreen[data-flow-page="results"] .v-heading-copy>h1, #volunteerScreen[data-flow-page="results"] .v-heading-copy>span{display:none!important} #volunteerScreen[data-flow-page="results"] .v-heading .v-flow-back{ position:absolute; left:10px; top:50%; transform:translateY(-50%); min-height:36px; padding:7px 8px; border:0; background:transparent; color:#1769e0; font-size:12px; font-weight:700; white-space:nowrap; } #volunteerScreen[data-flow-page="results"] .v-match-toolbar .v-filters{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; align-items:end; gap:6px; width:100%; min-width:0; } #volunteerScreen[data-flow-page="results"] .v-filter-field{ display:grid!important; grid-template-columns:1fr!important; gap:3px; min-width:0; } #volunteerScreen[data-flow-page="results"] .v-filter-field>span{ min-width:0; color:#66798c; font-size:11px; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #volunteerScreen[data-flow-page="results"] .v-filter-field select{ width:100%; min-width:0; height:38px; min-height:38px; padding:0 5px; border-radius:8px; font-size:11px; overflow:hidden; text-overflow:ellipsis; } @media(max-width:420px){ #volunteerScreen[data-flow-page="results"] .v-heading{min-height:64px;padding:8px 44px} #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup{font-size:17px;gap:8px} #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup img{width:46px;height:46px;border-radius:12px} #volunteerScreen[data-flow-page="results"] .v-match-toolbar .v-filters{gap:4px} #volunteerScreen[data-flow-page="results"] .v-filter-field>span{font-size:10px} #volunteerScreen[data-flow-page="results"] .v-filter-field select{height:36px;min-height:36px;font-size:10px;padding:0 3px} } /* Final mobile brand pass: make the identity read as the page title and keep score editing in the dedicated profile entry below the result list. */ #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup img{ width:64px; height:64px; border-radius:16px; } #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup{ font-size:20px; gap:12px; } #volunteerScreen[data-flow-page="results"] .v-summary-edit{display:none!important} @media(max-width:420px){ #volunteerScreen[data-flow-page="results"] .v-heading{min-height:84px;padding:10px 44px} #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup{font-size:18px;gap:10px} #volunteerScreen[data-flow-page="results"] .v-heading-copy .v-brand-lockup img{width:64px;height:64px;border-radius:16px} } /* Keep the intake page branded as a centered app entry point. The save control stays in the corner so it never competes with the brand lockup. */ #volunteerScreen[data-flow-page="profile"] .v-heading{ position:relative; display:flex; flex-direction:column; align-items:center; gap:0; padding:20px 48px 18px; text-align:center; } #volunteerScreen[data-flow-page="profile"] .v-heading-copy{ display:flex; flex-direction:column; align-items:center; width:100%; } #volunteerScreen[data-flow-page="profile"] .v-heading-copy .v-brand-lockup{ justify-content:center; gap:10px; margin:0 0 12px; color:#1769e0; font-size:18px; line-height:1.25; } #volunteerScreen[data-flow-page="profile"] .v-heading-copy .v-brand-lockup img{ width:64px; height:64px; border-radius:16px; box-shadow:0 6px 16px rgba(23,105,224,.2); } #volunteerScreen[data-flow-page="profile"] .v-heading-copy h1{font-size:27px} #volunteerScreen[data-flow-page="profile"] .v-heading-copy>span{max-width:31em} #volunteerScreen[data-flow-page="profile"] .v-heading-actions{ position:absolute; top:20px; right:2px; z-index:1; } @media(max-width:420px){ #volunteerScreen[data-flow-page="profile"] .v-heading{padding:16px 44px 17px} #volunteerScreen[data-flow-page="profile"] .v-heading-copy .v-brand-lockup{font-size:17px;gap:9px;margin-bottom:10px} #volunteerScreen[data-flow-page="profile"] .v-heading-copy .v-brand-lockup img{width:58px;height:58px;border-radius:15px} #volunteerScreen[data-flow-page="profile"] .v-heading-copy h1{font-size:25px} #volunteerScreen[data-flow-page="profile"] .v-heading-actions{top:16px;right:0} } /* v122 interaction polish: keep the three card actions balanced and make the decision labels readable at a glance on narrow screens. */ #volunteerScreen[data-flow-page="results"] .v-candidate-title h3{padding-right:0} #volunteerScreen[data-flow-page="results"] .v-candidate-footer{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; width:100%; align-items:stretch; margin-top:10px; } #volunteerScreen[data-flow-page="results"] .v-candidate-footer>div{display:contents} #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-text-button, #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-major-select{ position:static; display:flex; width:100%; min-width:0; min-height:42px; align-items:center; justify-content:center; margin:0; padding:7px 5px; border:1px solid #d8e4ee; border-radius:9px; background:#f7fafc; color:#356581; font-size:12px; font-weight:700; line-height:1.25; text-align:center; white-space:normal; overflow-wrap:anywhere; transform:none; } #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-text-button:hover, #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-text-button:focus-visible{background:#edf5fc;border-color:#bcd5e8;color:#155d85} #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-major-select{border-color:#b9d4ff;background:#eaf3ff;color:#1769e0} #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-major-select.is-selected{background:#1769e0;border-color:#1769e0;color:#fff} /* v134 ordinary-gaokao subject model: make the 3+1+2 choice explicit while keeping the imported physical/history categories as the matching key. */ #volunteerScreen[data-flow-page="profile"] .v-general-subjects{ grid-column:1 / -1; display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:10px; min-width:0; } #volunteerScreen[data-flow-page="profile"] .v-general-subjects[hidden]{display:none!important} #volunteerScreen[data-flow-page="profile"] .v-subject-field{ min-width:0; margin:0; padding:10px; border:1px solid #dce7f1; border-radius:10px; background:#f8fbfe; } #volunteerScreen[data-flow-page="profile"] .v-subject-field legend{ display:flex; align-items:center; gap:5px; padding:0; color:#53697b; font-size:13px; line-height:1.35; font-weight:700; } #volunteerScreen[data-flow-page="profile"] .v-subject-field legend small{color:#8393a1;font-size:10px;font-weight:600} #volunteerScreen[data-flow-page="profile"] .v-subject-field legend b{margin-left:auto;color:#1769e0;font-size:11px;font-variant-numeric:tabular-nums} #volunteerScreen[data-flow-page="profile"] .v-subject-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px} #volunteerScreen[data-flow-page="profile"] .v-subject-options label{display:block;position:relative;min-width:0;margin:0;cursor:pointer} #volunteerScreen[data-flow-page="profile"] .v-subject-options input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none} #volunteerScreen[data-flow-page="profile"] .v-subject-options span{display:flex;align-items:center;justify-content:center;min-height:38px;padding:0 7px;border:1px solid #dce4ed;border-radius:8px;background:#fff;color:#53697b;font-size:13px;line-height:1.3;font-weight:650;white-space:nowrap} #volunteerScreen[data-flow-page="profile"] .v-subject-options label:has(input:checked) span{border-color:#1769e0;background:#edf4ff;color:#1769e0;box-shadow:0 0 0 2px rgba(23,105,224,.08)} #volunteerScreen[data-flow-page="profile"] .v-subject-options label:has(input:focus-visible) span{outline:3px solid rgba(23,105,224,.24);outline-offset:2px} #volunteerScreen[data-flow-page="profile"] .v-subject-field>small{display:block;margin-top:7px;color:#8393a1;font-size:10px;line-height:1.45} #volunteerScreen[data-flow-page="profile"] .v-category-context{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;min-width:0;align-items:stretch} #volunteerScreen[data-flow-page="profile"] .v-category-field{min-width:0} #volunteerScreen[data-flow-page="profile"] .v-category-context.is-general .v-category-field{display:none} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line{grid-column:2;display:grid;grid-template-columns:1fr;align-content:center;gap:0;min-width:0;min-height:74px;margin:0;padding:7px 10px;border:1px solid #d8e7f5;border-radius:10px;background:#f6faff} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line span{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:8px;min-width:0;padding:3px 0} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line span+span{padding-left:0;border-left:0;border-top:1px solid #dce8f3} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line small{min-width:0;color:#6f8395;font-size:10px;line-height:1.35;overflow-wrap:anywhere} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line strong{color:#1a5f9f;font-size:15px;line-height:1.2;font-variant-numeric:tabular-nums;white-space:nowrap} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line em{margin-left:2px;color:#6f8395;font-size:10px;font-style:normal;font-weight:650} @media(max-width:600px){ #volunteerScreen[data-flow-page="profile"] .v-general-subjects{grid-template-columns:1fr;gap:8px} #volunteerScreen[data-flow-page="profile"] .v-category-context{grid-template-columns:1fr;gap:8px} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line{grid-column:1;min-height:68px} } @media(max-width:359px){ #volunteerScreen[data-flow-page="profile"] .v-subject-field{padding:9px 8px} #volunteerScreen[data-flow-page="profile"] .v-subject-options span{font-size:12px} } /* v135 profile polish: reduce the visual weight of score entry and keep the single bachelor-line notice aligned in the open right-hand space. */ #volunteerScreen[data-flow-page="profile"] .v-profile-score-section{padding:14px 15px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-section .v-form-section-heading{margin-bottom:9px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-section .v-form-section-heading h2{font-size:15px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid{gap:8px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid>label{min-height:0;padding:9px 10px;border-radius:9px;gap:5px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-label-title{font-size:12px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid input{height:36px;font-size:20px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-field input{font-size:18px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-field-error, #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-status{min-height:18px;font-size:10px;line-height:1.35} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-unit{font-size:11px} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line{min-height:70px;padding:8px 12px;border-radius:9px;background:#f8fbff} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line span{padding:2px 0} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line small{font-size:10px} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line strong{font-size:15px} @media(max-width:600px){ #volunteerScreen[data-flow-page="profile"] .v-profile-score-section{padding:12px 13px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid>label{padding:8px 9px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid input{height:33px;font-size:19px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-field input{font-size:17px} #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-field-error, #volunteerScreen[data-flow-page="profile"] .v-profile-score-grid .v-rank-status{min-height:16px;font-size:9px} #volunteerScreen[data-flow-page="profile"] .v-bachelor-line{min-height:66px} } #volunteerScreen[data-flow-page="results"] .v-candidate-header .v-risk, #volunteerScreen[data-flow-page="results"] .v-candidate header .v-risk{ min-height:32px; padding:7px 10px; border-radius:8px; font-size:13px; font-weight:800; line-height:1.25; } #volunteerScreen[data-flow-page="results"] .v-candidate .v-risk-reach{background:#fff0ee;color:#e24c45} #volunteerScreen[data-flow-page="results"] .v-candidate .v-risk-steady{background:#fff8e5;color:#b87700} #volunteerScreen[data-flow-page="results"] .v-candidate .v-risk-safe{background:#ecf8f1;color:#16834f} @media(max-width:420px){ #volunteerScreen[data-flow-page="results"] .v-candidate-footer{gap:5px} #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-text-button, #volunteerScreen[data-flow-page="results"] .v-candidate-footer .v-major-select{min-height:40px;padding-left:3px;padding-right:3px;font-size:11px} #volunteerScreen[data-flow-page="results"] .v-candidate header .v-risk{padding:6px 7px;font-size:12px} }