/* 森麒機電｜PLC 入門：擬真控制盤、輸送帶、紅框安全邊界、一次一題、本次 I/O 對照表（2026-10-15） */
:root{--af-red:#ff4d3d;--af-red-bg:#3a1416}
/* 品牌 */
.brand strong{letter-spacing:.02em}
.brand-product{font-size:.8rem;color:var(--muted)}
/* 紅框：教學邊界與外部安全 */
.scope-note{border:2px solid var(--af-red);border-left-width:6px;background:var(--af-red-bg)}
.scope-note strong{color:#ffb4aa}
.scope-note p{color:#f3d9d6}
.factory-diagram .safety-box{fill:var(--af-red-bg);stroke:var(--af-red);stroke-width:2.5}
.factory-diagram .safety-line{stroke:var(--af-red)}
.factory-diagram.is-safety-latched .safety-box{fill:#5a1a1a;stroke:#ff8070}
.input-controls>label:has(#input-safetyLoopHealthy){border:2px solid var(--af-red);border-radius:8px;padding:.7rem .7rem;background:var(--af-red-bg);margin:.4rem 0}
.af-red-box{border:2px solid var(--af-red);background:var(--af-red-bg);border-radius:10px;padding:.9rem 1rem}
.af-red-box strong{color:#ffb4aa}
.af-red-box ul{margin:.4rem 0 0;padding-left:1.2rem;font-size:.85rem;color:#f3d9d6}
/* 一次一題：A／B／C 切換鈕，只展開目前這一題 */
.challenge-choices{display:flex;flex-wrap:wrap;gap:.5rem}
.challenge-choices legend.af-legend{position:static;width:auto;height:auto;clip-path:none;white-space:normal;font-size:.85rem;color:var(--muted);margin:0 0 .4rem;flex-basis:100%}
.challenge-card{flex:1 1 0;min-width:0;padding:.55rem .7rem;min-height:48px;align-items:center}
.challenge-card:not(:has(input:checked))>span:not(.card-number),.challenge-card:not(:has(input:checked))>small{display:none}
.challenge-card:not(:has(input:checked)) strong{font-size:.82rem;padding-right:1.4rem}
.challenge-card:not(:has(input:checked)) .card-number{grid-row:1}
.challenge-card:has(input:checked){flex-basis:100%;order:2;padding:1.2rem}
.challenge-card input{top:50%;transform:translateY(-50%)}
.challenge-card:has(input:checked) input{top:1.2rem;transform:none}
/* 擬真盤面 */
.plant-section{margin:1.2rem 0;padding:1rem;border:1px solid #52748d;border-top:3px solid var(--orange);border-radius:10px;background:#081e35}
.plant-section h3{font-size:1rem;margin:0}
.plant-section .plant-lead{font-size:.8rem;color:var(--muted);margin:.5rem 0 .9rem}
.plant-grid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:.8rem;align-items:start}
.plant-grid svg{display:block;width:100%;height:auto;border-radius:10px}
#af-panel-svg{max-width:380px;margin:auto}
#af-status{font-size:.8rem;color:#d6e9f5;margin:.7rem 0 0;font-variant-numeric:tabular-nums}
.af-legend-note{font-size:.72rem;color:var(--muted);margin:.4rem 0 0}
.af-plate{fill:#f2f4f5;font-size:11px;font-weight:700;font-family:system-ui,"Noto Sans TC",sans-serif}
.af-name{fill:#f2f4f5;font-size:15px;font-weight:800;letter-spacing:.08em;font-family:system-ui,"Noto Sans TC",sans-serif}
.af-flag{fill:#fff;font-size:11px;font-weight:800;font-family:system-ui,"Noto Sans TC",sans-serif}
.af-tiny{fill:#c7d2da;font-size:11px;font-family:system-ui,"Noto Sans TC",sans-serif}
.af-tiny.dark{fill:#3a3f44}
.af-plc-title{fill:#e7eef3;font-size:12.5px;font-weight:800;font-family:system-ui,"Noto Sans TC",sans-serif}
.af-addr{fill:#e7eef3;font-size:11px;font-weight:700;font-family:ui-monospace,monospace}
.af-seg{fill:#59ff7a;font-size:14px;font-weight:700;font-family:ui-monospace,"Consolas",monospace;letter-spacing:.06em}
.af-led{stroke:#0b0d0e;stroke-width:1.5}
.af-led.in{fill:#123018}.af-led.in[data-on=true]{fill:#5dff7d;filter:drop-shadow(0 0 5px #5dff7d)}
.af-led.out{fill:#3b2410}.af-led.out[data-on=true]{fill:#ffae3d;filter:drop-shadow(0 0 6px #ffae3d)}
.af-img{fill:#26303a;stroke:#59636d;stroke-width:.8}
.af-img[data-on=true]{fill:#90d9cd}
.af-img[data-known=false]{fill:none;stroke-dasharray:2 2}
.af-btn{cursor:pointer;outline:none}
.af-btn[aria-disabled=true]{cursor:not-allowed;opacity:.6}
.af-btn:focus-visible>:first-child{stroke:#ffe0a3;stroke-width:4}
.af-btn .af-cap{transition:transform .08s}
.af-btn.is-pressed .af-cap{transform:translateY(2.5px) scale(.94);transform-box:fill-box;transform-origin:center}
.af-btn.is-pressed .af-cap-face{filter:brightness(.78)}
.af-lamp.blink .af-lens{animation:af-blink 1s steps(2,start) infinite}
@keyframes af-blink{to{opacity:.35}}
.af-svg-label{fill:#f2f6f9;font-size:20px;font-weight:800;font-family:system-ui,"Noto Sans TC",sans-serif}
.af-svg-small{fill:#d6e4ee;font-size:17px;font-weight:600;font-family:system-ui,"Noto Sans TC",sans-serif}
.af-red-frame{fill:#2c1214;stroke:var(--af-red);stroke-width:3}
#af-safety-zone.tripped .af-red-frame{fill:#4a1517}
.af-red-title{fill:#ffb4aa;font-size:17px;font-weight:800;font-family:system-ui,"Noto Sans TC",sans-serif}
.af-sensor-led,.af-sr-led{fill:#3a2b10;stroke:#111}
.af-sensor-led[data-on=true]{fill:#ffcf3d;filter:drop-shadow(0 0 4px #ffcf3d)}
.af-sr-led[data-on=true]{fill:#5dff7d;filter:drop-shadow(0 0 4px #5dff7d)}
#af-safety-zone.tripped .af-sr-led{fill:#ff4d3d}
#af-plant-svg.anim .af-boxes{animation:af-move calc(2.8s * var(--qq-motion-scale,1)) linear infinite}
#af-plant-svg.anim .af-belt-top{animation:af-belt calc(.5s * var(--qq-motion-scale,1)) linear infinite}
#af-plant-svg.anim .af-roller{animation:af-spin calc(.9s * var(--qq-motion-scale,1)) linear infinite;transform-box:fill-box;transform-origin:center}
#af-plant-svg.is-running #af-motor rect:first-child{stroke:#90d9cd;stroke-width:2.5}
@keyframes af-move{from{transform:translateX(0)}to{transform:translateX(140px)}}
@keyframes af-belt{from{transform:translateX(0)}to{transform:translateX(18px)}}
@keyframes af-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){#af-plant-svg .af-boxes,#af-plant-svg .af-belt-top,#af-plant-svg .af-roller,.af-lamp.blink .af-lens{animation:none!important}}
body.reduced-motion #af-plant-svg .af-boxes,body.reduced-motion #af-plant-svg .af-belt-top,body.reduced-motion #af-plant-svg .af-roller,body.reduced-motion .af-lamp.blink .af-lens{animation:none!important}
/* 單一主要按鈕：執行一次掃描 */
.plant-section .action-controls{margin-top:.9rem}
.plant-section .action-controls #cycle-button{flex:1 1 100%;font-size:1rem;min-height:52px}
.plant-section .action-controls .button:not(#cycle-button){flex:1 1 0;min-height:44px}
#af-help{margin-top:.8rem}
/* 本次 I/O 對照表 */
.io-checklist{background:#f7f9fb;color:#14212e;border-radius:12px;padding:1.2rem;border:1px solid #c9d4de}
.io-checklist .ck-head{display:flex;align-items:center;gap:.7rem;border-bottom:2px solid #0b2748;padding-bottom:.7rem;margin-bottom:.8rem}
.io-checklist .ck-head img{width:40px;height:40px;flex:none}
.io-checklist .ck-head strong{display:block;font-size:1.05rem;color:#0b2748}
.io-checklist .ck-head span{font-size:.75rem;color:#4a5b6b}
.io-checklist h3{font-size:.95rem;color:#0b2748;margin:1rem 0 .4rem}
.io-checklist p{color:#2d3d4c;font-size:.85rem}
.ck-meta{display:flex;flex-wrap:wrap;gap:.3rem 1.2rem;font-size:.82rem}
#ck-stamp{display:inline-block;margin-top:.5rem;padding:.3rem .7rem;border-radius:6px;border:2px dashed #8a97a3;color:#4a5b6b;font-weight:800;font-size:.85rem}
#ck-stamp[data-done=true]{border-style:solid;border-color:#d4570b;color:#d4570b;background:#fff3ea}
.ck-table{width:100%;border-collapse:collapse;font-size:.76rem;table-layout:fixed}
.ck-table th,.ck-table td{border:1px solid #c9d4de;padding:.35rem .3rem;text-align:left;overflow-wrap:anywhere;vertical-align:top}
.ck-table thead th{background:#0b2748;color:#fff;font-weight:700}
.ck-table td[data-on=true]{background:#dff5e6;color:#0f5b28;font-weight:700}
.ck-io col.c1{width:13%}.ck-io col.c2{width:31%}.ck-io col.c3{width:12%}.ck-io col.c4{width:14%}
.ck-scan td,.ck-scan th{text-align:center;font-family:ui-monospace,monospace}
.ck-scan td:last-child{font-family:inherit;text-align:left}
#ck-skills{padding-left:1.1rem;font-size:.82rem;margin:.3rem 0}
#ck-skills li[data-level=mastered]{color:#0f5b28;font-weight:700}
.io-checklist .af-red-box{background:#fff1ef;border-color:#d42a1c}
.io-checklist .af-red-box strong{color:#b0170b}
.io-checklist .af-red-box ul{color:#5b1d16}
.ck-foot{font-size:.75rem;color:#4a5b6b;border-top:1px solid #c9d4de;margin-top:1rem;padding-top:.6rem}
.ck-actions{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:.9rem}
.site-footer .brand-foot a{display:inline}
@media (max-width:900px){.plant-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .plant-section{padding:.75rem;margin-left:-.25rem;margin-right:-.25rem}
  .challenge-card:not(:has(input:checked)) strong{font-size:.75rem}
  .ck-table{font-size:.68rem}
  .ck-io col.c2{width:30%}
  .io-checklist{padding:.85rem}
}
@media print{
  body.print-checklist .site-header,body.print-checklist .site-footer,body.print-checklist .skip-link,body.print-checklist main>*:not(#checklist-section){display:none!important}
  body.print-checklist{background:#fff}
  body.print-checklist #checklist-section .section-heading,body.print-checklist .ck-actions{display:none}
  body.print-checklist .io-checklist{border:0}
}
/* r2：輸送帶與現場安全區分成兩張圖，390px 字級放大 */
.plant-right{display:grid;gap:.6rem;min-width:0}
#af-field-svg{max-width:460px}
#af-plant-svg .af-svg-small{font-size:22px}
#af-plant-svg .af-svg-label{font-size:26px}
#af-field-svg .af-svg-small{font-size:17px}
#af-field-svg .af-red-title{font-size:18px}
@media (max-width:900px){#af-field-svg{margin:auto}}