/* Shared visual layer. Existing screen layouts, controls and business flows stay intact. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/InterVariable.woff2') format('woff2');
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ink: #202023;
  --graphite: #626269;
  --paper: #fff;
  --mist: #f7f7f8;
  --silver: #d7d7dc;
  --line: #e6e6e9;
  --coral: #b91c3d;
  --coral-deep: #971832;
  --coral-wash: #fcf0f3;
  --accent: #b91c3d;
  --radius-field: 8px;
  --radius-frame: 16px;
  --ui-action: #242427;
  --ui-action-hover: #3f3f44;
  --ui-overlay-shadow: 0 12px 36px rgb(24 24 27 / 14%);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light;
}

body, .office-app, .technician-page:not(.office-app) {
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.55;
  color: var(--ink);
  background: var(--mist);
  -webkit-font-smoothing: antialiased;
}
.office-app {
  --office-ink: var(--ink);
  --office-muted: var(--graphite);
  --office-line: var(--line);
  --office-red: var(--coral);
  font-size: 14px;
  background: var(--paper);
}
.technician-page:not(.office-app) { --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius-field: 8px; }
h1, h2, h3, .office-app h1, .office-app h2, .office-app h3 { font-family: var(--font-ui); font-weight: 600; text-wrap: balance; }
h1, .office-app h1 { font-size: 30px; line-height: 1.25; letter-spacing: -.025em; max-width: none; }
h2, .office-app h2 { font-size: 20px; line-height: 1.4; letter-spacing: -.015em; }
h3, .office-app h3 { font-size: 16px; line-height: 1.5; letter-spacing: -.01em; }
strong { font-weight: 600; }
::selection { background: #f5d5de; color: var(--ink); }
input, textarea { caret-color: var(--ink); }
* { scrollbar-color: #b4b4bb var(--mist); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { border: 2px solid var(--mist); border-radius: 8px; background: #b4b4bb; }
::-webkit-scrollbar-thumb:hover { background: #898991; }
a { text-underline-offset: 4px; }

label, .office-app label, .technician-page:not(.office-app) label { font-size: 14px; font-weight: 500; line-height: 1.45; gap: 7px; color: var(--ink); }
input, select, textarea,
.office-app input, .office-app select, .office-app textarea,
.technician-page:not(.office-app) input, .technician-page:not(.office-app) select, .technician-page:not(.office-app) textarea {
  font-family: var(--font-ui); font-size: 16px; font-weight: 400; line-height: 1.4;
  min-height: 44px; padding: 10px 12px; border: 1px solid var(--silver); border-radius: 8px;
  color: var(--ink); background-color: var(--paper); box-shadow: none;
  transition: border-color 140ms var(--ease-out), background-color 140ms var(--ease-out);
}
select, .office-app select, .technician-page:not(.office-app) select { padding-right: 36px; }
textarea, .office-app textarea { min-height: 112px; line-height: 1.6; }
input::placeholder, textarea::placeholder,
.technician-page:not(.office-app) input::placeholder, .technician-page:not(.office-app) textarea::placeholder { color: #707078; opacity: 1; }
input:hover, select:hover, textarea:hover { border-color: #acacb4; }
input:focus, select:focus, textarea:focus { border-color: #73737c; outline: 2px solid #b7b7bf; outline-offset: 2px; }
button:focus-visible, a:focus-visible, summary:focus-visible,
.office-app :focus-visible, .technician-page:not(.office-app) :focus-visible { outline: 2px solid #73737c; outline-offset: 3px; }
input[readonly], input:disabled, select:disabled, textarea:disabled { background-color: var(--mist); color: var(--graphite); cursor: default; }
input[aria-invalid=true], select[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--danger); }
input[type=checkbox], .office-app input[type=checkbox], .technician-page:not(.office-app) input[type=checkbox] { width: 20px; height: 20px; min-height: 20px; padding: 0; accent-color: var(--coral); border-radius: 4px; }
input[type=file] { padding: 8px; font-size: 16px; }
input::file-selector-button { font-family: inherit; font-weight: 500; color: var(--ink); background: var(--mist); border: 0; border-radius: 5px; margin-right: 12px; padding: 7px 10px; cursor: pointer; }

button, .button-link, .office-app button, .office-app .office-button,
.office-app .validation-actions a.button-link, .office-app .validation-actions a.button-secondary {
  font-family: var(--font-ui); font-size: 14px; font-weight: 500; line-height: 1.4;
  min-height: 44px; padding: 10px 16px; border-radius: 8px;
  background: var(--ui-action); color: #fff; border: 1px solid var(--ui-action);
  box-shadow: none; transform: none;
  transition: background-color 140ms var(--ease-out), border-color 140ms var(--ease-out), color 140ms var(--ease-out);
}
button:hover, .button-link:hover, .office-app button:hover, .office-app .office-button:hover { background: var(--ui-action-hover); border-color: var(--ui-action-hover); color: #fff; filter: none; transform: none; box-shadow: none; }
button:active { transform: none; background: #161619; }
.button-secondary, .text-button, .office-app button, .office-app .office-button,
.office-app .validation-actions a.button-link, .office-app .validation-actions a.button-secondary {
  color: var(--ink); background: var(--paper); border-color: var(--silver);
}
.button-secondary:hover, .text-button:hover, .office-app button:hover, .office-app .office-button:hover,
.office-app .validation-actions a.button-link:hover { color: var(--ink); background: var(--mist); border-color: #acacb4; }
.office-app .primary, .office-app button[type=submit], .office-app .order-edit-actions a.button-link.primary,
.office-app .validation-actions a.button-link.primary { background: var(--ui-action); border-color: var(--ui-action); color: #fff; }
.office-app .primary:hover, .office-app button[type=submit]:hover { background: var(--ui-action-hover); border-color: var(--ui-action-hover); color: #fff; }
.danger-button, .office-app .danger-button { color: var(--danger); border-color: #e6c6ca; background: #fff; }
.danger-button:hover, .office-app .danger-button:hover { background: #fff3f4; border-color: var(--danger); color: var(--danger); }
button:disabled, .office-app button:disabled { opacity: .5; cursor: not-allowed; }
.icon-button, .office-app .icon-button { width: 44px; height: 44px; min-height: 44px; flex: 0 0 44px; padding: 10px; border-radius: 8px; }
.password-eye, .office-app .password-eye { position: absolute; padding: 8px; width: 44px; height: 44px; min-height: 44px; right: 0; background: transparent; color: var(--graphite); border: 0; }
.password-eye:hover, .office-app .password-eye:hover { background: var(--mist); color: var(--ink); border: 0; }
.feedback, .office-app .feedback { font-size: 14px; line-height: 1.55; font-weight: 500; border-radius: 8px; }
.field-hint, .form-note, .validation-note { font-size: 14px; font-weight: 400; line-height: 1.6; color: var(--graphite); }
.status-pill, .status-badge, .office-app .status-badge { font-family: var(--font-ui); font-size: 12px; font-weight: 500; line-height: 1.4; min-height: 24px; border-radius: 5px; padding: 3px 8px; }
.money, .metric-value, .quote-summary dd, .order-totals dd, input[type=number] { font-variant-numeric: tabular-nums; }

/* Office: a quiet rail, white workspace, and consistent room for the task. */
.office-sidebar { width: 240px; background: #f6f6f7; }
.office-brand { padding: 24px 20px 20px; gap: 12px; }
.office-brand img { width: 120px; height: 40px; }
.office-brand span, .nav-label { font-size: 11px; font-weight: 500; color: var(--graphite); }
.office-sidebar nav { padding: 0 12px; }
.office-sidebar nav a { min-height: 42px; border-radius: 8px; margin-bottom: 3px; padding: 10px 12px; gap: 12px; font-size: 14px; font-weight: 400; color: #505057; }
.office-sidebar nav a:hover { color: var(--ink); background: #ececee; }
.office-sidebar nav a[aria-current=page] { color: var(--ink); background: #e8e8eb; box-shadow: none; font-weight: 500; }
.nav-label { padding-top: 22px; }
.nav-count { color: var(--coral-deep); background: #f3dae2; border-radius: 5px; font-weight: 500; }
.sidebar-footer { padding: 16px; }
.sidebar-footer strong { font-size: 12px; font-weight: 500; }
.sidebar-footer div > span { font-size: 12px; }
.office-avatar { color: var(--graphite); background: #e9e9ec; font-weight: 500; }
.office-topbar { margin-left: 240px; padding-inline: 36px; background: #fff; }
.topbar-location { font-size: 13px; }
.topbar-location strong { font-weight: 500; }
.office-app .office-main, .office-app .detail-shell, .office-app .catalogue-shell, .office-app .technician-shell { margin-left: 240px; max-width: 1680px; padding: 32px 36px 64px; }
.office-page-heading { margin-bottom: 28px; align-items: flex-start; }
.office-page-heading p { font-size: 14px; line-height: 1.6; }
.office-app .metric { min-height: 132px; padding: 20px; gap: 12px; border-radius: 12px; background: #fff; }
.office-app .metric:hover { background: var(--mist); border-color: #c8c8cf; }
.metric-value, .metric[data-tone] .metric-value { font-size: 30px; font-weight: 600; color: var(--ink); }
.metric-top { font-size: 13px; color: var(--graphite); }
.metric-bottom { font-size: 12px; color: var(--graphite); }
.task-symbol { border-radius: 8px; }
.task-row strong { font-size: 14px; font-weight: 500; }
.task-row small, .office-section-heading a { font-size: 13px; }
.office-table-wrap { border-radius: 12px; }
.office-app .office-table { font-size: 14px; }
.office-table th { background: #fafafa; font-size: 12px; font-weight: 500; }
.office-table th, .office-table td { padding: 14px 16px; }
.office-table tbody tr:hover { background: #f7f7f8; }
.office-table td small { font-size: 12px; }
.office-table td a { font-weight: 500; }
.office-app .office-toolbar { gap: 12px; margin-bottom: 20px; }
.office-toolbar .result-count { font-size: 13px; }
.office-app .detail-meta dt, .detail-block dt { font-size: 13px; font-weight: 400; }
.office-app .detail-meta dd, .detail-block dd { font-size: 15px; line-height: 1.6; }
.office-app .detail-header, .office-app .work-header, .office-app .catalogue-header { padding-left: 0; }
.detail-header::before, .work-header::before, .catalogue-header::before { display: none; }
.office-app .detail-header h1 { font-size: 28px; }
.office-app .back-link, .back-button { color: var(--graphite); font-size: 14px; font-weight: 500; border: 0; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; margin-bottom: 16px; padding: 0; background: transparent; }
.office-app .back-link:hover, .back-button:hover { color: var(--ink); background: transparent; text-decoration: underline; }
.office-app .dossier-header .office-avatar { color: var(--graphite); background: var(--mist); }
.dossier-tabs [role=tab] { font-weight: 500; font-size: 14px; border-bottom-width: 2px; }
.dossier-tabs [aria-selected=true] { color: var(--ink); border-bottom-color: var(--ink); }
.office-app .dossier-address h3 { font-size: 16px; }
.office-app .selected-client { padding: 20px; margin: 8px 0; border: 1px solid var(--line); border-radius: 12px; background: #fafafa; }
.selected-client dt { color: var(--graphite); font-size: 13px; }
.selected-client dd { font-size: 14px; }
.settings-categorized .settings-nav button[aria-current] { background: #eeeef0; color: var(--ink); box-shadow: none; font-weight: 500; }
.office-app .settings-nav button { border-radius: 8px; }
.office-app .settings-content h2 { font-size: 20px; }
.office-app .quote-shell h2 { font-size: 20px; }
.quote-shell #quote-form section > label + label { margin-top: 20px; }
.quote-summary dd { font-size: 22px; font-weight: 600; }

/* Floating surfaces share one elevation and preserve the existing keyboard behavior. */
.office-app dialog { border: 0; border-radius: 16px; padding: 28px; box-shadow: 0 24px 72px rgb(24 24 27 / 22%); }
.office-app dialog::backdrop { background: rgb(24 24 27 / 38%); }
.searchable-options, .address-filter-menu, .address-autocomplete-list { margin-top: 6px; border: 0; border-radius: 10px; box-shadow: var(--ui-overlay-shadow); padding: 4px; }
.office-app .searchable-options button, .searchable-options button { font-size: 14px; font-weight: 400; border-radius: 6px; color: var(--ink); }
.searchable-options button:hover, .searchable-options button.is-focused, .office-app .searchable-options button:hover { color: var(--ink); background: #f0f0f2; }
.searchable-options button[aria-selected=true] { font-weight: 600; background: #f0f0f2; }
.address-filter summary { border-radius: 8px; border-color: var(--silver); font-size: 14px; }
.address-filter-menu [data-address-choices] label { border-radius: 6px; padding: 10px 8px; }
.address-filter-menu [data-address-choices] label:hover { background: var(--mist); }

/* Field work: the same controls, with more room for fingers and phone-sized content. */
.technician-page:not(.office-app) .technician-shell { max-width: 1120px; background: var(--paper); }
.technician-page:not(.office-app) .technician-header { color: var(--ink); background: var(--paper); border-bottom: 1px solid var(--line); margin-bottom: 28px; padding-block: 20px; }
.technician-page:not(.office-app) .technician-header h1 { color: var(--ink); font-size: 22px; font-weight: 600; letter-spacing: -.02em; }
.technician-page:not(.office-app) .technician-header .brand img { height: 34px; }
.technician-page:not(.office-app) .technician-header .icon-button { color: var(--graphite); background: transparent; border: 1px solid var(--line); }
.technician-page:not(.office-app) .technician-header .icon-button:hover { background: var(--mist); }
.technician-page:not(.office-app) h2 { font-size: 23px; font-weight: 600; letter-spacing: -.02em; }
.technician-page:not(.office-app) .job-card { border-radius: 12px; border-color: var(--line); background: #fff; padding: 18px; gap: 8px; }
.technician-page:not(.office-app) .job-card:hover { background: var(--mist); border-color: #acacb4; }
.technician-page:not(.office-app) .job-card strong { font-size: 17px; font-weight: 600; }
.technician-page:not(.office-app) .job-card-number { color: var(--graphite); font-weight: 500; }
.technician-page:not(.office-app) .job-card small, .technician-page:not(.office-app) .job-card p { font-size: 14px; line-height: 1.6; }
.technician-page:not(.office-app) #tech-app > [data-action=new-order] { display: inline-flex; align-items: center; justify-content: center; width: auto; margin-bottom: 24px; }
.technician-page:not(.office-app) #tech-app > [data-action=back] { width: auto; min-height: 44px; padding-inline: 0; margin-bottom: 16px; color: var(--graphite); background: transparent; border: 0; }
.technician-page:not(.office-app) #tech-app > [data-action=back]:hover { color: var(--ink); text-decoration: underline; }
.technician-page:not(.office-app) .work-header { padding-left: 0; }
.technician-page:not(.office-app) .field-quick-nav { top: 0; gap: 4px; padding: 8px 0; }
.field-quick-nav a { text-decoration: none; border-radius: 8px; }
.field-quick-nav a:hover { background: var(--mist); color: var(--ink); }
.technician-page:not(.office-app) .compact-form { background: #fafafa; border-radius: 12px; border-color: var(--line); padding: 18px; gap: 16px; }
.product-result, .technician-page:not(.office-app) .product-result { border-radius: 8px; font-size: 14px; background: #fff; color: var(--ink); }
.product-result:hover, .technician-page:not(.office-app) .product-result:hover { background: var(--mist); color: var(--ink); border-color: #acacb4; }
.product-result strong { font-size: 16px; font-weight: 600; }
.technician-page:not(.office-app) button { font-size: 15px; font-weight: 500; }
.technician-page:not(.office-app) [data-main-address] { color: var(--ink); background: #fff; border-color: var(--silver); }
.technician-page:not(.office-app) [data-main-address]:hover { background: var(--mist); border-color: #acacb4; }
.technician-page:not(.office-app) .field-contact-actions a { color: var(--ink); border-color: var(--silver); border-radius: 8px; font-size: 14px; }
.field-section-heading p, .list-heading p, .detail-block p, .site-brief p { color: var(--graphite); font-size: 14px; line-height: 1.6; }
.field-section-heading h3, .detail-block h2, .field-section h3, .finish-section h3 { font-size: 18px; font-weight: 600; }
.field-line span, .field-line strong, .detail-lines strong { font-size: 15px; }
.field-line:has(> .bulk-selection) { grid-template-columns: 44px minmax(0, 1fr); gap: 8px; }
.field-line > .bulk-selection { grid-column: 1; grid-row: 1; justify-self: start; align-self: start; }
.field-line > .bulk-selection + div { grid-column: 2; grid-row: 1; display: grid; gap: 4px; align-self: center; }
.field-line > .line-controls { grid-column: 1 / -1; }
.field-line > details { grid-column: 1 / -1; min-width: 0; }
.finish-section > button { min-height: 48px; }
.empty-work { border-style: solid; border-color: var(--line); border-radius: 12px; background: #fafafa; }
.empty-work h2 { font-size: 20px; }
.empty-work p { font-size: 14px; }

/* Public intake and account screens retain all validation and privacy rules. */
.form-shell, .account-shell { width: min(760px, calc(100% - 48px)); min-height: 0; margin: 48px auto; padding: 36px 40px; background: var(--paper); border: 1px solid var(--line); border-radius: 16px; box-shadow: none; }
.form-shell header, .account-shell header { padding: 0 0 28px; margin-bottom: 0; border-bottom: 1px solid var(--line); }
.form-shell header::before { display: none; }
.brand { margin-bottom: 28px; gap: 12px; }
.brand img { height: 36px; }
.brand span { font-size: 11px; font-weight: 500; letter-spacing: .04em; color: var(--graphite); }
.form-shell h1, .account-shell h1 { font-size: 30px; font-weight: 600; line-height: 1.25; letter-spacing: -.025em; margin-bottom: 12px; }
.form-shell header > p, .account-shell header > p { font-size: 15px; font-weight: 400; line-height: 1.65; max-width: 65ch; color: var(--graphite); }
.form-shell form { gap: 24px; }
.form-section { gap: 20px; padding: 28px 0; }
.form-section legend { font-size: 18px; font-weight: 600; margin-bottom: 12px; }
.form-shell .check { font-size: 14px; font-weight: 400; line-height: 1.6; gap: 12px; }
.auth-page .form-shell { width: min(440px, calc(100% - 32px)); margin-block: 72px; padding: 32px; }
.auth-page #login-form { padding-top: 28px; gap: 20px; }
.auth-page .brand span { display: none; }
.account-shell { max-width: 680px; }
.account-shell header img { width: 120px; height: auto; }
.account-shell h2 { font-size: 19px; }
.account-shell section { border-color: var(--line); }
.account-shell button { background: var(--ui-action); border-color: var(--ui-action); border-radius: 8px; }
.account-shell button:hover { background: var(--ui-action-hover); border-color: var(--ui-action-hover); }
.account-shell .password-eye { background: transparent; border: 0; color: var(--graphite); }
.account-shell .password-eye:hover { background: var(--mist); color: var(--ink); }
.account-shell footer button { color: var(--graphite); background: transparent; border-color: var(--line); }
.account-shell footer button:hover { background: var(--mist); color: var(--ink); }

@media (max-width: 1199px) {
  .office-sidebar { width: 260px; }
  .office-topbar { margin-left: 0; padding-inline: 24px; }
  .office-app .office-main, .office-app .detail-shell, .office-app .catalogue-shell, .office-app .technician-shell { margin-left: 0; padding: 28px 24px 48px; }
  .office-app .nav-backdrop, .office-app .nav-backdrop:hover { background: rgb(24 24 27 / 38%); border: 0; }
}
@media (max-width: 640px) {
  h1, .office-app h1, .office-app .detail-header h1 { font-size: 25px; }
  .office-topbar { padding-inline: 12px; }
  .office-app .office-main, .office-app .detail-shell, .office-app .catalogue-shell, .office-app .technician-shell { padding: 24px 16px 40px; }
  .office-app .metric { padding: 16px; min-height: 132px; }
  .metric-top { font-size: 12px; }
  .metric-value { font-size: 28px; }
  .metric-bottom { font-size: 11px; }
  .office-app dialog { padding: 20px; border-radius: 14px; }
  .office-app .selected-client { padding: 16px; }
  .office-app .office-records th, .office-app .office-records td { padding: 8px 0; }
  .technician-page:not(.office-app) { --field-gutter: 16px; }
  .technician-page:not(.office-app) .technician-header { padding-block: 18px; gap: 16px; }
  .technician-page:not(.office-app) .technician-header h1 { font-size: 21px; }
  .technician-page:not(.office-app) .job-card { padding: 16px; }
  .technician-page:not(.office-app) #tech-app > [data-action=new-order] { width: 100%; }
  .technician-page:not(.office-app) .compact-form { padding: 16px; }
  .form-shell, .account-shell { width: 100%; margin: 0; padding: 28px 20px 40px; border: 0; border-radius: 0; min-height: 100dvh; }
  .form-shell h1, .account-shell h1 { font-size: 27px; }
  .form-shell .brand { margin-bottom: 24px; }
  .auth-page .form-shell { width: 100%; padding: 36px 24px; margin: 0; }
}
@media (prefers-reduced-motion: reduce) {
  input, select, textarea, button, .button-link { transition: none; }
}
/* Public form settings reuse the existing field styles and spacing. */
.request-form-group {margin-block: 24px;}
.request-form-group h3 {margin-block: 0 12px;}
.request-form-group details {border-block-end: 1px solid var(--line);}
.request-form-group summary {display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 0;cursor:pointer;min-height:44px;}
.request-form-group summary>svg {width:16px;height:16px;flex:none;}
.request-form-group details[open]>summary>svg {transform:rotate(180deg);}
.request-form-group summary small {margin-inline-start:auto;color:var(--graphite);font-size:12px;white-space:nowrap;}
.request-form-controls {display:grid;gap:16px;padding-block:4px 20px;}
.request-form-required {display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;}
.request-form-preview {margin-block-start:24px;}
.request-form-preview header {display:flex;align-items:center;flex-wrap:wrap;gap:16px;}
.request-form-preview header h3 {margin-inline-end:auto;}
.request-form-preview-viewport {display:flex;justify-content:center;background:var(--mist);padding:12px;border-radius:12px;}
.request-form-preview iframe {display:block;box-sizing:border-box;min-width:0;max-width:100%;width:100%;height:760px;border:1px solid var(--line);border-radius:12px;background:var(--paper);}
.request-form-preview iframe.preview-mobile {width:390px;}
.form-preview-notice {font-size:14px;color:var(--graphite);}
@media(max-width:600px){.request-form-preview-viewport{padding:0;}.request-form-required{align-items:flex-start;flex-direction:column;}.request-form-group summary{align-items:flex-start;}.request-form-group summary span{overflow-wrap:anywhere;}}

.request-form-toolbar {position:sticky;top:80px;z-index:5;background:var(--paper);padding-block:12px;border-block-end:1px solid var(--line);}
#suivi-facturation {scroll-margin-top:88px;}
.request-form-toolbar .pricing-actions {margin-block:12px 0;}
@media(max-width:640px){.request-form-toolbar{top:62px;}.request-form-toolbar .pricing-actions button{flex:1 1 auto;}.request-form-toolbar .pricing-actions a{font-size:14px;}}

.field-required {font-size:12px;font-weight:400;color:var(--graphite);}

.custom-field-settings > section { margin-block: 28px; }
.custom-field-settings header { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; margin-bottom:12px; }
.custom-field-settings details { border-block-end:1px solid var(--line); }
.custom-field-settings summary { padding:16px 4px; display:flex; flex-wrap:wrap; gap:8px; cursor:pointer; }
.custom-field-settings summary span { font-weight:600; flex:1; min-width:150px; overflow-wrap:anywhere; }
.custom-field-settings summary small { color:var(--graphite); }
.custom-answers dl,.custom-client-values dl { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr)); gap:16px; }
.custom-answers dt,.custom-client-values dt { font-weight:600; }
.custom-answers dd,.custom-client-values dd { margin:4px 0 0; overflow-wrap:anywhere; white-space:pre-wrap; }
.custom-questions h2 { margin-block:24px 12px; font-size:1.15rem; }
[data-client-custom] .custom-client-values h3 { margin-top:24px; }
.custom-field-settings summary svg { width:16px; height:16px; flex:none; color:var(--graphite); }

/* Private work photos remain separate from client documents. */
.work-photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(180px,100%),1fr));gap:16px;margin-block:16px;}
.work-photo-grid figure{margin:0;min-width:0;}
.work-photo-grid img{width:100%;height:160px;object-fit:cover;border-radius:8px;}
.work-photo-grid figcaption{overflow-wrap:anywhere;margin-block:8px;}
.work-photos form{display:grid;gap:12px;}
.work-photos input[type=file]{max-width:100%;min-height:44px;}
.work-photos button{min-height:44px;}
.creation-fees{margin-block:16px;}