/* Proposal reading and section editing share one page, with no wizard. */
.proposal-detail { --pd-surface: var(--card, #fff); --pd-soft: #f4f8ff; color: var(--navy, #16325c); }
.pd-overview { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; }
.pd-status { display: inline-flex; align-items: center; gap: 8px; padding: 9px 13px; border: 1px solid #f1dcb4; border-radius: 12px; background: #fff7e8; color: #996416; font-size: 12px; }
.pd-status.is-signed { border-color: #c3e2d4; background: #edf9f2; color: #28734f; }
.pd-metadata { display: flex; flex-wrap: wrap; gap: 8px 20px; color: var(--muted); font-size: 11px; }
.pd-access-note { display: flex; align-items: flex-start; gap: 8px; color: var(--muted); font-size: 12px; line-height: 1.6; margin: 14px 0 0; }
.pd-access-note svg { flex-shrink: 0; margin-top: 2px; }
.pd-feedback { color: var(--navy); line-height: 1.6; font-size: 12px; }
.pd-feedback:not(:empty) { padding: 13px 16px; margin-top: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--pd-soft); }
.pd-sections { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: 20px; margin-top: 24px; }
.pd-section { --pd-accent: #3775d5; --pd-wash: #eef4ff; --pd-accent-line: #dce8ff; border: 1px solid var(--line, #dbe6f6); border-radius: 22px; min-width: 0; background: var(--pd-surface); box-shadow: 0 8px 25px #17386004; overflow: hidden; }
.pd-section--responsible, .pd-section--dependents, .pd-section--address, .pd-section--values { grid-column: 1 / -1; }
.pd-section-heading { display: flex; align-items: center; gap: 13px; padding: 20px 24px; background: linear-gradient(110deg, var(--pd-wash), var(--pd-surface) 75%); border-bottom: 1px solid var(--line); }
.pd-section-icon { display: grid; place-items: center; flex: 0 0 43px; height: 43px; border: 1px solid var(--pd-accent-line); border-radius: 13px; background: var(--pd-surface); color: var(--pd-accent); }
.pd-section-heading > div { min-width: 0; }
.pd-section-heading h2 { margin: 3px 0 0; font-size: 17px; line-height: 1.35; }
.pd-eyebrow { display: block; font-size: 10px; font-weight: 600; color: var(--pd-accent); letter-spacing: .02em; }
.pd-section .pd-edit { margin-left: auto; flex-shrink: 0; min-height: 34px; padding: 6px 11px; font-size: 11px; gap: 6px; }
.pd-section-body { padding: 24px; }
.pd-section.is-editing { border-color: color-mix(in srgb, var(--brand) 50%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 6%, transparent); }
.pd-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 26px; margin: 0; }
.pd-data > div { min-width: 0; }
.pd-data dt { color: var(--muted); font-size: 11px; margin: 0 0 5px; }
.pd-data dd { margin: 0; font-size: 13px; line-height: 1.6; color: var(--navy); overflow-wrap: anywhere; }
.pd-section--locality .pd-data { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-section--locality .pd-data > div:first-child { grid-column: 1 / -1; }
.pd-section--payment .pd-data { grid-template-columns: 1fr; }
.pd-note, .pd-muted { color: var(--muted); font-size: 12px; line-height: 1.6; }
.pd-note { border-top: 1px solid var(--line); padding-top: 15px; margin: 18px 0 0; }
.pd-empty { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.65; }
.pd-person { min-width: 0; }
.pd-person-heading { display: flex; align-items: center; gap: 12px; margin-bottom: 23px; }
.pd-person-heading h3 { margin: 0; font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; }
.pd-person-heading p { margin: 3px 0 0; font-size: 11px; color: var(--muted); }
.pd-person-avatar { display: grid; place-items: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; background: var(--pd-wash); color: var(--pd-accent); font-size: 13px; font-weight: 700; }
.pd-plan { display: flex; align-items: center; gap: 12px; margin-top: 23px; border: 1px solid var(--pd-accent-line); padding: 14px 16px; border-radius: 13px; background: var(--pd-wash); }
.pd-plan-icon { flex: 0 0 22px; color: var(--pd-accent); }
.pd-plan > div { min-width: 0; }
.pd-plan small { display: block; font-size: 10px; color: var(--muted); line-height: 1.5; }
.pd-plan strong { display: block; font-size: 13px; margin-top: 2px; overflow-wrap: anywhere; }
.pd-plan-price { margin-left: auto; text-align: right; flex-shrink: 0; }
.pd-plan-price strong { color: var(--pd-accent); font-size: 17px; }
.pd-plan--none { font-size: 12px; line-height: 1.6; color: var(--muted); }
.pd-plan--none svg { flex-shrink: 0; }
.pd-dependents { display: grid; gap: 26px; }
.pd-dependents .pd-person + .pd-person { border-top: 1px solid var(--line); padding-top: 26px; }
.pd-values-list { display: grid; gap: 17px; }
.pd-value-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.pd-value-row > div { min-width: 0; }
.pd-value-row strong { font-size: 13px; overflow-wrap: anywhere; }
.pd-value-row > strong { flex-shrink: 0; text-align: right; }
.pd-value-row span { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; line-height: 1.5; }
.pd-total { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 14px; margin: 24px -24px -24px; padding: 23px 24px; border-top: 1px solid var(--pd-accent-line); background: var(--pd-wash); }
.pd-total span { font-size: 14px; font-weight: 700; }
.pd-total small { display: block; font-size: 11px; margin-top: 4px; color: var(--muted); }
.pd-total > strong { font-size: 28px; color: var(--pd-accent); }
.pd-section fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.pd-form-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.pd-section .choice + .pd-form-grid { margin-top: 22px; }
.pd-section .field { min-width: 0; }
.pd-section .field input, .pd-section .field select { width: 100%; min-width: 0; }
.pd-section .field label { font-size: 11px; }
.pd-editor-loading { display: flex; gap: 12px; align-items: center; margin: 0; font-size: 13px; color: var(--muted); }
.pd-edit-price { display: grid; align-content: center; gap: 5px; padding: 10px 14px; border-radius: 12px; background: var(--pd-wash); }
.pd-edit-price span, .pd-edit-price small { font-size: 10px; color: var(--muted); }
.pd-edit-price strong { font-size: 17px; color: var(--pd-accent); }
.pd-editor-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); margin-top: 22px; padding-top: 18px; }
.pd-editor-footer > p { max-width: 430px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.pd-editor-footer > div { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-shrink: 0; }
.pd-form-error:not(:empty) { display: grid; justify-items: start; gap: 12px; padding: 13px 15px; margin-top: 18px; border-radius: 12px; background: #fff2f1; color: #a93636; font-size: 12px; line-height: 1.6; }
.pd-inline-error { margin: 13px 0 0; color: #a93636; font-size: 12px; line-height: 1.6; }
.pd-dependent-editors { display: grid; gap: 20px; }
.pd-dependent-editor { padding: 18px; border: 1px solid var(--line); border-radius: 14px; }
.pd-dependent-editor > header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.pd-dependent-editor h3 { margin: 0; font-size: 14px; }
.pd-dependent-editor > header .btn { min-height: 34px; padding: 6px 10px; font-size: 11px; }
.pd-add-dependent { margin-top: 18px; }
.pd-preview { padding: 16px; margin-top: 20px; background: var(--pd-soft); border: 1px solid var(--line); border-radius: 13px; }
.pd-preview h3 { margin: 0 0 18px; font-size: 13px; }
.pd-preview .pd-value-row + .pd-value-row { margin-top: 14px; }
.pd-preview-total { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding-top: 13px; margin-top: 16px; font-size: 13px; }
.pd-section :is(button,input,select):focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.pd-section h2:focus-visible { outline: 2px solid var(--brand); outline-offset: 5px; border-radius: 3px; }
@media (max-width:1000px) { .pd-form-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .pd-editor-footer { flex-wrap: wrap; } .pd-editor-footer > div { margin-left: auto; } }
@media (max-width:640px) { .pd-sections { grid-template-columns: minmax(0,1fr); gap: 15px; margin-top: 18px; } .pd-section { border-radius: 17px; } .pd-section-heading { padding: 16px; gap: 10px; flex-wrap: wrap; } .pd-section-heading > div { flex: 1; } .pd-section-icon { flex-basis: 35px; height: 35px; border-radius: 11px; } .pd-section-heading h2 { font-size: 15px; } .pd-eyebrow { font-size: 9px; } .pd-section-body { padding: 18px 16px; } .pd-data, .pd-form-grid { grid-template-columns: minmax(0,1fr); gap: 17px; } .pd-section--locality .pd-data { grid-template-columns: minmax(0,1fr); } .pd-plan { flex-wrap: wrap; gap: 9px; padding: 12px; } .pd-plan-price { flex-basis: 100%; text-align: left; margin: 3px 0 0 31px; } .pd-total { margin: 20px -16px -18px; padding: 19px 16px; } .pd-total > strong { font-size: 24px; } .pd-editor-footer { gap: 15px; } .pd-editor-footer > div { flex-wrap: wrap; width: 100%; } .pd-editor-footer .btn { flex: 1; min-width: 0; font-size: 11px; padding: 9px 10px; } .pd-dependent-editor { padding: 14px; } .pd-dependent-editor > header { flex-wrap: wrap; } .pd-value-row { align-items: flex-start; gap: 12px; } .pd-value-row > strong { font-size: 12px; } }
html[data-theme="dark"] .proposal-detail { --pd-surface: #182940; --pd-soft: #20334d; }
html[data-theme="dark"] .pd-section { --pd-accent: #9dbff3; --pd-wash: #203553; --pd-accent-line: #334f74; }
html[data-theme="dark"] .pd-status { color: #edcc91; border-color: #725d31; background: #3e3521; }
html[data-theme="dark"] .pd-status.is-signed { color: #a7d7bd; border-color: #3f6c53; background: #213b31; }
html[data-theme="dark"] .pd-form-error:not(:empty) { color: #ffb7ac; background: #3b2527; }
html[data-theme="dark"] .pd-inline-error { color: #ffb7ac; }

.pd-payment-people { margin-top: 22px; }
.pd-payment-people > h3 { margin: 0; font-size: 13px; }
.pd-payment-people > p { margin: 7px 0 15px; font-size: 11px; line-height: 1.6; color: var(--muted); }
.pd-payment-person { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.pd-payment-person > div { min-width: 0; }
.pd-payment-person strong { display: block; font-size: 12px; overflow-wrap: anywhere; }
.pd-payment-person small { display: block; font-size: 10px; color: var(--muted); margin-top: 3px; }
@media (max-width:640px) { .pd-payment-person { grid-template-columns: minmax(0,1fr); gap: 10px; } }