/* The Automation Lab shares ADIMEVO's base palette and navigation. */
.automation-lab #primary-nav > a[aria-current="page"]::after { width: 100%; }
.lab-hero { padding-top: 48px; padding-bottom: 52px; display: grid; grid-template-columns: 1.15fr .65fr; gap: 100px; align-items: center; }
.lab-hero .eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 23px; }
.lab-hero h1 { font-size: clamp(48px, 5vw, 73px); line-height: 1.07; letter-spacing: -.055em; }
.lab-hero h1 span { color: #647753; }
.lab-intro { max-width: 490px; color: var(--muted); font-size: 14px; line-height: 1.8; margin-top: 23px; }
.lab-simulation-note { display: flex; align-items: flex-start; gap: 9px; font-size: 10px; color: #52634b; margin-top: 20px; }
.lab-simulation-note .signal-dot { background: #647753; margin-top: 5px; }
.lab-how { padding: 0; margin: 0; list-style: none; }
.lab-how li { display: flex; align-items: flex-start; gap: 20px; padding-block: 16px; border-bottom: 1px solid var(--line); }
.lab-how li > span { font-family: ui-monospace, monospace; font-size: 11px; color: #6b7c5c; padding-top: 2px; }
.lab-how strong { font-size: 14px; font-weight: 500; }
.lab-how p { font-size: 12px; color: var(--muted); line-height: 1.6; margin-top: 3px; }
.lab-template-bar { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding-block: 22px; border-top: 1px solid var(--line); }
.lab-template-bar p { font-size: 11px; color: var(--muted); margin-top: 4px; }
.lab-template-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.lab-template-buttons button { min-height: 44px; background: transparent; border: 1px solid var(--line); border-radius: 6px; font-size: 11px; padding: 10px 13px; display: flex; gap: 18px; align-items: center; }
.lab-template-buttons button:hover { background: #e9eddf; }
.lab-template-buttons button.is-active { background: var(--lime); border-color: #b7cc77; }
.lab-workbench { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid #d0d8c4; border-radius: 13px; overflow: hidden; background: #fff; }
.lab-editor { padding: 29px; min-width: 0; }
.lab-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.lab-panel-heading .eyebrow { font-size: 8px; color: #657658; }
.lab-panel-heading h2 { font-size: 23px; line-height: 1.3; letter-spacing: -.025em; margin-top: 6px; }
.lab-limits { font-size: 9px; color: var(--muted); white-space: nowrap; }
.lab-mode-tabs { display: flex; width: max-content; padding: 4px; gap: 4px; background: #f0f2e9; border: 1px solid #e4e8db; border-radius: 7px; margin-bottom: 21px; }
.lab-mode-tabs button { display: flex; align-items: center; gap: 8px; min-height: 44px; min-width: 105px; justify-content: center; border: none; background: transparent; border-radius: 4px; font-size: 12px; }
.lab-mode-tabs button[aria-selected="true"] { background: var(--ink); color: #fff; }
.lab-mode-tabs .icon { width: 16px; height: 16px; }
.lab-trigger-block { background: #eaf0dc; border: 1px solid #d6e2bf; border-radius: 7px; padding: 17px; display: flex; align-items: flex-start; gap: 15px; }
.block-kind { display: inline-block; font-family: ui-monospace, monospace; font-size: 9px; font-weight: 600; letter-spacing: .08em; color: #53683e; padding-top: 3px; }
.lab-field { min-width: 0; flex: 1; }
.lab-field label { display: block; font-size: 10px; margin-bottom: 7px; color: #4f5e45; }
.lab-field select, .lab-field input { min-height: 44px; width: 100%; padding: 9px 10px; border-radius: 4px; border: 1px solid #ccd5bd; background: #fff; font-size: 12px; color: var(--ink); }
.lab-trigger-block .lab-field { flex: 1 1 0; }
.lab-trigger-block .threshold-field { flex: 0 0 104px; }
.lab-actions-heading { display: flex; align-items: center; gap: 16px; font-size: 10px; color: var(--muted); padding: 18px 17px 12px; }
.lab-actions-heading .block-kind { padding: 0; }
.lab-block-actions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 9px; }
.action-row { display: grid; grid-template-columns: 27px minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #e0e5d7; border-radius: 6px; padding: 10px; background: #f9faf6; }
.action-number { font-family: ui-monospace, monospace; font-size: 10px; color: #7b8b6f; align-self: start; margin-top: 11px; text-align: center; }
.action-content { min-width: 0; }
.action-title { font-size: 11px; font-weight: 500; }
.action-row .lab-field label { margin-bottom: 4px; font-size: 9px; }
.action-row .lab-field input, .action-row .lab-field select { min-height: 44px; font-size: 11px; padding-inline: 9px; }
.action-tools { display: flex; flex-direction: row; gap: 3px; }
.action-tools button { width: 44px; min-height: 44px; border: 1px solid #e0e5d7; border-radius: 4px; background: #fff; font-size: 15px; line-height: 1; }
.action-tools button:hover:not(:disabled) { background: #ecf2de; }
.action-tools button:disabled { opacity: .3; cursor: default; }
.action-tools .action-remove { color: #a15040; }
.lab-add-action { display: flex; align-items: flex-end; gap: 10px; padding-top: 17px; }
.lab-button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 9px; font-size: 11px; border-radius: 5px; border: 1px solid #ccd5bd; background: #fff; padding: 10px 14px; }
.lab-button:hover:not(:disabled) { background: #eaf0dc; }
.lab-button:disabled { color: #7d877a; background: #f0f2ea; cursor: default; }
.lab-add-button { min-width: 77px; background: #eaf0dc; }
.lab-add-button > span { font-size: 19px; line-height: 1; }
.lab-generated-code { margin-top: 20px; padding-top: 10px; border-top: 1px solid var(--line); }
.lab-generated-code summary { list-style: none; display: flex; justify-content: space-between; gap: 14px; align-items: center; min-height: 44px; font-size: 10px; cursor: pointer; }
.lab-generated-code summary::-webkit-details-marker { display: none; }
.lab-generated-code summary > span { font-size: 17px; }
.lab-generated-code[open] summary > span { transform: rotate(45deg); }
.lab-generated-code pre { margin: 8px 0 0; background: #edf1e5; border-radius: 5px; padding: 15px; font: 11px/1.8 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; overflow-wrap: anywhere; white-space: pre-wrap; color: #34412e; }
.lab-code-heading { display: flex; justify-content: space-between; align-items: center; gap: 15px; margin-bottom: 9px; font-size: 11px; }
.lab-code-heading > span { font-size: 7px; color: #657658; letter-spacing: .1em; }
.lab-code-editor { width: 100%; min-height: 334px; resize: vertical; border: 1px solid #d5dfc7; border-radius: 7px; background: #26352c; color: #e5f2c4; padding: 20px; font: 13px/1.9 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; tab-size: 2; }
.lab-code-editor:focus { outline-offset: 3px; }
.lab-editor-hint { font-size: 10px; line-height: 1.7; color: #65715d; margin-top: 12px; }
.lab-editor-hint code { font-family: ui-monospace, monospace; color: #34472b; }
.lab-editor-bottom { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.lab-validation { min-height: 34px; font-size: 11px; color: #4b6740; line-height: 1.6; margin-bottom: 12px; }
.lab-validation.is-error { color: #9b3e2e; }
.lab-run-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.lab-run-controls .button { min-height: 47px; font-size: 11px; gap: 17px; padding: 11px 17px; }
.lab-run-controls .button .icon { width: 16px; height: 16px; }
.lab-simulator { min-width: 0; padding: 29px; background: #edf1e5; border-left: 1px solid #d0d8c4; }
.simulation-badge { display: flex; align-items: center; gap: 6px; color: #516342; font-size: 8px; letter-spacing: .1em; white-space: nowrap; border: 1px solid #c9d6b6; border-radius: 20px; padding: 5px 8px; }
.simulation-badge > span { width: 5px; height: 5px; background: #6b814d; border-radius: 50%; }
.lab-device-scene { display: grid; grid-template-columns: .7fr 1fr; align-items: stretch; gap: 16px; min-height: 228px; margin-top: 5px; }
.virtual-lamp-area { display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #d4ddc7; border-radius: 8px; overflow: hidden; background: #e6ecdb; }
.virtual-lamp { width: 128px; height: 125px; position: relative; --lamp-color: #d5f36b; --lamp-power: 0; margin-top: 9px; }
.lamp-glow { position: absolute; width: 126px; height: 126px; border-radius: 50%; top: -10px; background: var(--lamp-color); filter: blur(17px); opacity: 0; transition: opacity .35s; }
.virtual-lamp.is-on .lamp-glow { opacity: calc(var(--lamp-power) * .45); }
.lamp-shade { position: absolute; width: 98px; height: 61px; top: 13px; left: 15px; clip-path: polygon(25% 0, 75% 0, 100% 100%, 0 100%); background: #bcc8b1; z-index: 2; transition: background .3s; }
.virtual-lamp.is-on .lamp-shade { background: var(--lamp-color); }
.lamp-neck { position: absolute; width: 5px; height: 43px; top: 68px; left: 62px; background: #607451; }
.lamp-base { position: absolute; width: 64px; height: 7px; top: 109px; left: 32px; border-radius: 5px; background: #607451; }
.lamp-caption { text-align: center; margin-bottom: 14px; position: relative; }
.lamp-caption > span { font-size: 7px; letter-spacing: .12em; color: #6b795d; }
.lamp-caption strong { display: block; font-size: 16px; font-weight: 500; margin-top: 1px; }
.lamp-caption p { font-size: 9px; color: #526348; }
.virtual-display-area { min-width: 0; background: #27372c; color: #e2edc9; border-radius: 8px; display: flex; flex-direction: column; padding: 15px 18px; border: 4px solid #344737; }
.display-top { display: flex; align-items: center; gap: 5px; font-size: 6px; letter-spacing: .08em; color: #a8bd8e; }
.display-top > span:last-child { margin-left: auto; font-family: ui-monospace, monospace; }
.display-dot { width: 4px; height: 4px; border-radius: 50%; background: #acc979; }
.virtual-display { flex: 1; display: flex; align-items: center; font: 17px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: -.04em; padding-block: 20px; overflow-wrap: anywhere; }
.display-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 10px; border-top: 1px solid #45603e; font-size: 6px; color: #9aaf7e; letter-spacing: .08em; }
.display-bottom .icon { width: 13px; height: 13px; }
.lab-simulator-state { border-bottom: 1px solid #d1dcc3; padding: 18px 0; margin-bottom: 20px; }
.sim-state { font-size: 8px; letter-spacing: .08em; border-radius: 4px; padding: 5px 8px; background: #dde5d1; color: #55644b; display: inline-block; }
.sim-state[data-state="armed"] { background: #d5e6b2; color: #365124; }
.sim-state[data-state="running"] { background: var(--lime); color: #344521; }
.lab-simulator-state p { font-size: 11px; color: #526348; margin-top: 9px; line-height: 1.6; min-height: 35px; }
.lab-input-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 12px; }
.lab-input-heading .eyebrow { font-size: 8px; color: #5e7050; }
.lab-input-heading > span:last-child { color: #526348; font-family: ui-monospace, monospace; font-size: 8px; text-align: right; }
.lab-trigger-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.lab-trigger-button { display: flex; align-items: center; gap: 9px; min-height: 52px; padding: 11px; background: #f8faf2; border: 1px solid #ccd8bc; border-radius: 5px; font-size: 10px; text-align: left; }
.lab-trigger-button > .icon { width: 19px; height: 19px; color: #57733f; }
.lab-trigger-button > .trigger-key { margin-left: auto; color: #6e825a; font-size: 15px; }
.lab-trigger-button:hover:not(:disabled) { background: #e1edca; }
.lab-trigger-button:disabled { opacity: .55; cursor: default; }
.lab-temperature-control { border: 1px solid #ccd8bc; border-radius: 6px; margin-top: 10px; padding: 15px; background: #f3f6ec; }
.lab-temperature-control > div:first-child { display: flex; align-items: center; justify-content: space-between; font-size: 11px; }
.lab-temperature-control output { font-family: ui-monospace, monospace; font-size: 15px; color: #3c5830; }
.lab-temperature-control input { display: block; width: 100%; height: 44px; margin: 4px 0 0; accent-color: #506d37; cursor: pointer; }
.temperature-scale { display: flex; justify-content: space-between; font-family: ui-monospace, monospace; font-size: 7px; color: #718265; margin-top: -7px; }
.lab-temperature-control .lab-button { width: 100%; margin-top: 12px; min-height: 44px; font-size: 10px; }
.lab-temperature-control .icon { width: 16px; height: 16px; }
.lab-temperature-control > p { font-size: 8px; color: #526348; text-align: center; margin-top: 6px; }
.lab-log { border-top: 1px solid #d1dcc3; padding-top: 20px; margin-top: 20px; }
.lab-log-heading { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 11px; }
.lab-log-heading .eyebrow { font-size: 8px; color: #536d40; }
.lab-log-heading > span:last-child { font-size: 6px; color: #6d7f5c; letter-spacing: .08em; }
#event-log { list-style: none; margin: 0; padding: 0; height: 168px; overflow: auto; font: 10px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
#event-log li { display: flex; gap: 10px; padding-block: 6px; border-bottom: 1px solid #dce4d2; color: #526548; overflow-wrap: anywhere; }
.log-index { font-size: 8px; color: #526348; flex: 0 0 22px; padding-top: 2px; }
#event-log .log-success { color: #345c24; }
#event-log .log-input { color: #345b67; }
#event-log .log-error { color: #963f30; }
.lab-reference { display: grid; grid-template-columns: .6fr 1fr; gap: 100px; padding-block: 87px 74px; }
.lab-reference-intro h2 { font-size: 45px; letter-spacing: -.045em; line-height: 1.1; margin-top: 19px; }
.lab-reference-intro > p:not(.eyebrow) { color: var(--muted); font-size: 12px; line-height: 1.9; max-width: 270px; margin-top: 19px; }
.lab-reference-intro > a { margin-top: 26px; font-size: 11px; }
.lab-reference-card { min-width: 0; }
.grammar-row { display: grid; grid-template-columns: 1.05fr 1fr; gap: 18px; padding-block: 12px; border-bottom: 1px solid var(--line); align-items: center; }
.grammar-row:first-child { border-top: 1px solid var(--line); }
.grammar-row code { font: 10px/1.7 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #425c34; overflow-wrap: anywhere; }
.grammar-row > span { font-size: 10px; color: var(--muted); }
.grammar-note { margin-top: 18px; font-size: 9px; color: #65715b; line-height: 1.9; }
.lab-endnote { display: flex; align-items: center; gap: 19px; border-top: 1px solid var(--line); padding-block: 28px 55px; }
.lab-endnote > .icon { width: 26px; height: 26px; color: #6b8353; }
.lab-endnote > p { color: var(--muted); font-size: 11px; line-height: 1.8; }
.lab-endnote > p strong { color: var(--ink); font-weight: 500; }
.lab-endnote > a { margin-left: auto; font-size: 13px; display: flex; gap: 18px; align-items: center; }
.lab-noscript { padding: 20px; border: 1px solid #d2d9c6; background: #ecf2df; font-size: 13px; margin-bottom: 20px; }
.lab-noscript a { text-decoration: underline; }
html:not(.lab-ready) .lab-template-buttons, html:not(.lab-ready) .lab-mode-tabs, html:not(.lab-ready) .lab-run-controls, html:not(.lab-ready) .lab-add-action { display: none; }
@media (max-width: 1150px) {
  .lab-hero { gap: 45px; }
  .lab-panel-heading { align-items: flex-start; }
  .lab-limits { max-width: 70px; white-space: normal; text-align: right; }
  .lab-editor, .lab-simulator { padding: 22px; }
  .lab-trigger-block { flex-wrap: wrap; padding: 14px; gap: 10px; }
  .lab-trigger-block > .block-kind { width: 100%; }
  .action-row { gap: 5px; grid-template-columns: 20px minmax(0, 1fr) auto; padding: 8px; }
  .lab-device-scene { gap: 10px; }
  .virtual-display-area { padding-inline: 12px; }
  .virtual-display { font-size: 14px; }
  .lab-trigger-button { gap: 5px; padding-inline: 8px; }
  .lab-trigger-button > .trigger-key { display: none; }
  .lab-reference { gap: 65px; }
}
@media (max-width: 900px) {
  .lab-hero { grid-template-columns: 1fr .85fr; padding-top: 35px; gap: 35px; }
  .lab-hero h1 { font-size: 49px; }
  .lab-intro { font-size: 12px; }
  .lab-how { margin-top: 0; }
  .lab-how strong { font-size: 12px; }
  .lab-how p { font-size: 10px; }
  .lab-template-bar { display: block; }
  .lab-template-buttons { margin-top: 15px; }
  .lab-workbench { grid-template-columns: 1fr; }
  .lab-editor, .lab-simulator { padding: 30px; }
  .lab-simulator { border-left: none; border-top: 1px solid #d0d8c4; }
  .lab-panel-heading h2 { font-size: 25px; }
  .lab-limits { max-width: none; white-space: nowrap; }
  .lab-trigger-block { flex-wrap: nowrap; align-items: flex-start; padding: 17px; gap: 15px; }
  .lab-trigger-block > .block-kind { width: auto; }
  .action-row { grid-template-columns: 27px minmax(0, 1fr) auto; padding: 12px; gap: 10px; }
  .action-tools { flex-direction: row; gap: 5px; }
  .lab-device-scene { grid-template-columns: .65fr 1fr; gap: 20px; min-height: 236px; }
  .virtual-display { font-size: 21px; }
  .virtual-display-area { padding: 18px 23px; }
  .lab-trigger-button { padding-inline: 15px; font-size: 12px; gap: 9px; }
  .lab-trigger-button > .trigger-key { display: inline; }
  .lab-input-heading { margin-top: 4px; }
  .lab-temperature-control > p { font-size: 9px; }
  .lab-reference { gap: 40px; }
  .lab-reference-intro h2 { font-size: 38px; }
  .grammar-row { grid-template-columns: 1fr; gap: 4px; padding-block: 10px; }
}
@media (max-width: 600px) {
  .lab-hero { grid-template-columns: 1fr; gap: 24px; padding-block: 31px 30px; }
  .lab-hero h1 { font-size: 48px; }
  .lab-hero .eyebrow { font-size: 8px; margin-bottom: 20px; }
  .lab-intro { margin-top: 19px; font-size: 13px; max-width: 370px; }
  .lab-simulation-note { font-size: 9px; line-height: 1.7; }
  .lab-how li { padding-block: 11px; gap: 15px; }
  .lab-how strong { font-size: 12px; }
  .lab-how p { font-size: 10px; }
  .lab-template-bar { padding-block: 18px; }
  .lab-template-bar > div > .eyebrow { font-size: 8px; }
  .lab-template-buttons { gap: 6px; }
  .lab-template-buttons button { font-size: 10px; gap: 10px; padding-inline: 10px; flex: 1; justify-content: space-between; }
  .lab-template-buttons button > span { display: none; }
  .lab-editor, .lab-simulator { padding: 22px 18px; }
  .lab-panel-heading { gap: 10px; margin-bottom: 19px; }
  .lab-panel-heading h2 { font-size: 22px; }
  .lab-panel-heading .eyebrow { font-size: 7px; }
  .lab-limits { font-size: 8px; max-width: 73px; white-space: normal; }
  .lab-trigger-block { flex-wrap: wrap; padding: 13px; gap: 9px; }
  .lab-trigger-block > .block-kind { width: 100%; }
  .lab-trigger-block .threshold-field { flex-basis: 97px; }
  .lab-field label { font-size: 9px; }
  .lab-field select, .lab-field input { font-size: 11px; }
  .action-row { grid-template-columns: 18px minmax(0, 1fr); gap: 6px; padding: 8px; }
  .action-tools { grid-column: 2; flex-direction: row; justify-content: flex-end; gap: 4px; }
  .action-number { font-size: 9px; }
  .lab-run-controls { gap: 6px; }
  .lab-run-controls .button { padding-inline: 13px; gap: 11px; font-size: 10px; }
  .lab-run-controls .lab-button { padding-inline: 10px; font-size: 10px; }
  .lab-device-scene { grid-template-columns: .72fr 1fr; gap: 10px; min-height: 222px; }
  .virtual-lamp { transform: scale(.9); margin-top: 0; }
  .virtual-display-area { padding: 13px 12px; border-width: 3px; }
  .virtual-display { font-size: 14px; }
  .display-top { font-size: 5px; }
  .simulation-badge { font-size: 6px; padding: 5px 7px; }
  .lab-input-heading .eyebrow { font-size: 7px; }
  .lab-input-heading > span:last-child { font-size: 7px; }
  .lab-trigger-button { padding-inline: 10px; font-size: 10px; gap: 7px; }
  .lab-trigger-button > .trigger-key { display: none; }
  .lab-reference { grid-template-columns: 1fr; gap: 28px; padding-block: 54px 35px; }
  .lab-reference-intro h2 { font-size: 38px; }
  .lab-reference-intro h2 br { display: none; }
  .lab-reference-intro > p:not(.eyebrow) { max-width: 340px; }
  .lab-reference-intro > a { margin-top: 17px; }
  .grammar-row { grid-template-columns: 1fr 1fr; gap: 13px; }
  .grammar-row code { font-size: 9px; }
  .grammar-row > span { font-size: 9px; }
  .lab-endnote { flex-wrap: wrap; gap: 13px; padding-bottom: 35px; }
  .lab-endnote > p { font-size: 10px; }
  .lab-endnote > a { width: 100%; margin: 5px 0 0 38px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .automation-lab *, .automation-lab *::before, .automation-lab *::after { transition: none !important; } }