.mobile-order-screen { --order-viewport-height: 100dvh; --order-viewport-top: 0px; }
.mobile-order-header, .mobile-order-launch { display: none; }
@media (max-width: 600px), (max-width: 950px) and (max-height: 500px) {
  [data-mobile-order-ready] .mobile-order-launch { display: grid; gap: 12px; margin: 22px 0; }
  .mobile-order-launch button { width: 100%; min-height: 48px; }
  .mobile-order-launch p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
  [data-mobile-order-ready] .mobile-order-screen:not([data-order-open]) { display: none; }
  body[data-mobile-order-open] { overflow: hidden; }
  body[data-mobile-order-open] [data-order-background] { visibility: hidden; }
  .mobile-order-screen[data-order-open] {
    position: fixed; z-index: 50; inset: var(--order-viewport-top) 0 auto;
    height: var(--order-viewport-height); width: 100%; min-width: 0;
    display: flex; flex-direction: column; overflow: clip;
    background: var(--canvas, var(--cream)); color: var(--ink, var(--navy));
    text-align: left;
  }
  [data-order-open] .mobile-order-header {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    flex: none; padding: max(6px, env(safe-area-inset-top)) 16px 6px;
    border-bottom: 1px solid var(--line); background: var(--surface);
  }
  .mobile-order-header h2 { margin: 0; font-size: 16px; line-height: 1.3; letter-spacing: normal; }
  .mobile-order-header button {
    min-height: 44px; flex: none; border: 1px solid var(--line); border-radius: 8px;
    padding: 8px 12px; background: var(--surface); color: inherit; font-size: 14px; cursor: pointer;
  }
  [data-order-open] .mobile-order-body {
    min-height: 0; flex: 1; overflow-y: auto; overscroll-behavior-y: contain;
    padding-bottom: max(16px, env(safe-area-inset-bottom)); scroll-behavior: auto;
    scroll-padding: 12px; overflow-anchor: none; -webkit-overflow-scrolling: touch;
  }
  [data-order-open] :is(h2, h3, [tabindex="-1"]) { scroll-margin-block: 12px; }
  [data-order-open] input, [data-order-open] textarea, [data-order-open] select { font-size: 16px; }
  [data-order-editing] :is(.stepper, .session-bar) { display: none; }
  [data-order-open] .entry-choice > p { display: none; }
  [data-order-open] [data-assisted-intake] .stepper { display: none; }
  [data-order-open] .chat-actions { display: none; }
  [data-order-open] .composer textarea { min-height: 48px; }
  [data-order-editing] .workspace-toolbar :is(.steps, .optional-files) { display: none; }
}

