/* Client UI contract, based on /internal/brandbook/.
   8 = related elements, 16 = inner content, 24 = groups, 40 = sections.
   This sheet owns account/form styling on all viewports; marketing is untouched. */
.client-ui {
  --ui-space-1: 8px;
  --ui-space-2: 16px;
  --ui-space-3: 24px;
  --ui-space-4: 40px;
  --ui-inset: var(--ui-space-3);
  --ui-radius-card: 24px;
  --ui-radius-inner: 16px;
  --ui-radius-field: 12px;
  --ui-radius-button: 14px;
  --ui-field-height: 48px;
  --ui-button-height: 52px;
  --ui-surface-soft: #f4f7f4;
  --ui-error: #a22e2e;
}
.client-ui > main { line-height: 1.6; }
.client-ui > main :is(h1, h2, h3) { color: var(--ink); letter-spacing: -.025em; overflow-wrap: anywhere; }
.client-ui > main h1 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2; margin: var(--ui-space-1) 0 var(--ui-space-2); }
.client-ui > main h2 { font-size: 28px; line-height: 1.25; margin: 0 0 var(--ui-space-2); }
.client-ui > main h3 { font-size: 20px; line-height: 1.4; margin: 0 0 var(--ui-space-1); }
.client-ui > main p { margin: 0 0 var(--ui-space-2); overflow-wrap: anywhere; }
.client-ui :is(.cabinet-hero, .questionnaire-hero) { padding-block: var(--ui-space-4); }
.client-ui :is(.cabinet-heading, .cabinet-card-head, .documents-panel-head, .cabinet-section-title) { gap: var(--ui-space-3); align-items: center; }
.client-ui :is(.cabinet-heading, .questionnaire-hero) p { margin-bottom: 0; font-size: 16px; }
.client-ui .questionnaire-hero p + p { margin-top: var(--ui-space-2); }
.client-ui .questionnaire-hero .back-link { margin-bottom: var(--ui-space-3); }
.client-ui :is(.cabinet-section, .questionnaire-section) { padding-block: var(--ui-space-4); background: var(--paper); }
.client-ui :is(.auth-section, .dashboard-section) { padding: var(--ui-space-4) 20px; align-items: start; }
.client-ui .cabinet-workspace { gap: var(--ui-space-3); grid-template-columns: 240px minmax(0, 1fr); }
.client-ui .cabinet-main { gap: var(--ui-space-3); }
.client-ui :is(.cabinet-card, .auth-card, .dashboard-card, .purchase-panel, .cabinet-empty) {
  min-width: 0; padding: var(--ui-inset); border: 1px solid var(--line);
  border-radius: var(--ui-radius-card); background: var(--white); box-shadow: none;
}
.client-ui :is(.cabinet-card, .auth-card, .purchase-panel, .questionnaire-step-body) > :first-child { margin-top: 0; }
.client-ui :is(.cabinet-card, .auth-card, .purchase-panel, .questionnaire-step-body) > :last-child { margin-bottom: 0; }
.client-ui .cabinet-card + .cabinet-card { margin-top: var(--ui-space-3); }
.client-ui .cabinet-main > .cabinet-card + .cabinet-card { margin-top: 0; }
.client-ui :is(.cabinet-card-head, .documents-panel-head) { margin-bottom: var(--ui-space-3); }
.client-ui :is(.cabinet-card-head, .documents-panel-head) h2 { margin: var(--ui-space-1) 0 0; }
.client-ui .cabinet-card-head p { margin: var(--ui-space-2) 0 0; color: var(--ink-soft); }
.client-ui .questionnaire-overview .cabinet-card-head { align-items: center; }
.client-ui .cabinet-card-head > .button { flex-shrink: 0; }
.client-ui :is(.stat-card, .generation-support-choice, .questionnaire-review) { padding: var(--ui-space-2); border-radius: var(--ui-radius-inner); box-shadow: none; background: var(--ui-surface-soft); }
.client-ui .stat-card { min-height: 0; }
.client-ui .stat-card strong { margin-block: var(--ui-space-2); }
.client-ui .stat-card small { margin-top: var(--ui-space-1); font-size: 13px; }
.client-ui .cabinet-stats { gap: var(--ui-space-2); }
.client-ui :is(.generation-actions, .questionnaire-review, .generation-support-choice, .recommendation-review) { margin-block: var(--ui-space-3); }
.client-ui .tariff-options { gap: var(--ui-space-2); margin-top: var(--ui-space-3); }
.client-ui .tariff-options a { padding: var(--ui-space-2); border-radius: var(--ui-radius-field); gap: var(--ui-space-2); }
.client-ui .tariff-options strong { min-width: 0; overflow-wrap: anywhere; }
.client-ui .tariff-options small { flex-shrink: 0; }
.client-ui :is(.status-badge, .document-visibility) { font-weight: 650; line-height: 1.4; }
.client-ui .status-badge { padding: var(--ui-space-1) var(--ui-space-2); }
.client-ui .payment-history { margin-bottom: var(--ui-space-3); }
.client-ui .payment-history summary { padding-block: var(--ui-space-1); color: var(--green-dark); cursor: pointer; }

