/* AI coding guide: interactive panels in the Lab 2 palette (deep teal + lime) on the dark guide page. */
.page-ai-coding{--ai-deep:#12343b;--ai-accent:#c6f15b;--ai-bg:#f1f9e3;--ai-soft:#dcefc0;--ai-ink:#10272c}
.page-ai-coding .ai-choice{padding:16px 20px;border:2px dashed var(--ai-accent);color:#eef6e4}
.page-ai-coding kbd{font:600 14px Consolas,monospace;padding:1px 7px;border:2px solid #9fb8c0;border-bottom-width:3px;border-radius:3px;color:#fff;background:#0f2530}
.page-ai-coding .step-sub{font-size:24px;margin:34px 0 8px}

.page-ai-coding :is(.mode-cards,.prompt-compare,.prompt-builder,.spot,.log-builder){margin:26px 0;color:var(--ai-ink)}
.page-ai-coding :is(.prompt-builder,.spot,.log-builder){padding:24px;background:var(--ai-bg);border:4px solid var(--ai-deep);border-radius:5px;box-shadow:6px 6px 0 #061418}
.page-ai-coding :is(.prompt-builder,.spot,.log-builder,.mode-cards,.prompt-compare) :is(p,li,label,legend,strong,em){color:var(--ai-ink)}
.page-ai-coding .mode-name{font:700 12px/1.5 Consolas,monospace!important;letter-spacing:.12em;color:#2e6b3a!important;margin:0 0 8px}
.page-ai-coding :is(.prompt-builder,.spot,.log-builder) :focus-visible{outline:3px solid var(--ai-deep);outline-offset:3px}

.page-ai-coding .mode-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.page-ai-coding .mode{padding:18px;background:#e6ece9;border:2px solid #536c75;border-radius:3px;opacity:.85}
.page-ai-coding .mode p:last-child{font-size:16px;margin:0}
.page-ai-coding .mode.is-pick{background:var(--ai-bg);border:3px solid var(--ai-accent);box-shadow:5px 5px 0 var(--ai-accent);opacity:1}

.page-ai-coding .prompt-compare{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:14px}
.page-ai-coding .prompt-compare>div{padding:18px 20px;border-radius:3px}
.page-ai-coding .prompt-bad{background:#f6e3e3;border:2px dashed #9c2b2b}
.page-ai-coding .prompt-good{background:var(--ai-bg);border:3px solid var(--ai-deep)}
.page-ai-coding .prompt-bad .mode-name{color:#9c2b2b!important}
.page-ai-coding .prompt-compare .prompt-text{font:400 19px/1.5 Georgia,'Times New Roman',serif;margin:0 0 8px}
.page-ai-coding .prompt-compare p:not(.prompt-text):not(.mode-name){font-size:15px;margin:0}

.page-ai-coding .pb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px 20px}
.page-ai-coding .pb-grid>label{display:grid;gap:6px;font:650 16px/1.4 'Segoe UI',Arial,sans-serif}
.page-ai-coding .pb-grid :is(input:not([type=checkbox]),select){width:100%;min-height:46px;padding:10px 12px;border:2px solid var(--ai-deep);border-radius:3px;background:#fff;color:var(--ai-ink);font:400 16px/1.4 'Segoe UI',Arial,sans-serif}
.page-ai-coding .pb-grid ::placeholder{color:#5d6e71}
.page-ai-coding .pb-grid fieldset{grid-column:1/-1;margin:0;padding:12px 16px 14px;border:2px solid var(--ai-deep);border-radius:3px;display:flex;flex-wrap:wrap;gap:6px 22px}
.page-ai-coding .pb-grid legend{font:650 16px 'Segoe UI',Arial,sans-serif;padding:0 6px}
.page-ai-coding .pb-grid fieldset label{display:flex;gap:9px;align-items:center;font-size:15px;min-height:36px;cursor:pointer}
.page-ai-coding .pb-grid fieldset input{width:20px;height:20px;accent-color:var(--ai-deep)}
.page-ai-coding .pb-meter{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 10px}
.page-ai-coding .pb-meter span{padding:5px 12px;border:2px dashed #7c8f8a;border-radius:3px;font:700 12px/1.4 Consolas,monospace;letter-spacing:.1em;color:#566a6b}
.page-ai-coding .pb-meter span.is-on{border-style:solid;border-color:var(--ai-deep);background:var(--ai-accent);color:var(--ai-ink)}
.page-ai-coding .pb-meter span.is-on:before{content:'✓ '}
.page-ai-coding :is(.pb-output,.spot-code){background:#1e1e1e;border:3px solid var(--ai-deep);border-radius:4px}
.page-ai-coding .pb-output{margin:0 0 14px;padding:16px 18px;white-space:pre-wrap;overflow-wrap:anywhere}
.page-ai-coding .pb-output code{color:#e8f5d0;font:15px/1.6 Consolas,monospace;background:none}
.page-ai-coding :is(.prompt-builder,.spot,.log-builder) button{min-height:44px;margin:4px 10px 4px 0}
.page-ai-coding :is(.pb-status,.log-status){font-size:15px!important;font-weight:600;margin:8px 0 0}

.page-ai-coding .spot-brief{font-size:17px}
.page-ai-coding .spot-code{list-style:none;margin:14px 0 16px;padding:12px 8px;counter-reset:ln}
.page-ai-coding .step .spot-code li{counter-increment:ln;display:flex;align-items:stretch;padding:0;margin:0}
.page-ai-coding .spot-code li:before{content:counter(ln);width:30px;flex:0 0 30px;text-align:right;padding:8px 8px 0 0;font:13px/1.6 Consolas,monospace;color:#858585}
.page-ai-coding .spot .spot-code button{flex:1;min-height:36px;margin:1px 0;padding:4px 10px;text-align:left;background:transparent;border:2px solid transparent;border-radius:3px;box-shadow:none;cursor:pointer}
.page-ai-coding .spot-code code{color:#d4d4d4;font:15px/1.5 Consolas,monospace;background:none;white-space:pre-wrap;overflow-wrap:anywhere}
.page-ai-coding .spot .spot-code button:hover{border-color:#5d7a80}
.page-ai-coding .spot .spot-code button[aria-pressed=true]{border-color:var(--ai-accent);background:#2b3b1e}
.page-ai-coding .spot .spot-code button[aria-pressed=true]:after{content:'  ← not asked?';font:600 13px Consolas,monospace;color:var(--ai-accent)}
.page-ai-coding .spot.is-checked .spot-code li.is-extra button{border-color:#ff8a80;background:#3b1f1f}
.page-ai-coding .spot.is-checked .spot-code li.is-extra button:after{content:'  ← added without being asked';font:600 13px Consolas,monospace;color:#ffb3ab}
.page-ai-coding .spot .spot-reset{background:#e4ece8;box-shadow:none}
.page-ai-coding .spot-result:not(:empty){margin-top:14px;padding:16px 18px;background:#fff;border:2px solid var(--ai-deep);border-left:8px solid var(--ai-accent);border-radius:3px}
.page-ai-coding .spot-result p{margin:0 0 8px}.page-ai-coding .spot-result li{font-size:16px;padding:4px 0}
.page-ai-coding .spot-result code{color:var(--ai-deep);font-size:14px}

.page-ai-coding .edit-ideas{columns:2;column-gap:30px}

.page-ai-coding .log-builder>label{display:grid;gap:6px;margin:0 0 14px;font:650 16px/1.4 'Segoe UI',Arial,sans-serif}
.page-ai-coding .log-builder :is(input,textarea){width:100%;min-height:46px;padding:10px 12px;border:2px solid var(--ai-deep);border-radius:3px;background:#fff;color:var(--ai-ink);font:400 16px/1.5 'Segoe UI',Arial,sans-serif;resize:vertical}
.page-ai-coding .log-builder ::placeholder{color:#5d6e71}
.page-ai-coding .log-buttons{display:flex;flex-wrap:wrap;gap:4px}
.page-ai-coding .log-copy-holder{position:absolute;left:-9999px;white-space:pre-wrap}


.access-calm .page-ai-coding :is(.prompt-builder,.spot,.log-builder){box-shadow:none}
@media(max-width:760px){.page-ai-coding .mode-cards,.page-ai-coding .prompt-compare,.page-ai-coding .pb-grid{grid-template-columns:minmax(0,1fr)}.page-ai-coding .edit-ideas{columns:1}.page-ai-coding :is(.prompt-builder,.spot,.log-builder){padding:18px}}
@media print{.page-ai-coding :is(.prompt-builder,.spot,.log-builder){box-shadow:none}.page-ai-coding button{display:none}}

.page-ai-coding .mode .mode-name{color:#24552e!important}