.personal-settings,.workspace-help{max-width:1100px;margin:0 auto}
.personal-settings>.panel{margin:18px 0;padding:24px}
.personal-settings h2,.workspace-help h2{font-size:calc(21px * var(--hub-scale,1));margin:0 0 10px;line-height:1.35}
.personal-settings p,.workspace-help p,.workspace-help li{font-size:calc(14px * var(--hub-scale,1));line-height:1.7}
.personal-settings .page-heading,.workspace-help .page-heading{margin:24px 0}
.personal-settings .page-heading p,.workspace-help .page-heading p{color:var(--muted);margin:8px 0}
#appearance-form .formgrid{grid-template-columns:repeat(3,minmax(0,1fr));margin:22px 0;gap:16px}
.settings-text-preview{border:1px solid var(--border);border-left:4px solid var(--accent);padding:16px 18px;border-radius:10px;background:var(--surface-soft);margin:18px 0}
.settings-text-preview p{font-size:inherit!important;margin:7px 0 0;line-height:1.6}
.appearance-advanced{border-top:1px solid var(--border);margin-top:24px;padding:8px 0}
.appearance-advanced>summary{padding:12px 0;cursor:pointer;font-weight:600}
.appearance-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.appearance-actions button{margin:0;min-height:44px}
.settings-help-card{display:flex;align-items:center;justify-content:space-between;gap:24px;border-left:4px solid var(--accent)}
.settings-help-card p{margin:0;max-width:700px}
.settings-help-card>button{flex:none;min-height:44px;white-space:nowrap}
.settings-access-card p{margin-bottom:0}
.help-role-card{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px;border-radius:14px;background:#124e41;color:#fff}
.help-role-card h2{color:#ffce4b;margin:7px 0}
.help-role-card .eyebrow{color:#c0d8cb}
.help-role-card p{max-width:720px;margin:0 0 12px}
.help-role-card>button{flex:none;min-height:44px;background:#ffffff12;color:#fff;border-color:#ffffff50;white-space:nowrap}
.help-scope{font-size:calc(12px * var(--hub-scale,1));border:1px solid #ffffff40;border-radius:20px;display:inline-block;padding:5px 10px}
.help-topic-links{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0}
.help-topic-links a{display:inline-flex;align-items:center;min-height:44px;padding:9px 14px;color:var(--text);border:1px solid var(--border);border-radius:9px;background:var(--surface);font-size:calc(12px * var(--hub-scale,1));text-decoration:none}
.help-topic-links a:hover{border-color:var(--accent)}
.help-topic-list{display:grid;gap:16px}
.help-topic{margin:0;padding:24px;scroll-margin-top:110px}
.help-intro{margin:0;color:var(--muted)}
.help-topic ol{padding-left:24px;margin:18px 0 0}
.help-topic li{padding-left:6px;margin:12px 0}
.help-topic li::marker{color:var(--muted);font-weight:600}
.help-payment-legend{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}
.help-payment-legend>span{background:var(--payment-bg);color:var(--payment-ink);border:1px solid var(--payment-line);border-radius:8px;padding:9px 12px;font-size:calc(12px * var(--hub-scale,1));font-weight:600}
/* Personal reading size also reaches the controls and compact response cards. */
#app .workspace-main :is(label,button,input,select,textarea,summary){font-size:calc(13px * var(--hub-scale,1))}
#app .workspace-main .response-card h2{font-size:calc(18px * var(--hub-scale,1))}
#app .workspace-main .response-card .response-person p{font-size:calc(13px * var(--hub-scale,1))}
#app .workspace-main .response-payment-badge{font-size:calc(13px * var(--hub-scale,1))}
#app .workspace-main .response-payment-figures dd{font-size:calc(19px * var(--hub-scale,1))}
#app .workspace-main .response-payment-figures dt{font-size:calc(10px * var(--hub-scale,1))}
#app .workspace-main .response-overview strong{font-size:calc(30px * var(--hub-scale,1))}
#app .workspace-main .response-overview span{font-size:calc(12px * var(--hub-scale,1))}
@media(max-width:850px){
 #app .workspace-main :is(input,select,textarea){font-size:calc(16px * var(--hub-scale,1))}
 #app .workspace-main :is(.personal-settings,.workspace-help) .page-heading{margin:0 0 18px}
 #app .workspace-main :is(.personal-settings,.workspace-help) .panel{padding:18px;margin:14px 0}
 #appearance-form .formgrid{grid-template-columns:minmax(0,1fr);gap:12px;margin:18px 0}
 .appearance-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
 .appearance-actions .primary{grid-column:1/-1}
 .appearance-actions button{width:100%;padding:10px}
 .settings-help-card,.help-role-card{display:grid;gap:16px}
 .settings-help-card>button,.help-role-card>button{width:100%}
 .help-role-card{padding:18px}
 .help-topic-links{gap:8px;margin:16px 0}
 .help-topic-links a{flex:1 1 140px;justify-content:center;text-align:center}
 .help-topic-list{gap:0}
 .help-topic ol{padding-left:20px}
 .help-payment-legend{display:grid;grid-template-columns:minmax(0,1fr);gap:6px}
 #app .workspace-main .response-card h2{font-size:calc(15px * var(--hub-scale,1))}
 #app .workspace-main .response-card .response-person p{font-size:calc(11px * var(--hub-scale,1))}
 #app .workspace-main .response-payment-badge{font-size:calc(12px * var(--hub-scale,1))}
 #app .workspace-main .response-payment-figures dd{font-size:calc(17px * var(--hub-scale,1))}
 #app .workspace-main .response-overview strong{font-size:calc(24px * var(--hub-scale,1))}
 #app .workspace-main .response-overview span{font-size:calc(11px * var(--hub-scale,1))}
}