/* Locally served Inter matches the energy certificate page. */
@font-face { font-family: Inter; font-style: normal; font-weight: 400; font-display: swap; src: url('./inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 500; font-display: swap; src: url('./inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 600; font-display: swap; src: url('./inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family: Inter; font-style: normal; font-weight: 700; font-display: swap; src: url('./inter-latin-700-normal.woff2') format('woff2'); }

/* EKinfo brand and shared control scale. */
:root {
  --ink: #0c1c33;
  --muted: #596579;
  --canvas: #f8f6f1;
  --surface: #fffefd;
  --line: #d9d8d3;
  --control-line: #b9c0ca;
  --accent: #0c1c33;
  --accent-hover: #172a46;
  --accent-ink: #fff;
  --gold: #bd8b2b;
  --wash: #f0eee8;
  --focus: #2b6de5;
  --danger: #a12928;
  --success: #246640;
  --radius: 16px;
  --control-radius: 10px;
  --small-radius: 8px;
  --content-width: 792px;
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  color: var(--ink);
  background: var(--canvas);
  color-scheme: light;
}

/* Base and accessibility. */
* { box-sizing: border-box; }
body { margin: 0; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a, input, select, summary { touch-action: manipulation; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
[hidden] { display: none !important; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { word-break: normal; overflow-wrap: normal; }
a { color: var(--ink); text-underline-offset: 3px; }
p + p { margin-top: 12px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
h1[tabindex="-1"]:focus, h2[tabindex="-1"]:focus { outline: none; }
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link { position: fixed; top: 8px; left: 8px; padding: 12px; background: var(--surface); z-index: 100; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.honeypot { position: absolute; left: -10000px; height: 1px; overflow: hidden; }

/* The mark and wordmark follow the energy certificate page. */
.site-header {
  max-width: 1440px;
  min-height: 82px;
  margin: auto;
  padding: 14px clamp(22px, 5vw, 72px);
  display: flex;
  align-items: center;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}
.brand { display: inline-flex; align-items: center; gap: 12px; margin-right: auto; text-decoration: none; }
.brand img { width: 48px; height: 48px; flex: none; }
.brand span { display: grid; gap: 2px; }
.brand strong { font-size: 19px; font-weight: 700; line-height: 1.1; }
.brand small { font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: #805b19; }
.site-nav { display: flex; align-items: center; gap: 24px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 600; text-decoration: none; }
.site-nav a:hover { color: var(--gold); }
.site-nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 7px; }
.display-mode-control { display: flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; white-space: nowrap; }
.display-mode-select { width: auto; min-height: 44px; padding: 8px 4px; border: 1px solid transparent; border-radius: var(--small-radius); background: transparent; font-size: inherit; }
.display-mode-select:hover { border-color: var(--line); }
.mobile-nav { display: none; position: relative; }
.mobile-nav > summary { display: flex; align-items: center; justify-content: center; min-height: 44px; list-style: none; border: 1px solid var(--line); border-radius: var(--control-radius); padding: 10px 14px; font-size: 14px; font-weight: 600; cursor: pointer; }
.mobile-nav > summary::-webkit-details-marker { display: none; }
.mobile-nav nav { position: absolute; z-index: 20; right: 0; top: calc(100% + 10px); display: grid; gap: 4px; width: min(270px, calc(100vw - 36px)); max-height: calc(100dvh - 110px); overflow-y: auto; overscroll-behavior: contain; padding: 12px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--surface); box-shadow: 0 8px 24px #0c1c3314; }
.mobile-nav nav a { display: flex; align-items: center; min-height: 44px; padding: 10px 8px; font-size: 16px; font-weight: 600; text-decoration: none; }
.mobile-nav .display-mode-control { justify-content: space-between; font-size: 16px; padding: 8px; border-top: 1px solid var(--line); }
.mobile-nav .display-mode-select { font-size: 16px; font-weight: 600; }

/* One working column throughout entry, editing, checkout and receipt. */
main { max-width: 1040px; margin: auto; padding: 40px 32px 32px; }
.page-intro { max-width: 720px; margin: 0 auto 28px; }
.page-intro h1 { font-size: clamp(40px, 4.2vw, 54px); letter-spacing: -.035em; font-weight: 700; line-height: 1.1; }
.page-intro p { margin-top: 16px; max-width: 670px; font-size: 17px; line-height: 1.55; color: var(--muted); }
.workspace { max-width: var(--content-width); margin-inline: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow: hidden; scroll-margin-top: 22px; }
.entry-view, .stage, .chat-panel, .receipt-view, .contact-view, .orders-view { max-width: var(--content-width); margin: auto; padding: 28px 36px 32px; }
.stage h2, .receipt-view h2, .contact-view h2 { scroll-margin-top: 24px; }
.stage h2, .contact-view h2, .receipt-view h2 { font-size: 28px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; margin-bottom: 24px; }
.field-hint { font-size: 14px; line-height: 1.5; color: var(--muted); }
.inline-actions { display: flex; align-items: center; gap: 8px 24px; flex-wrap: wrap; margin-top: 12px; }
.notice { padding: 14px 24px; border-bottom: 1px solid var(--line); font-size: 15px; line-height: 1.5; background: var(--wash); overflow-wrap: anywhere; }
.notice.error { color: var(--danger); }
.notice.success { color: var(--success); }
.import-recovery { padding: 16px 24px; border-bottom: 1px solid var(--line); }

/* Consistent inputs and one primary action. */
.primary { border: 1px solid var(--accent); border-radius: var(--control-radius); min-height: 48px; padding: 12px 20px; background: var(--accent); color: var(--accent-ink); font-weight: 600; font-size: 16px; line-height: 1.4; display: inline-flex; align-items: center; justify-content: center; gap: 12px; }
.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.text-button { border: 0; background: transparent; padding: 10px 0; min-height: 44px; color: var(--ink); font-weight: 500; font-size: 14px; line-height: 1.45; text-decoration: underline; text-underline-offset: 4px; text-align: left; }
.text-button:hover:not(:disabled) { color: var(--muted); }
input:not([type=checkbox]):not([type=radio]), textarea, select { border: 1px solid var(--control-line); background: var(--surface); border-radius: var(--control-radius); padding: 12px 14px; min-height: 50px; width: 100%; font-size: 16px; line-height: 1.45; }
input:not([type=checkbox]):not([type=radio]):hover, textarea:hover, select:hover { border-color: var(--muted); }
textarea { resize: vertical; }
input[aria-invalid=true], textarea[aria-invalid=true], select[aria-invalid=true] { border-color: var(--danger); }
input[type=checkbox], input[type=radio] { accent-color: var(--accent); }

/* Public choice, price and email-code entry. */
.public-guide { margin-bottom: 20px; }
.public-guide > label, .entry-form > label { display: block; font-size: 16px; font-weight: 600; margin-bottom: 8px; }
.entry-price { display: flex; align-items: baseline; gap: 8px 16px; flex-wrap: wrap; padding-bottom: 12px; font-size: 14px; color: var(--muted); }
.entry-price strong { font-size: 32px; line-height: 1.15; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.entry-price span:last-child { margin-left: auto; }
.entry-form { margin-top: 24px; }
.entry-controls { display: flex; gap: 10px; }
.entry-controls input { flex: 1; min-width: 0; }
.entry-controls button { flex: none; }
.entry-form > .field-hint { margin-top: 10px; }
#code-destination { font-size: 14px; line-height: 1.5; margin-bottom: 16px; overflow-wrap: anywhere; }
.contact-entry { margin-top: 16px; }
.resume-entry { margin-left: 24px; }
.entry-secondary { display: flex; gap: 8px 24px; flex-wrap: wrap; margin-top: 16px; }
.entry-secondary .text-button { margin: 0; }
.company-order-entry { margin-top: 12px; font-size: 14px; }
.company-order-entry > summary { padding: 12px 0; cursor: pointer; text-decoration: underline; }

/* Account controls stay separate from task and editing mode. */
.session-bar { display: flex; align-items: center; gap: 16px; padding: 10px 24px; border-bottom: 1px solid var(--line); }
.draft-select { flex: 1; max-width: 430px; min-width: 0; }
.draft-select select { min-height: 44px; font-size: 14px; padding: 9px 12px; border-color: transparent; background: transparent; }
.draft-select select:hover { border-color: var(--line); }
.session-bar > .text-button { white-space: nowrap; }
.session-bar a.text-button { display: inline-flex; align-items: center; text-decoration: none; }
.session-bar.orders-session .draft-select { display: none; }
.session-bar.orders-session #orders-link { margin-right: auto; }
.orders-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 20px; margin-bottom: 24px; }
.orders-toolbar .field-hint { flex: 1; margin: 0; }
.orders-toolbar > button { flex-shrink: 0; }
.order-group + .order-group { margin-top: 32px; }
.order-group h2 { margin: 0 0 4px; font-size: 20px; font-weight: 600; letter-spacing: -.02em; }
.order-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); }
.order-row-info { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.order-row h3 { margin: 0 0 6px; font-size: 16px; font-weight: 600; line-height: 1.4; }
.order-meta { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.6; }
.order-price { margin: 8px 0 0; font-size: 16px; font-weight: 600; }
.order-payment { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.order-row .field-hint { margin: 8px 0 0; }
.order-row-actions { display: flex; flex-direction: column; align-items: stretch; flex-shrink: 0; gap: 4px; }
.order-open { min-height: 44px; padding: 10px 16px; border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); background: var(--surface); font-size: 14px; font-weight: 600; }
.order-open:hover { border-color: var(--ink); }
.order-remove { font-size: 13px; }
#orders-more { margin-top: 20px; }
#orders-empty { margin: 32px 0; color: var(--muted); }
#orders-feedback[role="alert"] { color: var(--danger); }
.account-menu { position: relative; margin-left: auto; }
.account-menu summary { display: flex; align-items: center; cursor: pointer; min-height: 44px; font-size: 14px; padding: 8px; list-style: none; }
.account-menu summary::-webkit-details-marker { display: none; }
.account-panel { position: absolute; z-index: 15; top: calc(100% + 6px); right: 0; min-width: 230px; max-width: calc(100vw - 40px); padding: 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--control-radius); box-shadow: 0 8px 24px #0c1c3314; }
.account-panel p { font-size: 14px; line-height: 1.5; overflow-wrap: anywhere; }
.workspace-toolbar { max-width: var(--content-width); margin: auto; padding: 16px 36px 0; display: flex; align-items: center; gap: 16px; }
.steps { display: flex; align-items: center; gap: 20px; }
.steps button { display: flex; align-items: center; gap: 8px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: var(--muted); font-size: 14px; padding: 10px 0 8px; min-height: 44px; }
.steps button[aria-current] { color: var(--ink); font-weight: 600; border-bottom-color: var(--ink); }
.optional-files { margin-left: auto; font-size: 14px; white-space: nowrap; color: var(--muted); }
.optional-files span { font-size: 12px; }
.optional-files[aria-current] { color: var(--ink); font-weight: 600; }
.mode-tabs { display: flex; background: var(--wash); border-radius: var(--control-radius); padding: 3px; flex: none; }
.mode-tabs button { border: 0; background: transparent; border-radius: var(--small-radius); font-size: 14px; padding: 10px 14px; min-height: 44px; }
.mode-tabs button[aria-selected=true] { background: var(--surface); box-shadow: 0 1px 3px #0c1c3314; font-weight: 600; }
.mode-choice { padding: 24px 36px 32px; }
.mode-choice h2 { margin-bottom: 12px; font-size: 24px; }
.mode-choice p { margin-bottom: 20px; line-height: 1.5; }
.mode-choice-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.mode-choice-actions button { flex: 1; min-height: 48px; }

/* Building and customer fields. */
.field { margin-bottom: 20px; min-width: 0; }
.field > label { display: block; font-size: 15px; font-weight: 600; line-height: 1.45; margin-bottom: 8px; }
.field-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.building { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.building:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.building-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.building-heading h3 { font-size: 18px; font-weight: 600; }
.building:only-child > .building-heading { display: none; }
.fact-question { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.fact-question legend { font-size: 15px; font-weight: 600; line-height: 1.45; padding: 0; margin-bottom: 8px; }
.choices { display: flex; flex-wrap: wrap; gap: 8px; }
.choices label { font-size: 14px; line-height: 1.4; min-height: 44px; display: flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid var(--control-line); border-radius: var(--small-radius); cursor: pointer; }
.choices label:has(input:checked) { border-color: var(--accent); background: var(--wash); }
.choices label:has(input:focus-visible), .customer-type label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
.choices input { margin: 0; flex: none; }
.fact-question .field-hint { margin-top: 8px; }
.fact-details { border-bottom: 1px solid var(--line); }
.fact-details > summary { display: flex; gap: 16px; justify-content: space-between; align-items: center; list-style: none; cursor: pointer; font-size: 15px; line-height: 1.45; min-height: 50px; padding: 12px 0; }
.fact-details > summary::-webkit-details-marker { display: none; }
.fact-details > summary:focus-visible { outline-offset: 0; }
.fact-answer { font-size: 13px; color: var(--muted); flex: none; }
.fact-details .fact-question { padding: 4px 0 16px; margin: 0; }
.building-areas { margin-top: 24px; }
.building:has(select[data-building-field=building_type] option[value=unknown]:checked) .fact-details,
.building:has(select[data-building-field=building_type] option[value=unknown]:checked) .building-areas { display: none; }
.cooling-fields { padding: 16px 0 0; }
.cooling-fields .field-hint { margin-top: 8px; }
.area-help { font-size: 14px; line-height: 1.5; margin: -4px 0 16px; color: var(--muted); }
.area-help summary { display: flex; align-items: center; min-height: 44px; cursor: pointer; color: var(--ink); }
.area-help p { margin-top: 8px; }
.customer-type { margin: 24px 0; border: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; min-width: 0; }
.customer-type legend { font-size: 15px; font-weight: 600; margin-bottom: 8px; }
.customer-type label { min-height: 48px; padding: 12px 14px; border: 1px solid var(--control-line); border-radius: var(--small-radius); font-size: 15px; line-height: 1.4; display: flex; align-items: center; gap: 10px; cursor: pointer; }
.customer-type label:has(input:checked) { border-color: var(--accent); background: var(--wash); }
.customer-type input { margin: 0; flex: none; }
.check-row { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 8px 0; font-size: 14px; line-height: 1.5; margin: 8px 0; cursor: pointer; }
.check-row input { width: 18px; height: 18px; flex: none; margin: 2px 0 0; }
.check-row small { display: block; color: var(--muted); font-size: 13px; margin-top: 4px; }
.review-group { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--line); }
.review-group > .customer-type:first-child { margin-top: 0; }
.review-group h3 { font-size: 18px; font-weight: 600; line-height: 1.35; margin-bottom: 18px; }
.order-consents { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); }
.stage-actions { border-top: 1px solid var(--line); padding-top: 24px; margin-top: 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.order-submit { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.order-total { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.inline-note { font-size: 15px; padding: 16px; border-left: 3px solid var(--accent); background: var(--wash); line-height: 1.5; margin: 20px 0; overflow-wrap: anywhere; }
.inline-note ul { margin: 8px 0; padding-left: 20px; }
.inline-note .text-button { margin-top: 4px; }
.compact-details { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin: 8px 0 20px; }
.compact-details summary { display: flex; align-items: center; min-height: 48px; font-size: 14px; font-weight: 500; line-height: 1.45; padding: 12px 0; cursor: pointer; }
.compact-details > .field-hint { margin: 0 0 16px; }
.compact-details label { display: block; margin: 12px 0 8px; }
.compact-details textarea { margin-bottom: 16px; }
.compact-details .check-row { display: flex; margin: 0 0 12px; }

/* Files are an optional task; all transfer states retain their controls. */
.drop-zone { position: relative; border: 1px dashed #8c96a4; border-radius: var(--control-radius); background: var(--canvas); min-height: 158px; display: grid; place-items: center; margin-bottom: 16px; }
.drop-zone.dragging { background: var(--wash); border-color: var(--accent); }
.drop-zone label { display: grid; gap: 8px; place-items: center; padding: 24px; text-align: center; cursor: pointer; width: 100%; font-size: 14px; line-height: 1.5; }
.drop-zone label strong { font-size: 16px; font-weight: 600; }
.upload-icon { font-size: 28px; line-height: 1; margin-bottom: 4px; color: var(--muted); }
.drop-zone input { position: absolute; width: 1px !important; height: 1px !important; opacity: 0; padding: 0 !important; border: 0 !important; min-height: 0 !important; }
.drop-zone:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.file-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.file-list li { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); min-width: 0; font-size: 14px; line-height: 1.5; }
.file-list a { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.file-list small { color: var(--muted); font-size: 12px; white-space: nowrap; }
.file-list button { font-size: 13px; flex: none; }
.file-list:not(:empty) { margin-bottom: 16px; }
.file-list li.upload-failed { display: block; padding: 12px 0; }
.file-list .upload-failed > span { display: block; overflow-wrap: anywhere; }
.file-list .upload-failed small { display: block; white-space: normal; hyphens: auto; margin-top: 4px; }
.upload-failed .inline-actions { margin-top: 4px; }
#file-feedback { overflow-wrap: anywhere; }
#file-feedback:not(:empty) { margin: 12px 0 20px; }
#receipt-upload-slot { margin-top: 16px; }

/* Checkout and order receipt share the same summary hierarchy. */
.order-summary { margin-bottom: 24px; padding: 20px; border: 1px solid var(--line); border-radius: var(--control-radius); background: var(--canvas); }
.order-summary dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px 20px; font-size: 15px; line-height: 1.45; }
.order-summary dt { min-width: 0; }
.order-summary dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.order-summary .total-label, .order-summary .total-value { font-weight: 600; border-top: 1px solid var(--line); padding-top: 16px; margin-top: 4px; }
.order-summary .total-value { font-size: 28px; line-height: 1.1; }
.order-summary p { font-size: 15px; line-height: 1.5; margin-bottom: 16px; overflow-wrap: anywhere; }
.order-summary .summary-caption { color: var(--muted); font-size: 13px; margin-top: 12px; margin-bottom: 0; }
.receipt-mark { display: grid; place-items: center; height: 40px; width: 40px; background: #eaf3ed; color: var(--success); border-radius: 50%; font-size: 22px; margin-bottom: 20px; }
.receipt-view .reference { font: 14px ui-monospace, monospace; color: var(--muted); margin-bottom: 16px; }
.receipt-view > p { font-size: 16px; line-height: 1.6; }
.receipt-view .order-summary { margin-top: 24px; }
.panel-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.contact-view #contact-context:not(:empty) { margin: 0 0 24px; }
.contact-view #contact-receipt { font-size: 16px; line-height: 1.6; }
.noscript-note { padding: 20px; font-size: 15px; line-height: 1.5; }

/* Chat: its height and textarea height remain controlled by viewport logic. */
.chat-panel { display: flex; flex-direction: column; height: clamp(440px, 70dvh, 760px); gap: 12px; padding-top: 24px; }
.messages { display: flex; flex-direction: column; gap: 16px; flex: 1; min-height: 0; max-height: none; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: 0 4px 8px; }
.chat-thread { display: flex; flex-direction: column; gap: 20px; flex-shrink: 0; }
.chat-thread:empty { display: none; }
.chat-question { flex-shrink: 0; display: grid; gap: 12px; }
.chat-question:focus, .chat-collected:focus { outline: none; }
.chat-area-form { display: grid; gap: 8px; }
.chat-area-form label { font-size: 14px; font-weight: 600; }
.chat-area-controls { display: flex; align-items: center; gap: 12px; }
.chat-area-controls input { flex: 1; min-width: 0; }
.chat-area-form .field-hint { margin: 0; }
/* While entering an area, reserve the keyboard viewport for that answer. */
.chat-panel[data-area-editing] .composer,
.chat-panel[data-area-editing] .chat-actions { display: none; }
.message { font-size: 16px; line-height: 1.55; white-space: pre-wrap; max-width: 95%; overflow-wrap: anywhere; }
.message.user { align-self: flex-end; border-radius: var(--control-radius); background: var(--wash); padding: 12px 16px; }
.message.assistant { align-self: flex-start; }
.message .message-label { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-bottom: 4px; }
.current-question { margin-bottom: 0; }
.composer { display: flex; align-items: flex-end; gap: 12px; flex-shrink: 0; border: 1px solid var(--control-line); border-radius: var(--control-radius); padding: 10px; background: var(--surface); }
.composer:focus-within { border-color: var(--focus); }
.composer:has(textarea:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.composer textarea { flex: 1; min-width: 0; border: 0; border-radius: 0; padding: 4px; min-height: 72px; max-height: 240px; resize: none; font-size: 16px; background: transparent; }
.composer textarea:focus-visible { outline: none; }
.composer .primary { padding: 10px 18px; min-height: 44px; font-size: 14px; }
.chat-actions { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-shrink: 0; min-height: 44px; }
.chat-feedback { display: flex; align-items: center; gap: 8px 16px; flex-wrap: wrap; flex-shrink: 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.chat-feedback.error { color: var(--danger); }
.chat-feedback .text-button { padding: 8px 0; }
.chat-new-reply { align-self: center; padding: 8px 12px; min-height: 44px; }
.chat-options { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.chat-option { font: inherit; font-size: 14px; line-height: 1.45; min-height: 44px; padding: 10px 14px; background: var(--surface); color: var(--ink); border: 1px solid var(--control-line); border-radius: var(--small-radius); cursor: pointer; }
.chat-option:hover:not(:disabled) { border-color: var(--accent); background: var(--wash); }
.chat-collected { flex-shrink: 0; margin-top: 8px; padding-top: 20px; border-top: 1px solid var(--line); }
.chat-collected h3 { font-size: 18px; font-weight: 600; line-height: 1.4; margin-bottom: 16px; }
.chat-review-action { flex-shrink: 0; width: 100%; }
.chat-collected > .field-hint { font-size: 13px; }
.chat-facts { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 20px; font-size: 14px; line-height: 1.5; margin: 0 0 12px; }
.chat-facts dd { margin: 0; overflow-wrap: anywhere; }
.legacy-chat-facts { white-space: normal; font-size: 13px; line-height: 1.5; color: var(--muted); }
.legacy-chat-facts summary { cursor: pointer; display: flex; align-items: center; min-height: 44px; padding: 8px 0; }
.proposal-list { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 8px; }
.proposal-list li { padding: 12px; border: 1px solid var(--line); border-radius: var(--small-radius); font-size: 14px; }
.proposal-list .proposal-value { display: block; font-weight: 600; margin-bottom: 4px; }
.proposal-list small { display: block; color: var(--muted); font-size: 12px; line-height: 1.5; white-space: normal; }
.proposal-list button { font-size: 13px; padding: 8px 0; }
.proposal-list li.applied { opacity: .65; }

/* Supporting facts, legal documents and dialogs. */
.service-details { max-width: var(--content-width); margin: 24px auto 12px; padding: 0 36px; }
.service-details > details { border-bottom: 1px solid var(--line); }
.service-details > details > summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 16px; font-size: 14px; font-weight: 500; line-height: 1.45; min-height: 50px; padding: 12px 0; cursor: pointer; }
.service-details > details > summary::-webkit-details-marker { display: none; }
.service-details > details > summary::after { content: "+"; flex: none; font-size: 20px; font-weight: 400; }
.service-details > details[open] > summary::after { content: "−"; }
.details-body { padding: 4px 0 24px; font-size: 15px; line-height: 1.65; }
.details-body ul { margin: 0 0 16px; padding-left: 22px; }
.details-body li { margin: 4px 0; }
.details-body .field-hint { margin-top: 16px; }
.details-body h3 { font-size: 16px; font-weight: 600; margin: 24px 0 12px; }
.company-order-controls { margin-top: 20px; }
.company-order-controls > label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.company-order-controls .field-hint:empty { margin: 0; }
.price-list { width: 100%; border-collapse: collapse; margin: 4px 0 16px; }
.price-list th { text-align: left; font-weight: 400; }
.price-list th, .price-list td { padding: 6px 0; vertical-align: top; }
.price-list thead th { color: var(--muted); font-size: 13px; }
.price-list td, .price-list thead th:not(:first-child) { padding-left: 12px; text-align: right; white-space: nowrap; }
.price-list td { font-weight: 600; font-variant-numeric: tabular-nums; }
.withdrawal-model { white-space: pre-wrap; overflow-wrap: anywhere; }
.withdrawal-template { margin-top: 20px; border-top: 1px solid var(--line); }
.withdrawal-template > summary { display: flex; align-items: center; min-height: 48px; padding: 12px 0; cursor: pointer; font-weight: 600; }
.withdrawal-template .details-body { padding-bottom: 4px; }
.site-footer { max-width: 1040px; margin: auto; padding: 0 32px 28px; display: flex; gap: 12px 24px; flex-wrap: wrap; font-size: 13px; line-height: 1.5; color: var(--muted); }
.site-footer a { color: var(--muted); }
dialog { width: min(600px, calc(100vw - 32px)); max-height: 90dvh; padding: 28px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--ink); }
dialog::backdrop { background: #0c1c3366; }
dialog h2 { font-size: 24px; font-weight: 600; letter-spacing: -.025em; line-height: 1.2; }
dialog p { font-size: 15px; line-height: 1.6; margin: 16px 0 20px; }
dialog label { display: block; font-size: 14px; margin-bottom: 8px; }
dialog .stage-actions { margin-top: 24px; }

/* Clear mode uses the certificate page's contrast and flatter surfaces. */
:root[data-display-mode=clear] {
  --canvas: #fff;
  --surface: #fff;
  --ink: #111;
  --muted: #505050;
  --line: #757575;
  --control-line: #757575;
  --accent: #111;
  --accent-hover: #111;
  --accent-ink: #fff;
  --gold: #505050;
  --wash: #f3f3f3;
  --focus: #0756ad;
  --danger: #a51d24;
  --success: #176537;
  --radius: 3px;
  --control-radius: 3px;
  --small-radius: 3px;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
:root[data-display-mode=clear] .brand img { display: none; }
:root[data-display-mode=clear] .brand small { letter-spacing: .04em; color: var(--muted); }
:root[data-display-mode=clear] .brand strong { font-weight: 650; }
:root[data-display-mode=clear] .entry-price strong,
:root[data-display-mode=clear] .total-value,
:root[data-display-mode=clear] .reference { font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; }
:root[data-display-mode=clear] .mode-tabs button,
:root[data-display-mode=clear] .account-panel,
:root[data-display-mode=clear] .mobile-nav nav { box-shadow: none; }
:root[data-display-mode=clear] .receipt-mark { border: 1px solid var(--success); border-radius: var(--small-radius); background: var(--surface); }
:root[data-display-mode=clear] .primary:hover:not(:disabled) { text-decoration: underline; text-underline-offset: 3px; }

@media (prefers-color-scheme: dark) {
  :root[data-display-mode=clear] {
    color-scheme: dark;
    --canvas: #000;
    --surface: #000;
    --ink: #fff;
    --muted: #c4c4c4;
    --line: #858585;
    --control-line: #858585;
    --accent: #fff;
    --accent-hover: #fff;
    --accent-ink: #000;
    --gold: #c4c4c4;
    --wash: #171717;
    --danger: #ff9ca1;
    --success: #8edba6;
    --focus: #91c5ff;
  }
}

/* Tablet keeps a single task column rather than squeezing its controls. */
@media (max-width: 800px) {
  .site-nav { display: none; }
  .mobile-nav { display: block; }
  main { padding: 32px 24px 28px; }
  .page-intro h1 { font-size: 48px; }
  .workspace-toolbar { flex-wrap: wrap; gap: 12px 20px; }
  .stage h2, .contact-view h2, .receipt-view h2 { font-size: 26px; }
  .site-footer { padding-inline: 24px; }
}

@media (max-width: 768px) {
  .site-header { padding: 10px 18px; gap: 12px; min-height: 68px; }
  .brand img { width: 40px; height: 40px; }
  .brand strong { font-size: 16px; }
  .brand small { font-size: 9px; }
}

/* Phone targets remain at least 44px; only the working chat owns viewport height. */
@media (max-width: 560px) {
  main { padding: 24px 16px; }
  .page-intro { margin-bottom: 24px; }
  .page-intro h1 { font-size: 38px; line-height: 1.1; }
  .page-intro p { font-size: 16px; line-height: 1.5; margin-top: 12px; }
  .entry-view, .stage, .receipt-view, .contact-view, .orders-view { padding: 24px 20px; }
  .orders-toolbar { gap: 12px; flex-wrap: wrap; }
  .orders-toolbar .field-hint { flex-basis: 100%; }
  .order-row { align-items: flex-start; flex-direction: column; gap: 12px; }
  .order-row-actions { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; }
  .entry-price { gap: 6px 12px; }
  .entry-price > span:first-child { flex-basis: 100%; }
  .entry-price span:last-child { font-size: 13px; margin-left: 0; }
  .entry-controls { flex-direction: column; }
  .entry-controls .primary { width: 100%; }
  .entry-controls input { flex: auto; }
  .entry-form { margin-top: 20px; }
  .resume-entry { margin-left: 16px; }
  .session-bar { padding: 8px 16px; gap: 12px; }
  .import-recovery { padding: 16px 20px; }
  .import-recovery .primary { width: 100%; }
  .session-bar > .text-button, .draft-select select { font-size: 13px; }
  .draft-select select { padding-inline: 0; }
  .account-menu summary { padding-inline: 0; }
  .workspace-toolbar { padding: 12px 20px 0; gap: 8px 16px; }
  .steps { gap: 20px; }
  .optional-files { font-size: 13px; }
  .optional-files span { font-size: 12px; }
  .mode-tabs { width: 100%; }
  .mode-tabs button { flex: 1; }
  .stage h2, .contact-view h2, .receipt-view h2 { font-size: 24px; margin-bottom: 24px; }
  .field-grid { grid-template-columns: 1fr; gap: 0; }
  .field { margin-bottom: 20px; }
  .choices { gap: 8px; }
  .choices label { flex: 1; justify-content: center; padding: 10px 8px; }
  .fact-details > summary { gap: 12px; font-size: 14px; }
  .fact-answer { font-size: 12px; }
  .customer-type label { font-size: 14px; padding: 12px; }
  .stage-actions { flex-wrap: wrap; gap: 12px; padding-top: 20px; }
  .stage-actions > .primary { flex: 1; }
  .stage-actions > .field-hint { width: 100%; }
  .order-submit { width: 100%; align-items: stretch; }
  .order-summary { padding: 16px; }
  .order-summary dl { font-size: 14px; gap: 12px 16px; }
  .order-summary .total-value { font-size: 26px; }
  .order-summary dd { max-width: 160px; }
  .drop-zone label { padding: 20px 12px; }
  .file-list li { gap: 8px; }
  .panel-heading h2 { max-width: 80%; }
  .service-details { padding: 0 20px; margin-top: 20px; }
  .details-body { font-size: 14px; }
  .site-footer { padding: 0 20px 24px; gap: 12px 20px; }
  dialog { padding: 24px 20px; }
  #submit-order { width: 100%; }

  body[data-chat-active]:not([data-mobile-order-open]) { padding-bottom: var(--chat-keyboard-inset, 0px); }
  body[data-chat-active] main { padding-top: 14px; }
  body[data-chat-active] .page-intro { margin-bottom: 12px; }
  body[data-chat-active] .page-intro h1 { font-size: 28px; line-height: 1.2; }
  .chat-panel { height: var(--chat-height, calc(100dvh - 240px)); min-height: 220px; padding: 14px 16px max(12px, env(safe-area-inset-bottom)); gap: 8px; }
  .chat-thread { gap: 16px; }
  .composer { display: grid; grid-template-columns: 1fr auto; padding: 8px; gap: 6px; }
  .composer textarea { grid-column: 1 / -1; width: 100%; min-height: 48px; padding: 4px; line-height: 1.45; }
  .composer .primary { grid-column: 2; min-height: 44px; padding: 10px 18px; }
  .chat-actions { min-height: 44px; gap: 12px; }
  .chat-actions .text-button { font-size: 13px; line-height: 1.4; max-width: 65%; }
  .chat-feedback { font-size: 13px; gap: 4px 12px; }
  .chat-option { flex-grow: 1; }
  .chat-facts { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 12px; font-size: 13px; }
  .chat-facts dt { color: var(--muted); }
  .chat-facts dd { margin-bottom: 0; }
}

@media (min-width: 561px) and (max-height: 600px) {
  .chat-panel { height: var(--chat-height, calc(100dvh - 32px)); min-height: 220px; padding-top: 12px; padding-bottom: 12px; gap: 8px; }
  .chat-actions { display: none; }
}

@media (forced-colors: active) {
  .choices label:has(input:checked), .customer-type label:has(input:checked),
  .mode-tabs button[aria-selected=true], .steps button[aria-current] { outline: 2px solid Highlight; outline-offset: -4px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
@media print {
  :root, :root[data-display-mode=clear] { --canvas: #fff; --surface: #fff; --ink: #111; --muted: #444; --line: #ccc; --control-line: #ccc; --wash: #fff; color-scheme: light; }
  .site-nav, .mobile-nav, .stage-actions, .composer, .session-bar, .account-menu, .contact-entry, .chat-actions, .chat-feedback, .orders-toolbar, .order-row-actions, #orders-more, #orders-retry { display: none !important; }
  main { padding: 24px 0; }
  .workspace { border: 0; }
  .chat-panel { height: auto; }
  .messages { overflow: visible; }
  .service-details > details { break-inside: avoid; }
}

@media (max-width: 600px), (max-width: 950px) and (max-height: 500px) {
  [data-order-open] .workspace { border: 0; border-radius: 0; }
  [data-order-open] .session-bar { padding: 8px 16px; }
  [data-order-open] .session-bar:not(.orders-session) { display: none; }
  [data-order-open] .workspace-toolbar { padding: 8px 16px; gap: 8px; }
  [data-order-open] .mode-tabs { margin-top: 0; }
  [data-order-open] .chat-panel { min-height: 180px; padding-top: 12px; }
  [data-order-open] .composer { display: flex; align-items: flex-end; }
  [data-order-open] .chat-area-form .field-hint { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  [data-order-open] .service-details { padding-inline: 16px; }
  [data-order-open] .mode-choice { padding: 20px 16px; }
  [data-order-open][data-order-chat] .mobile-order-body { display: flex; flex-direction: column; padding-bottom: 0; }
  [data-order-open][data-order-chat] .workspace { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: clip; width: 100%; }
  [data-order-open][data-order-chat] :is(#session-view, #draft-view) { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  [data-order-open][data-order-chat] :is(.session-bar, .workspace-toolbar, .notice, .import-recovery) { flex: none; }
  [data-order-open][data-order-chat] .workspace-toolbar { width: 100%; }
  [data-order-open][data-order-chat][data-order-compact-chat][data-order-editing] .workspace-toolbar { display: none; }
  [data-order-open][data-order-chat] .chat-panel { flex: 1; min-height: 0; height: auto; width: 100%; margin: 0; }
  [data-order-open][data-order-chat] .service-details { display: none; }
}

@media (max-height: 500px) {
  [data-order-open][data-order-chat] .chat-panel { padding: 8px 16px; }
}