/* ===================== Unplugged — φύλλα εργασίας (js/unplugged.js) ===================== */
/* Χρησιμοποιεί τις σελίδες εκτύπωσης (.pr-page, #print-root) από το cards.css */

.un-wrap { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; }
.un-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; background: rgba(255,255,255,.9); border-radius: 14px; padding: 6px 10px; box-shadow: 0 3px 10px rgba(72,96,150,.12), inset 0 0 0 2px #fff; }
.un-types { display: flex; flex-wrap: wrap; gap: 5px; }
.un-type {
  font-family: inherit; font-size: 14px; font-weight: 700; color: #455a64; background: #fff; border: 2px solid #cfd8dc; border-radius: 999px;
  height: 34px; padding: 0 12px 0 8px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; line-height: 1;
  transition: background .15s, border-color .15s, transform .1s;
}
.un-type .e { font-size: 17px; }
.un-type:hover { border-color: var(--c); transform: translateY(-1px); }
.un-type.on { background: var(--c); border-color: var(--c); color: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.18); }
.un-bar2 { gap: 6px 8px; }
.un-lbl { font-size: 12px; font-weight: 700; color: #607d8b; display: inline-flex; align-items: center; gap: 5px; }
.un-title { font-family: inherit; font-size: 15px; font-weight: 700; color: #37474f; height: 32px; width: 230px; border: 2px solid #cfd8dc; border-radius: 9px; padding: 0 8px; user-select: text; -webkit-user-select: text; }
.un-title:focus { outline: none; border-color: #795548; }
.un-btn {
  font-family: inherit; font-size: 14px; font-weight: 700; color: #37474f; background: #fff; border: 2px solid #cfd8dc; border-radius: 9px;
  height: 32px; padding: 0 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; line-height: 1; transition: background .15s, border-color .15s, transform .1s;
}
.un-btn:hover { border-color: #795548; transform: translateY(-1px); }
.un-btn.go { background: #8d6e63; border-color: #6d4c41; color: #fff; font-size: 15px; padding: 0 14px; height: 34px; margin-left: auto; }
.un-btn.go:hover { background: #6d4c41; }
.un-btn.go:disabled { background: #eceff1; border-color: #cfd8dc; color: #b0bec5; cursor: default; transform: none; }
.un-check { font-size: 13px; font-weight: 700; color: #607d8b; display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }
.un-check input { width: 16px; height: 16px; accent-color: #795548; cursor: pointer; }
.un-count { font-size: 13px; font-weight: 800; color: #90a4ae; }
.un-count.on { color: #2e7d32; }
.un-desc { font-size: 13px; font-weight: 600; color: #546e7a; padding: 0 4px; }
.un-desc b { color: #4e342e; }

/* ---- λίστα ασκήσεων ---- */
.un-list { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 10px; padding: 2px 4px 8px; align-content: start; }
.un-card { position: relative; background: #fff; border: 3px solid #e0e0e0; border-radius: 14px; padding: 6px; cursor: pointer; box-shadow: 0 2px 8px rgba(72,96,150,.1); transition: border-color .15s, transform .1s; }
.un-card:hover { border-color: #a1887f; transform: translateY(-2px); }
.un-card.on { border-color: #6d4c41; background: #fff8e1; }
.un-card-h { font-size: 13px; font-weight: 700; color: #4e342e; padding: 0 26px 4px 2px; line-height: 1.2; }
.un-card-h i { font-style: normal; font-size: 10px; color: #ffa000; }
.un-card-pick { position: absolute; top: 6px; right: 6px; z-index: 2; cursor: pointer; }
.un-card-pick input { width: 20px; height: 20px; accent-color: #6d4c41; cursor: pointer; }
.un-card-prev { height: 150px; overflow: hidden; background: #fafafa; border-radius: 8px; box-shadow: inset 0 0 0 1px #eceff1; display: block; }
.un-card-prev .un-paper { transform-origin: top left; width: max-content; padding: 3px; }

/* ---- προεπισκόπηση μιας άσκησης ---- */
.un-prev-paper { background: #fff; border-radius: 10px; box-shadow: 0 3px 14px rgba(0,0,0,.18); padding: 8px 10px; max-height: 52vh; overflow: auto; text-align: left; }
.un-prev-ans { background: #e8f5e9; border-radius: 10px; padding: 6px 10px; margin-top: 8px; text-align: left; max-height: 30vh; overflow: auto; }
.un-prev-ans h3 { margin: 0 0 4px; font-size: 15px; color: #2e7d32; }
.un-prev-ans.hidden { display: none; }
.un-prev-pages { max-height: 56vh; overflow: auto; align-items: flex-start; }

/* ---- το χαρτί: κοινό ύφος σε προεπισκόπηση & εκτύπωση ---- */
.un-page { position: relative; color: #000; font-family: inherit; box-sizing: border-box; display: block; text-align: left; }
.un-head { border-bottom: 2px solid #37474f; padding-bottom: 2mm; margin-bottom: 3mm; }
.un-head-t { font-size: 5mm; font-weight: 800; color: #263238; margin-bottom: 2mm; text-align: center; }
.un-head-t small { font-size: 3.2mm; font-weight: 600; color: #78909c; }
.un-head-f { display: flex; gap: 5mm; font-size: 3.4mm; font-weight: 700; color: #455a64; }
.un-head-f span { display: flex; align-items: flex-end; gap: 1mm; flex: 1; }
.un-head-f span:first-child { flex: 2; }
.un-head-f u { flex: 1; border-bottom: .4mm dotted #607d8b; text-decoration: none; height: 4mm; }
.un-head-f u.s { max-width: 22mm; }

.un-ex { break-inside: avoid; page-break-inside: avoid; border: .4mm solid #b0bec5; border-radius: 2mm; padding: 2mm 2.5mm; margin-bottom: 4mm; background: #fff; }
.un-ex.ans { border-color: #a5d6a7; background: #f1f8e9; }
.un-ex-h { font-size: 3.6mm; font-weight: 600; color: #263238; line-height: 1.3; margin-bottom: 2mm; }
.un-ex-h b { color: #6d4c41; font-size: 4.2mm; }
.un-ex-b { font-size: 3.4mm; color: #263238; line-height: 1.35; }
.un-p { margin: 1.5mm 0; }
.un-note { margin: 1.5mm 0; }

/* πλέγμα λαβυρίνθου */
.un-grid { display: inline-grid; gap: 0; border: .5mm solid #455a64; background: #455a64; line-height: 1; }
.un-cell { position: relative; background: #fff; box-shadow: inset 0 0 0 .15mm #b0bec5; display: flex; align-items: center; justify-content: center; }
.un-cell.wall { background: #cfd8dc; box-shadow: inset 0 0 0 .15mm #90a4ae; }
.un-cell.path { background: #fff59d; }
.un-cell i { position: absolute; top: .2mm; left: .5mm; font-style: normal; font-size: .55em; font-weight: 800; color: #ef6c00; }
.un-cell u { position: absolute; bottom: -.3mm; right: .3mm; font-size: .5em; text-decoration: none; }

/* κουτάκια για συμπλήρωση */
.un-boxes { display: flex; flex-wrap: wrap; gap: 1.5mm; margin: 2mm 0; }
.un-box { position: relative; border: .4mm solid #546e7a; border-radius: 1.2mm; background: #fff; display: inline-flex; align-items: center; justify-content: center; line-height: 1; box-sizing: border-box; }
.un-box i { position: absolute; top: .2mm; left: .6mm; font-style: normal; font-size: .45em; font-weight: 700; color: #b0bec5; }
.un-box.fixed { background: #eceff1; border-style: solid; }
.un-box.empty { border-style: dashed; }
.un-box.word { font-size: .42em; font-weight: 800; white-space: nowrap; letter-spacing: -.02em; }

/* υπόμνημα εντολών (ό,τι πρέπει να συμπληρώσει ο μαθητής, και έξω από την εκφώνηση) */
.un-legend { border: .4mm dashed #546e7a; border-radius: 2mm; background: #eceff1; padding: 1.2mm 2mm; margin: 0 0 2.5mm; font-size: 3.1mm; line-height: 1.25;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1mm 4mm; break-inside: avoid; }
.un-legend > b { color: #37474f; }
.un-legend span { display: inline-flex; align-items: baseline; gap: 1.2mm; }
.un-legend i { font-style: normal; font-size: 4.2mm; font-weight: 800; color: #263238; }

/* αριθμός σελίδας (κάτω δεξιά) */
.un-pgno { position: absolute; right: 12mm; bottom: 4mm; font-size: 3.4mm; font-weight: 700; color: #78909c; }

/* γραμμούλες & γραμμές */
.un-blank { display: inline-block; border-bottom: .4mm dotted #607d8b; height: 4mm; vertical-align: bottom; }
.un-blank.filled { border-bottom: 0; font-weight: 800; color: #1b5e20; min-width: 0; height: auto; }
.un-lines { margin: 1mm 0 0; padding-left: 6mm; }
.un-lines li { margin-bottom: 4mm; border-bottom: .3mm dotted #90a4ae; min-height: 5mm; }
.un-lines li b { font-weight: 700; color: #1b5e20; }
.un-lines.wide li { border-bottom: 0; margin-bottom: 2mm; }
.un-ans-line { display: inline-block; width: 100%; }
.un-ans-list { margin: 1mm 0; padding-left: 6mm; }
.un-ans-list li { margin-bottom: 1mm; }
.un-note { font-size: 3mm; color: #607d8b; font-style: italic; }
.un-q { display: block; margin: 2mm 0; }
.un-bank { border: .4mm dashed #7e57c2; border-radius: 2mm; padding: 1.5mm 2mm; background: #f3e5f5; font-size: 3.2mm; font-weight: 700; color: #4527a0; }

/* βήματα σε σειρά */
.un-steps { list-style: none; margin: 1mm 0; padding: 0; }
.un-steps li { display: flex; align-items: center; gap: 2mm; margin-bottom: 2mm; }
.un-num { display: inline-block; width: 7mm; height: 7mm; border: .4mm solid #546e7a; border-radius: 50%; flex: none; }
.un-num.filled { line-height: 7mm; text-align: center; font-weight: 800; color: #1b5e20; }

/* διάλεξε τη σωστή συνέχεια */
.un-pick { list-style: none; margin: 1mm 0; padding: 0; }
.un-pick li { margin-bottom: 2.5mm; }
.un-pick span { display: inline-block; border: .4mm solid #90a4ae; border-radius: 4mm; padding: .5mm 2mm; margin: 0 1mm; }
.un-pick span.ok { border-color: #2e7d32; background: #c8e6c9; font-weight: 700; }
.un-pick em { color: #90a4ae; font-style: normal; }

/* ένωσε με γραμμή */
.un-match { display: flex; gap: 20mm; justify-content: space-between; }
.un-match ul { list-style: none; margin: 0; padding: 0; flex: 1; }
.un-match li { border: .4mm solid #90a4ae; border-radius: 2mm; padding: 1mm 2mm; margin-bottom: 2.5mm; background: #fff; }
.un-match ul:last-child li { background: #fffde7; }

/* πίνακας */
.un-tbl { border-collapse: collapse; width: 100%; margin: 2mm 0; font-size: 3.3mm; }
.un-tbl th, .un-tbl td { border: .4mm solid #90a4ae; padding: 1.2mm 2mm; text-align: left; }
.un-tbl th { background: #eceff1; font-weight: 800; }
.un-tbl td:last-child { height: 7mm; }

/* μπλοκ προγράμματος */
.un-prog { margin: 2mm 0; }
.un-blk { border: .4mm solid #546e7a; border-radius: 1.5mm; padding: 1mm 2mm; margin-bottom: 1.2mm; background: #eceff1; display: block; min-height: 5mm; }
.un-blk.hat { background: #fff9c4; border-color: #f9a825; border-radius: 3mm 3mm 1.5mm 1.5mm; font-weight: 700; }
.un-blk.rep { background: #b2dfdb; border-color: #00796b; }
.un-blk.if { background: #e1bee7; border-color: #7b1fa2; }
.un-blk.proc { background: #d7ccc8; border-color: #5d4037; font-weight: 700; }
.un-blk.call { background: #d7ccc8; border-color: #5d4037; font-weight: 700; }
.un-blk.wrap { padding: 1mm 1.5mm; }
.un-blk-top, .un-blk-mid { font-weight: 700; padding: .4mm 0; }
.un-blk-body { border-left: 1.5mm solid rgba(0,0,0,.18); margin: 1mm 0 1mm 2mm; padding-left: 2mm; }
.un-blk-body .un-blk { background: #fff; }
.un-blk-end { height: 1.5mm; }

/* δύο στήλες (πλέγμα + κουτάκια) */
.un-cols { display: flex; gap: 5mm; align-items: flex-start; flex-wrap: wrap; }
.un-cols > div { min-width: 0; }
.un-logo { display: block; }

/* κρυφό δοχείο μέτρησης ύψους */
.un-measure { position: absolute; left: -9999px; top: 0; visibility: hidden; color: #000; }

@media print {
  .un-page { font-family: Arial, Helvetica, sans-serif; }
  .un-ex { background: #fff !important; }
}

/* κινητό: πιο στενές κάρτες */
html.mobile .un-list { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
html.mobile .un-title { width: 150px; }

/* διάφορα μικρά */
.un-big { font-size: 7mm; vertical-align: middle; }
.un-facts { margin: 1mm 0; padding-left: 5mm; }
.un-facts li { margin-bottom: 1mm; }

/* πλατύτερα παράθυρα για το χαρτί */
.modal.modal-un { max-width: 940px; padding: 20px 26px 24px; }
.un-pg-box { overflow: hidden; flex: none; }
.un-pg-box > div { transform-origin: top left; }
