/* seq/public/assets/rooms.css の写し（seq/tools/make_rooms.py が作る。ここは直さない） */
/* 部屋（PLC・空気圧・論理回路・複線図）の共通の見た目 */
.rooms { display: flex; flex-wrap: wrap; gap: 4px; }
.rooms a { text-decoration: none; border: 1.5px solid var(--line); border-radius: 4px; padding: 5px 12px; font-size: 14px; background: #fff; }
.rooms a:hover { border-color: var(--ink); }
.rooms a.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.rooms small { font-size: 10px; margin-left: 3px; opacity: .75; }
.logo img { display: block; }
.trial { background: #fff7e0; border-bottom: 1px solid #ecd9a0; color: #6b4e00; font-size: 13px; padding: 5px 18px; text-align: center; }
.rintro { max-width: 1500px; margin: 0 auto; padding: 12px 14px 0; }
.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tab { border: 1.5px solid var(--line); background: #fff; border-radius: 18px; padding: 5px 14px; cursor: pointer; font-size: 14px; }
.tab:hover { border-color: var(--ink); }
.tab.on { background: var(--hot); border-color: var(--hot); color: #fff; }
.about { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--hot); border-radius: 6px; padding: 10px 16px; }
.about h2 { margin: 0 0 4px; font-size: 17px; }
.about p { margin: 0 0 6px; font-size: 14px; color: #33475b; }
.about h3 { margin: 6px 0 2px; font-size: 13.5px; }
.about ol { margin: 0; padding-left: 1.4em; font-size: 13.5px; }
.rmain { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 14px; padding: 14px; max-width: 1500px; margin: 0 auto; }
.rmain .pane h2 { margin: 0 0 6px; font-size: 16px; }
.rmain .pane h2 small { font-weight: normal; color: var(--ink2); font-size: 12px; margin-left: 4px; }
.rfoot { max-width: 1100px; margin: 0 auto; padding: 0 18px 40px; font-size: 12.5px; color: var(--ink2); }
.demo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; }
.demo span { font-size: 13.5px; color: var(--ink); background: #fff6d6; border-radius: 4px; padding: 3px 8px; min-height: 1.6em; }
.simctl .demo { margin: 0; }
.lbl { font-size: 13px; color: var(--ink2); }
.scan { font-size: 12.5px; color: var(--ink2); margin: 6px 2px; }
.err { color: var(--err); font-size: 13px; }

/* PLC ラダー */
.ladder.plc { min-width: 520px; }
.pbus { stroke: var(--ink); stroke-width: 3; }
.pw { stroke: var(--ink); stroke-width: 1.8; fill: none; }
.pc { stroke: var(--ink); stroke-width: 2.2; fill: none; }
.pmon { fill: #4fa3ff; opacity: .45; }
.pd { font-size: 12px; font-weight: bold; text-anchor: middle; fill: var(--ink); font-family: Menlo, Consolas, monospace; }
.pl { font-size: 10.5px; text-anchor: middle; fill: var(--ink2); }
.pstep { font-size: 11px; text-anchor: end; fill: #8a9aab; font-family: Menlo, Consolas, monospace; }
.pact { fill: rgba(224, 65, 46, .06); }
.il-wrap { max-height: 320px; overflow: auto; border: 1px solid var(--line); border-radius: 4px; }
.il { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.il th, .il td { border-bottom: 1px solid var(--grid); padding: 3px 8px; text-align: left; font-family: Menlo, Consolas, monospace; }
.il th { background: var(--grid); position: sticky; top: 0; font-family: inherit; }
.il td:last-child { font-family: inherit; color: var(--ink2); }
.il tr.end td { color: var(--hot); font-weight: bold; }
.srcbox { margin: 10px 0; font-size: 13.5px; }
.srcbox summary { cursor: pointer; color: var(--ink); font-weight: bold; }
.srcbox textarea { width: 100%; font-family: Menlo, Consolas, monospace; font-size: 14px; border: 1.5px solid var(--line); border-radius: 4px; padding: 6px; margin: 6px 0; }

/* 空気圧 */
.aircirc { display: block; width: 100%; min-width: 520px; height: auto; }
.cyl { fill: #f3f6f9; stroke: var(--ink); stroke-width: 2.2; }
.air { fill: transparent; }
.air.on { fill: #cfe6ff; }
.piston { fill: #8796a5; stroke: var(--ink); stroke-width: 1.5; }
.rod { fill: #b9c4cf; stroke: var(--ink); stroke-width: 1.3; }
.rodend { fill: #8796a5; stroke: var(--ink); stroke-width: 1.3; }
.an { font-size: 22px; font-weight: bold; fill: var(--ink); }
.as { font-size: 11px; fill: var(--ink2); text-anchor: middle; }
.sens { fill: #dfe5ea; stroke: var(--ink2); stroke-width: 1.5; }
.sens.on { fill: #3fd37a; stroke: #1d8a4e; }
.tube { fill: none; stroke: #9aa8b5; stroke-width: 3; }
.tube.on { stroke: #2f80ed; }
.vbox { fill: #fff; stroke: var(--ink); stroke-width: 1.8; }
.vbox.act { fill: #eaf4ff; }
.varr { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.valve { transition: transform .12s; }
.sol { fill: #fff; stroke: var(--ink); stroke-width: 1.8; }
.sol.on { fill: #ffd7cf; stroke: var(--hot); }
.spring { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.src { fill: #2f80ed; }

/* 論理回路 */
.logic { display: block; width: 100%; min-width: 480px; height: auto; user-select: none; -webkit-user-select: none; }
.gb { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.gl { fill: none; stroke: var(--ink); stroke-width: 2; }
.gt { font-size: 10px; text-anchor: middle; fill: var(--ink2); }
.lw { fill: none; stroke: #9aa8b5; stroke-width: 2; }
.lw.on { stroke: var(--hot); stroke-width: 2.6; }
.ld { fill: #9aa8b5; } .ld.on { fill: var(--hot); }
.led { fill: #e6eaee; stroke: var(--ink); stroke-width: 1.5; }
.led.on { fill: #ff6a4d; stroke: var(--hot); }
.lv { font-size: 13px; font-weight: bold; text-anchor: middle; fill: var(--ink); font-family: Menlo, Consolas, monospace; pointer-events: none; }
.ln { font-size: 12px; fill: var(--ink); }
.lin { cursor: pointer; }
.lin .ln { text-anchor: middle; font-weight: bold; }
.tgl { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.tgl.on { fill: #ffd7cf; stroke: var(--hot); }
.tt td, .tt th { text-align: center; }
.tt .o { background: #fbfcfd; font-weight: bold; }
.tt tr.cur td { background: #ffe9a8; }

/* 複線図 */
.wire { display: block; width: 100%; min-width: 520px; height: auto; user-select: none; -webkit-user-select: none; }
.wpart { fill: #fff; stroke: var(--ink); stroke-width: 1.8; }
.wbox { fill: none; stroke: var(--ink2); stroke-width: 1.6; stroke-dasharray: 6 4; }
.wt { font-size: 14px; font-weight: bold; fill: var(--ink); text-anchor: middle; }
.ws { font-size: 11px; fill: var(--ink2); text-anchor: middle; }
.wtl { font-size: 10.5px; fill: var(--ink2); }
.wlamp, .wout { fill: #fff; stroke: var(--ink); stroke-width: 2; }
.wlamp.on { fill: #fff19a; stroke: #e0a400; }
.wout.on { fill: #d8f5e2; stroke: #1d8a4e; }
.wx { stroke: var(--ink); stroke-width: 1.6; fill: none; }
.wsw { cursor: pointer; }
.wblade { stroke: var(--ink2); stroke-width: 3; stroke-linecap: round; }
.wblade.on { stroke: var(--hot); }
.wterm { fill: #fff; stroke: var(--ink); stroke-width: 2; cursor: pointer; }
.wterm:hover { fill: #ffe3dd; }
.wterm.pick { fill: var(--hot); stroke: var(--hot); }
.wwire { fill: none; stroke-width: 4; stroke-linecap: round; cursor: pointer; }
.wwire:hover { stroke-dasharray: 6 4; }
.wwire.c-k { stroke: #1b1b1b; }
.wwire.c-w { stroke: #c9ced3; }
.wwire.c-r { stroke: #e0412e; }
.wshort { font-size: 14px; font-weight: bold; fill: var(--err); text-anchor: middle; }
.sline { stroke: var(--ink); stroke-width: 2; fill: none; }
.sdot { fill: var(--ink); }
.col-k.on { background: #1b1b1b; border-color: #1b1b1b; }
.col-w.on { background: #fff; color: var(--ink); border: 2px solid var(--ink); }
.col-r.on { background: var(--hot); border-color: var(--hot); }
.rules { font-size: 13.5px; padding-left: 1.3em; }
.rules li { margin: 3px 0; }
.issues li.ok { background: #e9f7ee; color: #14532d; }
.issues li.ok::before { content: "✓"; }
.hint span { margin-left: 8px; color: var(--ink); }

@media (max-width: 960px) {
  .rmain { grid-template-columns: 1fr; padding: 8px; }
  .rooms a { padding: 4px 8px; font-size: 13px; }
}
.demo span:empty { display: none; }
.wterm.box { stroke: var(--ink2); }
.sisters { font-size: 13px; color: var(--ink2); margin: 0 0 6px; }
.sisters b { color: var(--ink); }