/* מעבדת תקשוב: same layout as our circuit simulator (dark toolbar, list on the side, yellow hint, work area) */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; font-family: "Segoe UI", Arial, sans-serif; font-size: 14px; background: #e6e6ea; color: #1b1b22; }
body { display: flex; flex-direction: column; min-height: 100%; }
header { display: flex; flex-wrap: wrap; row-gap: 4px; align-items: center; gap: 6px; padding: 6px 10px; background: #2b2b2b; color: #eee; flex: none; }
header .logo { color: #c9f23d; text-decoration: none; font-weight: 700; margin-inline-end: 6px; }
header .title { font-weight: 800; color: #fff; margin-inline-end: 10px; }
header button { background: #3c3c3c; color: #eee; border: 1px solid #4a4a4a; border-radius: 4px; padding: 5px 10px; font: inherit; cursor: pointer; }
header button:hover, header button:focus-visible { background: #4b4b4b; }
header button:disabled { opacity: .4; cursor: default; }
header .sep { width: 1px; height: 20px; background: #555; margin: 0 4px; }
#msg { margin-inline-start: auto; color: #9fd29f; font-weight: 700; }
main { flex: 1; display: flex; min-height: 0; }
aside { width: 240px; flex: none; background: #f6f6f8; border-inline-end: 1px solid #c4c4cc; overflow-y: auto; }
body.noside aside { display: none; }
#list { list-style: none; margin: 0; padding: 0; }
#list li { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #e4e4e8; display: flex; gap: 8px; align-items: center; }
#list li:hover { background: #e7eefb; }
#list li.sel { background: #1b88e7; color: #fff; }
#list li.dir { background: #ddd; font-weight: 800; cursor: default; color: #333; font-size: 13px; }
#list li .ok { margin-inline-start: auto; }
.progress { padding: 10px 12px; color: #555; font-size: 13px; margin: 0; }
#stage { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12px; padding: 14px; overflow: auto; }
#hint { display: flex; gap: 12px; align-items: flex-start; background: #fffbe6; border: 1px solid #e0c96a; border-radius: 8px; padding: 12px 16px; box-shadow: 0 2px 8px rgba(0,0,0,.12); max-width: 900px; width: 100%; margin: 0 auto; }
#hint[hidden] { display: none; }
#hint > div { flex: 1; }
#hint b { font-size: 16px; }
#hint p { margin: 6px 0 0; line-height: 1.55; font-size: 15px; }
#hint-close { background: none; border: none; font-size: 16px; cursor: pointer; color: #666; }
#work { max-width: 900px; width: 100%; margin: 0 auto; }
#done { max-width: 900px; width: 100%; margin: 0 auto; display: flex; gap: 12px; align-items: center; justify-content: space-between; background: #e8f9d4; border: 2px solid #100f1a; border-radius: 10px; padding: 12px 16px; font-weight: 800; font-size: 16px; }
#done[hidden] { display: none; }
#done button, .btn { background: #c9f23d; color: #100f1a; border: 2px solid #100f1a; border-radius: 8px; padding: 7px 14px; font: inherit; font-weight: 800; cursor: pointer; box-shadow: 2px 2px 0 #100f1a; }
.btn.ghost { background: #fff; }
.btn:active { transform: translate(1px,1px); box-shadow: 1px 1px 0 #100f1a; }
footer { flex: none; display: flex; justify-content: space-between; gap: 12px; padding: 4px 10px; background: #2b2b2b; color: #bbb; font-size: 12px; }
footer .help { color: #888; }
.card { background: #fff; border: 1px solid #c4c4cc; border-radius: 10px; padding: 14px; }
.row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.muted { color: #666; }
.big { font-size: 22px; font-weight: 800; }
.ltr { direction: ltr; unicode-bidi: isolate; }
@keyframes shake { 0%,100%{transform:none} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }
.shake { animation: shake .3s 2; }

/* bits */
.bits { display: grid; grid-template-columns: repeat(8, minmax(0,1fr)); gap: 8px; direction: ltr; margin: 10px 0; }
.bit { border: 2px solid #100f1a; border-radius: 10px; background: #f2f2f4; padding: 8px 0; text-align: center; cursor: pointer; font: inherit; }
.bit .v { display: block; font-size: 22px; font-weight: 900; }
.bit .w { display: block; font-size: 12px; color: #666; }
.bit.on { background: #c9f23d; }
.lamp { width: 46px; height: 46px; border-radius: 50%; border: 3px solid #100f1a; background: #333; transition: background .1s, box-shadow .1s; }
.lamp.on { background: #ffe34d; box-shadow: 0 0 22px #ffd400; }

/* network */
.net { width: 100%; height: auto; display: block; background: #fbfbfd; border: 1px solid #c4c4cc; border-radius: 10px; touch-action: manipulation; }
.dev { cursor: pointer; }
.dev rect, .dev circle { stroke: #100f1a; stroke-width: 2.5; }
.dev.sel rect { stroke: #1b88e7; stroke-width: 4; }
.dev text { font: 700 13px "Segoe UI", Arial, sans-serif; fill: #100f1a; }
.dev .ip { font: 600 12px Consolas, monospace; fill: #444; }
.cable { stroke: #1b1b22; stroke-width: 3; }
.cable.pending { stroke: #1b88e7; stroke-dasharray: 6 5; }
.pkt { fill: #ff7a00; stroke: #100f1a; stroke-width: 2; }
.panel { margin-top: 12px; display: grid; gap: 10px; }
.panel label { display: flex; gap: 8px; align-items: center; }
.panel input { font: 15px Consolas, monospace; padding: 6px 8px; border: 1px solid #999; border-radius: 6px; width: 170px; direction: ltr; }
.log { background: #100f1a; color: #d7ffd0; font: 13px/1.45 Consolas, monospace; border-radius: 8px; padding: 10px; min-height: 90px; white-space: pre-wrap; unicode-bidi: plaintext; text-align: start; max-height: 220px; overflow: auto; }

/* CLI */
.term { background: #0c0c0c; color: #e6e6e6; font: 14px/1.45 Consolas, "Courier New", monospace; border-radius: 10px; padding: 12px; height: 380px; overflow: auto; direction: ltr; text-align: left; white-space: pre-wrap; cursor: text; }
.term .in { display: flex; }
.term input { flex: 1; background: transparent; border: none; outline: none; color: #fff; font: inherit; padding: 0; margin: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; direction: ltr; }
.chips button { font: 13px Consolas, monospace; background: #fff; border: 1px solid #999; border-radius: 6px; padding: 4px 8px; cursor: pointer; }

/* layers */
.stackrow { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.hdr { border: 2px solid #100f1a; border-radius: 8px; padding: 8px 12px; font-weight: 800; cursor: pointer; background: #fff; }
.hdr.l7 { background: #ffe9a8; } .hdr.l4 { background: #c9e8ff; } .hdr.l3 { background: #d8f5c0; } .hdr.l2 { background: #ffd0d0; }
.pkg { display: inline-flex; align-items: stretch; border-radius: 10px; margin: 12px 0; direction: ltr; max-width: 100%; flex-wrap: nowrap; overflow-x: auto; }
.pkg span { border: 2px solid #100f1a; padding: 10px 10px; font: 700 13px Consolas, monospace; white-space: nowrap; }
.pkg span + span { border-left: none; }
.pkg .d { background: #ffe9a8; } .pkg .t { background: #c9e8ff; } .pkg .i { background: #d8f5c0; } .pkg .e { background: #ffd0d0; }
.osi { list-style: none; padding: 0; margin: 10px 0; display: grid; gap: 6px; max-width: 460px; }
.osi li { display: flex; gap: 8px; align-items: center; background: #fff; border: 2px solid #100f1a; border-radius: 8px; padding: 6px 10px; font-weight: 700; }
.osi li.pick { background: #c9f23d; }
.osi li .n { margin-inline-start: auto; color: #666; font-weight: 600; }
.osi button { background: #eee; border: 1px solid #999; border-radius: 6px; cursor: pointer; padding: 2px 8px; font: inherit; }

@media (max-width: 760px) {
  main { flex-direction: column; }
  aside { width: auto; max-height: 34vh; border-inline-end: none; border-bottom: 1px solid #c4c4cc; }
  .bits { gap: 4px; } .bit .v { font-size: 18px; }
  .term { height: 300px; font-size: 13px; }
}
#hint code { font: 13.5px Consolas, monospace; background: #fff3c2; border: 1px solid #e6d27a; border-radius: 4px; padding: 0 4px; white-space: nowrap; }
@media (max-width: 600px) { #hint code { white-space: normal; overflow-wrap: anywhere; } }

/* quiz (episode 4) */
.quiz { display: grid; gap: 14px; }
.q { border: 1px solid #ddd; border-radius: 10px; padding: 10px 12px; }
.q.solved { background: #f1fbe6; border-color: #9ccc65; }
.opts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.opt { background: #fff; border: 2px solid #100f1a; border-radius: 8px; padding: 6px 12px; font: inherit; font-weight: 700; cursor: pointer; }
.opt.right { background: #c9f23d; } .opt.wrong { background: #ffd0d0; text-decoration: line-through; }
.fb { margin: 6px 0 0; color: #333; }

/* logic gates */
.gateplay { gap: 12px; margin: 8px 0 14px; } .gateplay .bit { width: 92px; }
.gatebox { border: 3px solid #100f1a; border-radius: 12px 40px 40px 12px; background: #c9e8ff; padding: 16px 22px; font: 900 20px Consolas, monospace; direction: ltr; }
.tt { border-collapse: collapse; margin: 6px 0; } .tt th, .tt td { border: 2px solid #100f1a; padding: 6px 16px; text-align: center; font: 700 16px Consolas, monospace; }
.tt th { background: #eee; font-family: inherit; } .tt tr.now td { background: #fff7c9; }
.ttc { font: 900 16px Consolas, monospace; width: 44px; height: 32px; border: 2px solid #100f1a; border-radius: 6px; background: #fff; cursor: pointer; }
.ttc.bad { background: #ffd0d0; }

.ytlink { display: inline-block; font-weight: 800; color: #100f1a; background: #ffd0d0; border: 2px solid #100f1a; border-radius: 8px; padding: 3px 10px; text-decoration: none; }
header .hlink { color: #ffb3b3; text-decoration: none; font-weight: 700; margin-inline-start: 6px; }
header .hlink:hover { text-decoration: underline; }

.simbox { height: 440px; border: 1px solid #c4c4cc; border-radius: 10px; overflow: hidden; background: #fbf7ee; touch-action: none; }
@media (max-width: 760px) { .simbox { height: max(380px, 62vh); } }

/* 4-bit adder task line above the circuit: fixed height so the circuit never jumps under the finger */
.sumsmsg { font-size: 17px; line-height: 1.35; min-height: 5.5em; }
@media (max-width: 600px) { .sumsmsg { font-size: 15px; line-height: 1.35; min-height: 9.5em; } }