/* Interaktywny pokaz Klimat z zaakceptowanej wersji v5.1. */
.klimat-overview { margin-top: 1rem; }
.klimat .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lab-shell { --paper-line: #d9cfc1; color-scheme: light; background: var(--paper); color: var(--ink); border-radius: 13px; border: 1px solid #9c806333; box-shadow: 0 20px 90px #0004; overflow: hidden; }
.lab-shell :focus-visible { outline-color: #935331; }
.lab-toolbar { display: flex; align-items: center; justify-content: space-between; padding: 17px 24px; gap: 15px; border-bottom: 1px solid var(--paper-line); }
.product-name { display: flex; gap: 10px; align-items: center; }
.product-mark { display: grid; place-items: center; width: 34px; height: 34px; color: #f8e6d5; background: #422d20; border-radius: 8px; font-size: 1.45rem; font-weight: 730; }
.product-name strong, .product-name div > span { display: block; }
.product-name strong { font-size: 1rem; line-height: 1.1; }
.product-name div > span { font-size: .64rem; color: #6f6053; margin-top: 3px; }
.sample-label { display: inline-flex; align-items: center; gap: 7px; color: #65513f; font-size: .68rem; border: 1px solid #d5c5b3; border-radius: 20px; padding: 4px 8px; white-space: nowrap; }
.sample-label > span { flex: none; width: 5px; height: 5px; border-radius: 50%; background: #a5724b; }
.lab-controls { padding: 14px 24px; border-bottom: 1px solid var(--paper-line); }
.scenario-select { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; border: 0; padding: 0; margin: 0; min-width: 0; }
.scenario-select legend { float: left; margin-right: 16px; padding: 0; font-size: .72rem; font-weight: 680; line-height: 40px; }
.scenario-button { border: 1px solid transparent; min-height: 44px; border-radius: 6px; padding: 7px 12px; background: transparent; color: #655244; font-size: .74rem; }
.scenario-button:hover { background: #e6dacb; }
.scenario-button.is-active { color: #3a2416; background: #e5d0bb; border-color: #c6a789; font-weight: 700; }
.lab-content { display: grid; grid-template-columns: minmax(0,.82fr) minmax(0,1.18fr); min-height: 345px; }
.mail-card { display: flex; flex-direction: column; padding: 27px; background: #eae2d6; border-right: 1px solid var(--paper-line); }
.panel-label { display: flex; align-items: center; gap: 8px; color: #7a604b; font-size: .64rem; font-weight: 750; letter-spacing: .1em; }
.panel-label > span { color: #8d5e3d; font-size: 1.2rem; }
.mail-person { display: flex; gap: 11px; align-items: center; margin-top: 30px; }
.avatar { display: grid; place-items: center; width: 36px; height: 36px; background: #d6c3ae; border-radius: 50%; color: #6d452a; font-size: .84rem; }
.mail-person strong, .mail-person div > span { display: block; }
.mail-person strong { font-size: .85rem; }
.mail-person div > span { color: #74604e; font-size: .7rem; }
.mail-body { font-size: .94rem; line-height: 1.8; margin-top: 23px; max-width: 36ch; }
.mail-foot { color: #7a6654; font-size: .66rem; margin-top: auto; padding-top: 27px; }
.result-card { padding: 23px 26px; display: flex; flex-direction: column; min-width: 0; }
.step-controls { display: flex; border-bottom: 1px solid var(--paper-line); gap: 18px; margin-bottom: 24px; }
.step-button { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 0; border-bottom: 2px solid transparent; color: #756455; font-size: .78rem; padding: 5px 0 11px; min-height: 44px; }
.step-button span { color: #a48a73; font-size: .63rem; }
.step-button.is-active { color: #442d1c; border-bottom-color: #975b32; font-weight: 750; }
.step-panel { min-height: 190px; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.status-chip { display: inline-flex; padding: 4px 8px; border-radius: 4px; font-size: .65rem; font-weight: 720; white-space: nowrap; }
.status-attention { color: #8a4725; background: #f5dcc5; }
.status-ready { color: #315940; background: #dfeadd; }
.result-card h3 { font-size: clamp(1.25rem,2vw,1.65rem); letter-spacing: -.035em; font-weight: 640; }
.case-fields { margin: 20px 0 0; }
.case-fields > div { display: flex; justify-content: space-between; gap: 18px; padding: 8px 0; border-bottom: 1px solid #dfd4c6; font-size: .75rem; }
.case-fields dt { color: #75604f; }
.case-fields dd { margin: 0; font-weight: 650; text-align: right; }
.case-fields .field-missing dd { color: #934b27; }
.demo-next { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 20px; margin-top: auto; }
.demo-next > p { color: #79614e; font-size: .7rem; max-width: 30ch; }
.demo-next .button { min-height: 40px; padding: 10px 13px; font-size: .72rem; flex: none; gap: 16px; }
.demo-draft { white-space: pre-wrap; color: #5c4838; font-size: .86rem; line-height: 1.75; margin-top: 15px; padding-left: 12px; border-left: 2px solid #c19a79; }
.demo-description { color: #695646; margin-top: 14px; font-size: .86rem; }
.lab-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 5px 20px; padding: 13px 24px; border-top: 1px solid var(--paper-line); color: #74604f; font-size: .66rem; }
.lab-footer b { font-weight: 700; color: #594433; }
.klimat-fallback { margin-top: 18px; font-size: .85rem; color: #b8a48f; }

@media (max-width: 40rem) {
  .scenario-select legend { float: none; line-height: 1.4; margin-bottom: .5rem; }
  .lab-toolbar { padding: 16px; }
  .lab-controls { padding: 13px 16px; }
  .scenario-select { gap: 5px; }
  .scenario-button { font-size: .65rem; padding: 6px 8px; }
  .lab-content { grid-template-columns: minmax(0,1fr); }
  .mail-card { border-right: 0; border-bottom: 1px solid var(--paper-line); padding: 20px; }
  .mail-person { margin-top: 17px; }
  .mail-body { max-width: 100%; font-size: .87rem; margin-top: 16px; }
  .mail-foot { padding-top: 16px; font-size: .6rem; }
  .result-card { padding: 19px; }
  .step-controls { flex-wrap: wrap; gap: 8px 16px; }
  .step-button { font-size: .73rem; }
  .step-panel { min-height: 185px; }
  .result-card h3 { font-size: 1.35rem; }
  .case-fields > div { font-size: .72rem; gap: 12px; }
  .demo-next { flex-wrap: wrap; padding-top: 18px; }
  .demo-next > p { font-size: .64rem; }
  .demo-next .button { font-size: .64rem; gap: 9px; padding-inline: 10px; }
  .lab-footer { padding: 13px 16px; font-size: .61rem; }
}