/* Shared actions and states. Compact record commands keep a 44px touch target. */
.client-ui > main .button {
  min-height: var(--ui-button-height); padding: 12px var(--ui-space-3); border-radius: var(--ui-radius-button);
  font-size: 15px; line-height: 1.4; font-weight: 700; white-space: normal; text-align: center;
}
.client-ui > main :is(.website-card-actions, .questionnaire-record > header, .task-picker [data-task-groups]) .button { min-height: 44px; padding: var(--ui-space-1) var(--ui-space-2); font-size: 13px; }
.client-ui > main :is(.purchase-actions, .auth-actions, .document-actions, .recommendation-navigation, .generation-support-options, .website-card-actions) { gap: var(--ui-space-2); }
.client-ui :is(.purchase-actions, .recommendation-navigation) { margin-top: var(--ui-space-3); }
.client-ui > main :is(button, input, select, textarea):disabled { opacity: .55; cursor: not-allowed; }
.client-ui > main .button:disabled { transform: none; box-shadow: none; }
.client-ui > main :is(a, button, summary):focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.client-ui > main .button:hover { transform: none; }
.client-ui :is(.form-errors, .legal-note, .questionnaire-tip, .task-requirements, .questionnaire-readiness) { margin-block: var(--ui-space-3); padding: var(--ui-space-2); border-radius: var(--ui-radius-field); font-size: 14px; line-height: 1.6; }
.client-ui :is(.legal-note, .questionnaire-tip, .questionnaire-readiness) > :last-child { margin-bottom: 0; }
.client-ui .field-error { margin: var(--ui-space-1) 0 0; font-size: 13px; color: var(--ui-error); }
.client-ui .form-errors { border: 1px solid #e6c1bd; color: var(--ui-error); background: #fff6f4; }
.client-ui .empty-state { padding: var(--ui-inset); border-radius: var(--ui-radius-inner); }
.client-ui .questionnaire-guided :is(.questionnaire-field, .record-field):is(.is-invalid, .has-server-error) { outline: 2px solid var(--ui-error); outline-offset: 4px; }

/* Sidebar and step navigation use the same spacing as forms. */
.client-ui .cabinet-sidebar { top: 122px; border-radius: var(--ui-radius-card); box-shadow: none; }
.client-ui .cabinet-sidebar-head { padding: var(--ui-space-2); gap: var(--ui-space-1); }
.client-ui .cabinet-company-picker > summary { list-style: none; cursor: pointer; }
.client-ui .cabinet-company-picker > summary::-webkit-details-marker { display: none; }
.client-ui .cabinet-company-picker > summary > span:first-child { flex: 1; }
.client-ui .company-picker-chevron { color: var(--green); }
.client-ui .cabinet-company-picker[open] .company-picker-chevron { transform: rotate(180deg); }
.client-ui .company-list { gap: var(--ui-space-1); padding: 0 var(--ui-space-1) var(--ui-space-1); }
.client-ui .company-switch { padding: var(--ui-space-2); gap: var(--ui-space-1); border-radius: var(--ui-radius-field); }
.client-ui .company-switch strong { white-space: normal; overflow-wrap: anywhere; }
.client-ui .company-switch small { font-size: 12px; }
.client-ui .sidebar-add { min-height: 48px; padding: var(--ui-space-1) var(--ui-space-2); margin: 0 var(--ui-space-1) var(--ui-space-2); }
.client-ui .cabinet-nav { display: grid; gap: var(--ui-space-1); padding: var(--ui-space-1); }
.client-ui .cabinet-nav a { min-height: 44px; padding: var(--ui-space-1) var(--ui-space-2); display: flex; align-items: center; border-radius: var(--ui-radius-field); font-size: 13px; }
.client-ui .questionnaire-nav { position: static; gap: var(--ui-space-1); padding: var(--ui-space-1); margin-bottom: var(--ui-space-3); border-radius: var(--ui-radius-card); box-shadow: none; }
.client-ui .questionnaire-nav a { padding: var(--ui-space-1); gap: var(--ui-space-1); min-height: 72px; border-radius: var(--ui-radius-inner); font-size: 12px; line-height: 1.4; }
.client-ui .questionnaire-form { gap: var(--ui-space-3); }
.client-ui .questionnaire-step { border-radius: var(--ui-radius-card); scroll-margin-top: 122px; }
.client-ui .questionnaire-step[open] { box-shadow: none; border-color: var(--line); }
.client-ui .questionnaire-step > summary { padding: var(--ui-inset); gap: var(--ui-space-2); }
.client-ui .questionnaire-step > summary strong { font-size: 20px; line-height: 1.4; }
.client-ui .questionnaire-step > summary small { font-size: 13px; }
.client-ui .questionnaire-guided .questionnaire-step-body { padding: var(--ui-inset); }
.client-ui .questionnaire-guided .questionnaire-step-body h2 { font-size: 20px; line-height: 1.4; margin: 0 0 var(--ui-space-2); }
.client-ui .questionnaire-step-actions { display: flex; flex-wrap: wrap; gap: var(--ui-space-2); margin-top: var(--ui-space-3); padding-top: var(--ui-space-3); }
.client-ui .questionnaire-step-actions .questionnaire-save { margin-left: auto; }

/* Fields: label / input / help have one vertical rhythm, with aligned grid rows. */
.client-ui :is(.form-grid, .record-grid) { gap: var(--ui-space-3); }
.client-ui .questionnaire-guided .form-grid { margin-bottom: var(--ui-space-3); gap: var(--ui-space-3); }
.client-ui :is(.form-field, .record-field, .questionnaire-field) { min-width: 0; gap: var(--ui-space-1); }
.client-ui :is(.questionnaire-field, .record-field) { margin-bottom: var(--ui-space-3); }
.client-ui .record-grid > .record-field, .client-ui .form-grid > :is(.form-field, .questionnaire-field) { margin-bottom: 0; }
.client-ui .questionnaire-guided .form-grid > .questionnaire-field { gap: var(--ui-space-1); grid-template-rows: auto auto auto; }
.client-ui :is(.form-field, .questionnaire-field, .record-field) > label { display: block; margin: 0 0 var(--ui-space-1); font-size: 14px; line-height: 1.45; font-weight: 650; }
.client-ui :is(.form-field, .record-field) > label, .client-ui .questionnaire-guided .form-grid > .questionnaire-field > label { margin-bottom: 0; }
.client-ui :is(.form-field, .questionnaire-field, .record-field) > small { display: block; margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }
@supports (grid-template-rows: subgrid) {
  /* Align neighbouring labels/controls naturally, without a fixed blank label row. */
  .client-ui .form-grid:has(> .form-field):not(:has(> :not(.form-field))) { row-gap: var(--ui-space-1); }
  .client-ui .form-grid:has(> .form-field):not(:has(> :not(.form-field))) > .form-field { display: grid; grid-row: span 3; grid-template-rows: subgrid; margin-bottom: var(--ui-space-2); }
  .client-ui .form-grid:has(> .form-field):not(:has(> :not(.form-field))) > .form-field > small { margin: 0; }
}
.client-ui > main input:not([type=checkbox]):not([type=radio]):not([type=hidden]),
.client-ui > main :is(select, textarea), .client-ui .single-select .single-select-button,
.client-ui .record-choice-picker > summary {
  box-sizing: border-box; width: 100%; max-width: 100%; min-height: var(--ui-field-height);
  padding: 11px var(--ui-space-2); border: 1px solid var(--line); border-radius: var(--ui-radius-field);
  background: var(--white); color: var(--ink); font: inherit; font-size: 16px; line-height: 1.5;
}
.client-ui > main textarea { min-height: 112px; resize: vertical; }
.client-ui .record-choice-picker > summary { padding-right: 40px; }
.client-ui > main :is(input, select, textarea):focus-visible { border-color: var(--green); outline: 3px solid rgba(31,106,88,.25); outline-offset: 2px; }
.client-ui > main input:not([type=checkbox]):not([type=radio]):not([type=hidden])[aria-invalid=true],
.client-ui > main :is(select, textarea, .single-select-button)[aria-invalid=true] { border-color: var(--ui-error); }
.client-ui .record-choice-picker:has(input:checked) > summary { background: var(--green-soft); color: var(--green-dark); }
.client-ui .questionnaire-guided label:has(input:is([type=radio], [type=checkbox])) { padding: 12px var(--ui-space-2); gap: var(--ui-space-1); min-height: var(--ui-field-height); border-radius: var(--ui-radius-field); font-size: 14px; }
.client-ui .record-choice-options, .client-ui .questionnaire-choice-options > div { gap: var(--ui-space-1); }
.client-ui .record-choice-options { padding: var(--ui-space-1); }
.client-ui .record-suggestions-toggle { height: 46px; }
.client-ui .auth-form, .client-ui .create-organization-card form { gap: var(--ui-space-3); margin-top: var(--ui-space-3); }
.client-ui .auth-form > .form-field,
.client-ui .create-organization-card form > :is(.form-field, .create-company-lookup, .create-company-details) { margin-bottom: 0; }
.client-ui :is(.auth-actions, .auth-switch) { margin-top: var(--ui-space-3); }

/* Inner cards: one inset and radius, instead of per-step special cases. */
.client-ui :is(.organization-lookup, .questionnaire-subsection, .choice-panel, .questionnaire-choice, .task-picker, .processing-settings, .people-card, .website-preset-picker, .create-company-lookup, .create-company-details, .purchase-choice) {
  padding: var(--ui-inset); border-radius: var(--ui-radius-inner); margin: 0 0 var(--ui-space-3);
}
.client-ui :is(.organization-lookup, .task-picker, .processing-settings, .people-card, .website-preset-picker, .create-company-lookup) { background: var(--ui-surface-soft); border: 1px solid var(--line); }
.client-ui :is(.processing-settings, .website-preset-picker) { margin-top: var(--ui-space-3); }
.client-ui :is(.website-card, .questionnaire-record) { margin-bottom: var(--ui-space-2); border-radius: var(--ui-radius-inner); }
.client-ui .questionnaire-record { padding: var(--ui-space-2); }
.client-ui :is(.website-card > .website-card-summary, .website-card-body) { padding: var(--ui-inset); }
.client-ui .website-card-actions { margin-bottom: var(--ui-space-3); }
.client-ui .website-functions { margin-block: var(--ui-space-3); }
.client-ui .website-tasks-heading { margin: var(--ui-space-3) 0 var(--ui-space-2); }
.client-ui .task-record { padding: 0; }
.client-ui .task-record .record-grid { padding: var(--ui-inset); gap: var(--ui-space-3); }
.client-ui :is(.people-cards, .questionnaire-preset-grid) { gap: var(--ui-space-3); }
.client-ui .people-card { margin-bottom: 0; }
.client-ui #people .people-cards { gap: var(--ui-space-3); }
.client-ui #people .people-card { padding: var(--ui-inset); border-radius: var(--ui-radius-inner); }
.client-ui #people .people-card h2 { font-size: 20px; }
.client-ui #people .people-card .form-grid,
.client-ui .questionnaire-guided .processing-settings .form-grid { column-gap: var(--ui-space-3); }
.client-ui .questionnaire-guided .processing-settings .form-grid { margin-bottom: var(--ui-space-3); }
.client-ui :is(#systems, #people, #recipients) .systems-section { padding: var(--ui-inset); margin-bottom: var(--ui-space-3); border-radius: var(--ui-radius-inner); }
.client-ui #systems .systems-stage { padding: 0; }
.client-ui #systems .systems-stage > summary { padding: var(--ui-inset); gap: var(--ui-space-2); }
.client-ui #systems .systems-stage-body { padding: 0 var(--ui-inset) var(--ui-inset); }
.client-ui :is(#systems, #people, #recipients) [data-resource-kind] { padding: 0; margin-bottom: var(--ui-space-2); }
.client-ui :is(#systems, #people, #recipients) .resource-body { padding: var(--ui-inset); }
.client-ui :is(#systems, #people, #recipients) .resource-editor > summary { padding: var(--ui-space-2) 100px var(--ui-space-2) var(--ui-space-2); }
.client-ui #processing .task-record .task-editor > summary { padding: var(--ui-space-2) 100px var(--ui-space-2) var(--ui-space-2); }
.client-ui #organization .alternate-contact { padding: 0; }
.client-ui #organization .alternate-contact > summary { padding: var(--ui-inset); }
.client-ui #organization .alternate-contact-body { padding: 0 var(--ui-inset) var(--ui-inset); }
.client-ui :is(.purchase-form, .purchase-option-grid) { gap: var(--ui-space-3); }
.client-ui .purchase-choice { margin: 0; }
.client-ui .purchase-option-body { height: 100%; gap: var(--ui-space-1); padding: var(--ui-space-2) var(--ui-space-2) var(--ui-space-2) 48px; border-radius: var(--ui-radius-inner); }
.client-ui .purchase-option:hover .purchase-option-body { transform: none; }
.client-ui .purchase-panel > .price { margin-block: var(--ui-space-3); }

/* Document lists and instructions. */
.client-ui .implementation-checklist { margin-bottom: 0; border-radius: var(--ui-radius-card); }
.client-ui .implementation-checklist > summary { padding: var(--ui-inset); gap: var(--ui-space-2); }
.client-ui .checklist-body { padding: 0 var(--ui-inset) var(--ui-inset); }
.client-ui .checklist-step { padding-block: var(--ui-space-3); gap: var(--ui-space-2); }
.client-ui .document-category-group { margin-block: var(--ui-space-2); border-radius: var(--ui-radius-inner); }
.client-ui .document-category-group > summary { padding: var(--ui-space-2); gap: var(--ui-space-2); }
.client-ui .document-category-group > summary > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.client-ui .document-category-group > summary > :is(small, .step-toggle) { flex-shrink: 0; }
.client-ui .document-table :is(th, td) { padding: var(--ui-space-2); font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.client-ui .document-table th { font-size: 12px; }
.client-ui .legal-filter { margin-block: var(--ui-space-3); gap: var(--ui-space-1); }

@media (max-width: 980px) {
  .client-ui .cabinet-workspace { grid-template-columns: minmax(0, 1fr); }
  .client-ui .cabinet-sidebar { position: static; }
  .client-ui .cabinet-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .client-ui .cabinet-nav a { justify-content: center; text-align: center; background: var(--ui-surface-soft); }
}
@media (max-width: 700px) {
  .client-ui { --ui-inset: var(--ui-space-2); }
  .client-ui :is(.cabinet-hero, .questionnaire-hero) { padding-block: var(--ui-space-3); }
  .client-ui :is(.cabinet-section, .questionnaire-section) { padding-top: var(--ui-space-3); }
  .client-ui > main h1 { font-size: 28px; }
  .client-ui > main h2 { font-size: 24px; }
  .client-ui > main h3 { font-size: 20px; }
  .client-ui :is(.cabinet-heading, .questionnaire-hero) p { font-size: 14px; }
  .client-ui .cabinet-heading { gap: var(--ui-space-2); }
  .client-ui .cabinet-heading > form { align-self: flex-start; }
  .client-ui .cabinet-heading > form .button { min-height: 44px; }
  .client-ui :is(.cabinet-card-head, .documents-panel-head) { align-items: stretch; gap: var(--ui-space-2); }
  .client-ui :is(.cabinet-card-head > .button, .document-actions, .document-actions .button) { width: 100%; }
  .client-ui .cabinet-nav a { padding-inline: var(--ui-space-1); font-size: 12px; }
  .client-ui :is(.cabinet-card p, .cabinet-card li) { font-size: 14px; }
  .client-ui .recommendation-navigation { flex-direction: column; align-items: stretch; }
  .client-ui .recommendation-navigation > a { text-align: center; padding-block: 12px; }
  .client-ui .questionnaire-nav a { min-height: 64px; font-size: 11px; }
  .client-ui .questionnaire-step { scroll-margin-top: var(--ui-space-2); }
  .client-ui .questionnaire-step > summary strong { font-size: 18px; }
  .client-ui .questionnaire-guided .questionnaire-step-body h2 { font-size: 20px; }
  .client-ui .questionnaire-guided .questionnaire-step-body p { font-size: 14px; }
  .client-ui :is(.form-grid, .record-grid),
  .client-ui .questionnaire-guided :is(#systems, #people, #recipients) .systems-protection .form-grid { grid-template-columns: minmax(0, 1fr); }
  .client-ui .questionnaire-step-actions { gap: var(--ui-space-1); }
  .client-ui .questionnaire-step-actions .button { flex: 1 1 130px; padding-inline: var(--ui-space-1); font-size: 14px; }
  .client-ui .questionnaire-step-actions .questionnaire-save { margin-left: 0; }
  .client-ui .document-table-wrap { overflow: visible; border: 0; border-radius: 0; background: transparent; }
  .client-ui .document-table { display: block; width: 100%; min-width: 0; }
  .client-ui .document-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .client-ui .document-table tbody { display: grid; }
  .client-ui .document-table tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--ui-space-2); padding: var(--ui-space-2); border-bottom: 1px solid var(--line); }
  .client-ui .document-table tr:last-child { border-bottom: 0; }
  .client-ui .document-table td { display: block; min-width: 0; width: auto; padding: 0; border: 0; font-size: 13px; white-space: normal; }
  .client-ui .document-table td:is(:first-child, :nth-child(2), :last-child) { grid-column: 1 / -1; }
  .client-ui .document-table td:first-child { font-size: 15px; }
  .client-ui .document-table td[data-label]::before { content: attr(data-label); display: block; font-size: 12px; color: var(--ink-soft); margin-bottom: var(--ui-space-1); }
  .client-ui .document-table td:last-child .download-link { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: var(--ui-space-1) var(--ui-space-2); margin: 0 var(--ui-space-1) var(--ui-space-1) 0; border: 1px solid var(--line); border-radius: var(--ui-radius-field); background: var(--green-soft); }
  .client-ui .document-table td:last-child small { display: block; }
}
@media (prefers-reduced-motion: reduce) {
  .client-ui { scroll-behavior: auto; }
  .client-ui > main *, .client-ui > main *::before, .client-ui > main *::after { transition: none !important; animation: none !important; }
}