/* Shared control sizing and page rhythm across public, account and admin pages. */
:root { --control-height: 44px; --field-width: 34rem; --ui-border: #cbd5df; --ui-ink: #172033; }
body { line-height: 1.5; }
main { min-width: 0; }
main input:not([type=hidden]):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]),
main select { min-height: var(--control-height); padding: 9px 12px; font-size: 16px; line-height: 1.5; border-radius: 8px; max-width: 100%; }
main textarea { padding: 10px 12px; font-size: 16px; line-height: 1.5; border-radius: 8px; resize: vertical; max-width: 100%; }
main input[type=number] { width: min(100%, 12rem); }
main input[type=date], main input[type=time] { width: min(100%, 14rem); }
main input[type=file] { padding: 8px; font-size: 14px; }
main input[type=checkbox], main input[type=radio] { width: 18px; height: 18px; padding: 0; accent-color: #286b4c; flex-shrink: 0; }
main label { margin: 16px 0 6px; font-size: 14px; font-weight: 650; }
main fieldset { min-width: 0; margin: 20px 0; }
main legend { margin-bottom: 8px; font-size: 16px; font-weight: 700; }
main fieldset > label:has(input[type=checkbox]), main fieldset > label:has(input[type=radio]) { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
main .btn { width: auto; min-height: 40px; padding: 9px 16px; border-radius: 8px; font-size: 14px; font-weight: 650; line-height: 1.5; }
main .btn-sm { min-height: 36px; padding: 6px 12px; }
main .form-control:focus, main input:focus-visible, main select:focus-visible, main textarea:focus-visible { border-color: #286b4c; box-shadow: 0 0 0 3px #286b4c22; }
main input:disabled, main select:disabled, main textarea:disabled { background: #f1f4f7; color: #59645e; }
main p { line-height: 1.6; }
main h1 { font-size: clamp(26px, 3vw, 34px); line-height: 1.2; }
main h2 { line-height: 1.3; }
main .form-note { max-width: 65ch; font-size: 13px; line-height: 1.5; }
main .validation-summary-valid { display: none; }
main .validation-summary-errors { padding: 12px 16px; margin-bottom: 16px; border: 1px solid #e9b7ba; border-radius: 8px; background: #fff5f5; }
main .validation-summary-errors ul { margin: 0; padding-left: 18px; }
main > form:not([class]), main > form.form-stack { max-width: var(--field-width); }
main > p { max-width: 75ch; }
main > form:not([class]) > input:not([type=hidden]) + input { margin-top: 12px; }
main > form:not([class]) > .btn { margin-top: 16px; }
.input-prefix { max-width: var(--field-width); }
.input-prefix:has(input[type=number]) { width: min(100%, 15rem); }
.input-prefix input { min-width: 0; flex: 1; width: 100%; }
.input-prefix span { flex-shrink: 0; padding: 0 12px; }
.profile-form { width: min(100%, 660px); margin: 28px auto; padding: 0 24px 40px; }
.profile-form .input-prefix, .profile-form textarea, .profile-form input, .profile-form select { max-width: 100%; }
.profile-form input[type=number] { max-width: 12rem; }
.profile-form > form > button[type=submit] { width: auto; min-width: 140px; margin-top: 20px; }
.profile-form .language-options label, .profile-form .hours-row > label { margin: 0; }
.language-picker summary, .timezone-picker summary { padding: 10px 12px; min-height: var(--control-height); }
.language-option { min-height: 40px; }
.birthday-fields { max-width: var(--field-width); }
.birthday-fields > div { flex-basis: 100px; }
.birthday-fields > div:first-child { flex-grow: 1.5; }
.auth-page { max-width: 440px; margin: clamp(28px, 7vh, 72px) auto; padding: 28px; background: #fff; border: 1px solid #dce3df; border-radius: 14px; box-shadow: 0 8px 24px #17203308; }
.auth-page h1 { margin: 0 0 12px; font-size: 28px; }
.auth-page > p { color: #56615b; font-size: 14px; }
.auth-page form > label { margin-top: 18px; }
.auth-page form > .btn { width: 100%; margin-top: 22px; min-height: 44px; }
.auth-page .auth-links { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; margin: 20px 0 0; font-size: 14px; }
.auth-page .auth-links a { color: #245b43; }
.settings-page { max-width: 800px; }
.settings-page form:not(.weekly-schedule-form) { max-width: var(--field-width); }
.settings-page section { padding: 24px 0; }
.settings-page section > h2 { margin-bottom: 12px; }
.dashboard-heading { align-items: center; margin-bottom: 24px; }
.dashboard-heading > div, .section-heading > div { min-width: 0; }
.dashboard-heading h1 { overflow-wrap: anywhere; }
.dashboard-section { margin: 28px 0; }
.dashboard-main { max-width: 1680px; }
.dashboard-metrics > div, .dashboard-metrics > a, .support-grid > a { min-width: 0; overflow-wrap: anywhere; }
.agent-status-row { flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.agent-status-row form { flex: 0 1 320px; min-width: 0; }
.agent-status-row form > label { margin-top: 0; }
.agent-status-row form .form-note { margin-bottom: 0; }
.agent-status-row > a { align-self: center; }
.admin-agent-row { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr) minmax(240px, 1fr); gap: 20px; padding: 20px; align-items: start; }
.admin-agent-row > div { min-width: 0; overflow-wrap: anywhere; }
.admin-actions { flex-wrap: wrap; align-items: flex-start; }
.admin-actions form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-width: 0; max-width: 100%; margin: 0; }
.admin-actions input:not([type=hidden]) { width: min(100%, 250px); }
.admin-inline-form, .admin-create-form { flex-wrap: wrap; align-items: center; }
.admin-inline-form input:not([type=hidden]), .admin-inline-form select { width: min(100%, 250px); min-width: 0; }
.admin-create-form input:not([type=checkbox]):not([type=hidden]) { width: min(100%, 320px); min-width: 0; }
.admin-inline-form label, .admin-create-form label { margin-top: 0; }
.table-responsive { max-width: 100%; overflow-x: auto; }
.table-responsive table { margin-bottom: 0; }
.dashboard-table th { white-space: nowrap; font-size: 13px; }
.dashboard-table td { vertical-align: middle; }
.dashboard-table td .btn { margin: 4px 0; }
.dashboard-table td input:not([type=checkbox]):not([type=hidden]) { min-width: 130px; }
.admin-ticket-list article > div, .admin-ticket-list form { min-width: 0; overflow-wrap: anywhere; }
.marketplace-filters, .history-filters, .report-filters { gap: 12px; }
.marketplace-filters > div, .history-filters > div, .report-filters > div { min-width: 0; }
.marketplace-filters label, .history-filters label, .report-filters label { margin-top: 0; }
.marketplace-filters .btn, .history-filters .btn, .report-filters .btn { min-height: var(--control-height); height: auto; }
.availability-filter { min-height: var(--control-height); }
.weekly-schedule-form .schedule-row input[type=time] { width: 100%; }
.live-status-form .live-status-bubble { margin: 0; padding: 10px 16px; }
.message-compose textarea, .support-form textarea { min-height: 120px; }
.room-message-form textarea { min-height: 44px; }
.public-nav { position: relative; z-index: 20; }
.public-menu { display: none; width: 44px; height: 44px; padding: 8px; margin-left: auto; color: #172033; background: transparent; }
.public-nav-links a[aria-current=page] { color: #245b43; text-decoration: underline; text-underline-offset: 5px; }
.dashboard-sidebar nav a[aria-current=page] { background: #2b4436; color: #fff; }
@media (max-width: 1100px) { .admin-agent-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .admin-agent-row > .admin-actions { grid-column: 1 / -1; } }
@media (max-width: 900px) {
    .public-nav { gap: 12px; }
    .public-menu { display: block; }
    .public-nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; padding: 12px 20px; border-bottom: 1px solid #dce3df; background: #fff; box-shadow: 0 8px 16px #1720330d; }
    .public-nav-open .public-nav-links { display: flex; align-items: stretch; flex-direction: column; gap: 0; }
    .public-nav-links a { padding: 12px 0; }
    .public-nav-actions { margin-left: 0; gap: 10px; }
}
@media (max-width: 700px) {
    .auth-page { margin: 28px 16px; padding: 24px; }
    .profile-form { padding: 0 18px 32px; }
    .dashboard-heading { align-items: flex-start; }
    .admin-agent-row { grid-template-columns: minmax(0, 1fr); padding: 16px; }
    .admin-actions { flex-direction: row; }
    .admin-actions form { flex: 0 1 260px; }
    .admin-inline-form, .admin-create-form { flex-direction: row; }
    .admin-inline-form input:not([type=hidden]), .admin-inline-form select { flex: 1 1 180px; }
    .admin-create-form input:not([type=hidden]):not([type=checkbox]) { flex: 1 1 220px; }
    .public-nav-actions > a:first-child { display: inline; }
    .public-nav-actions .btn { padding: 8px 10px; font-size: 13px; }
    .schedule-row { gap: 10px; }
    .settings-page form:not(.weekly-schedule-form) { max-width: 100%; }
}
@media (max-width: 380px) { .public-nav { gap: 8px; padding: 0 12px; } .public-nav-actions { gap: 8px; } .public-brand { font-size: 20px; } .public-nav-actions .btn { padding: 8px; } }

/* Readable secondary text and links on pale page backgrounds. */
.rate-earnings a, .back-link { color: #245b43; }
.thread-heading > div > span, #threadPresence { color: #56615b; }

/* Reserve the sound control's space so unlocking audio cannot move navigation under a pointer. */
.dashboard-topbar { gap: 12px; }
.call-sound-slot { display: block; flex: 0 0 160px; width: 160px; margin-left: auto; }
.call-sound-slot .call-sound-enable { width: 100%; margin: 0; }
@media (max-width: 700px) {
    .dashboard-topbar { justify-content: flex-start; gap: 8px; padding: 0 12px; }
    .dashboard-topbar .mobile-menu { flex: 0 0 44px; width: 44px; height: 44px; }
    .dashboard-topbar .profile-shortcut { margin-left: auto; }
    .call-sound-slot { flex-basis: 88px; width: 88px; }
    .call-sound-slot .call-sound-enable { padding: 6px; font-size: 12px; line-height: 1.3; min-height: 40px; white-space: normal; }
}

main input:is([type=text], [type=email], [type=password], [type=tel], [type=url], [type=search], :not([type])), main select, main textarea { max-width: min(100%, var(--field-width)); }
.admin-agent-row { background: #fff; }
.admin-agent-row > div > span { color: #56615b; }
.admin-agent-row strong > a { color: #245b43; }
main .btn-outline-warning { color: #785700; border-color: #967017; background: #fff9e7; }
main .btn-outline-warning:hover, main .btn-outline-warning:focus { color: #fff; border-color: #785700; background: #785700; }

/* Professional consulting identity. */
.public-hero { background-image: linear-gradient(120deg, #f4f8f6, #e5eee9); min-height: 520px; }
.public-hero-content { max-width: 780px; }
.public-hero h1 { font-size: clamp(38px, 5.5vw, 68px); line-height: 1.08; letter-spacing: -.025em; }
.public-hero-content > p:not(.eyebrow) { max-width: 620px; }
@media (max-width: 700px) { .public-hero { min-height: 440px; } .public-hero h1 { font-size: 40px; } }
.form-note a { color: #216544; text-decoration: underline; }

/* Guided journeys and progressive search controls. */
.journey-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.journey-grid > a { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px; border: 1px solid #d6e2db; border-radius: 12px; color: #183326; background: #fff; text-decoration: none; }
.journey-grid > a:hover { background: #f0f7f3; border-color: #216544; }
.journey-grid > a > span:last-child { color: #52615a; font-size: 14px; line-height: 1.5; }
.journey-grid .step-number { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #e3efe8; color: #216544; font-weight: 700; }
.more-filters { grid-column: 1 / -1; border: 1px solid #d6e2db; border-radius: 10px; background: #fff; padding: 14px 16px; }
.more-filters summary { cursor: pointer; font-weight: 700; color: #183326; min-height: 32px; }
.more-filters summary span { font-weight: 400; color: #52615a; margin-left: 8px; font-size: 13px; }
.advanced-filter-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 18px; }
.advanced-filter-grid > div { min-width: 0; }
.browse-empty h2 { font-size: 22px; color: #183326; }
.browse-empty p { color: #52615a; }
.profile-sections { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0; }
.profile-sections a { display: inline-flex; align-items: center; padding: 8px 12px; min-height: 40px; color: #216544; background: #fff; border: 1px solid #d6e2db; border-radius: 20px; text-decoration: none; font-size: 14px; }
.profile-sections a:hover { background: #e3efe8; }
.profile-form h2 { font-size: 21px; margin: 28px 0 16px; padding-top: 14px; border-top: 1px solid #d6e2db; scroll-margin-top: 96px; }
#profile-weekly-hours, #profile-pictures { scroll-margin-top: 96px; }
@media (max-width: 700px) {
    .journey-grid { grid-template-columns: 1fr; }
    .journey-grid > a { padding: 16px; gap: 8px; }
    .advanced-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .more-filters summary span { display: block; margin: 6px 0 0; }
}
@media (max-width: 420px) { .advanced-filter-grid { grid-template-columns: 1fr; } }

.dashboard-help { margin: 28px 0; padding: 16px; background: #eaf2ed; border-radius: 10px; color: #354f40; }
.dashboard-help a { color: #216544; text-decoration: underline; }
.password-field { position: relative; width: 100%; max-width: 100%; margin-bottom: 8px; }
.password-field input { width: 100%; padding-right: 52px !important; margin-bottom: 0 !important; }
.password-field .password-visibility { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; background: transparent; color: #216544; padding: 0; border: 0; margin: 0; min-height: 44px; height: 44px; width: 44px; cursor: pointer; border-radius: 6px; }
.password-visibility:hover { background: #edf5ef; }
.password-visibility:focus-visible { outline: 2px solid #216544; outline-offset: 1px; }
.consultation-guidance { padding: 12px; background: #eef5f0; border-radius: 10px; color: #354f40; font-size: 13px; line-height: 1.5; }
.consultation-guidance p:last-child { margin-bottom: 0; }
.consultation-guidance a { color: #216544; text-decoration: underline; }
.login-toast { position: fixed; top: 1rem; right: 1rem; z-index: 1100; display: flex; align-items: start; gap: 1rem; max-width: min(420px, calc(100vw - 2rem)); padding: 1rem; border: 1px solid; border-radius: 12px; box-shadow: 0 8px 24px #0002; }
.login-toast-success { background: #eaf8ef; color: #14532d; border-color: #86c99c; }
.login-toast-pending { background: #fff8e6; color: #713f12; border-color: #e9c574; }
.login-toast button { background: transparent; border: 0; color: inherit; font-size: 1.5rem; line-height: 1; cursor: pointer; padding: .25rem; }
.email-two-factor-settings fieldset { border: 0; padding: 0; }
.email-two-factor-settings legend { font-size: 1rem; font-weight: 600; }
.email-two-factor-settings fieldset label { display: inline-flex; align-items: center; gap: .5rem; margin-right: 1.25rem; }
.email-two-factor-settings input[type=radio] { width: auto; margin: 0; }