/* ══ PLAYFUL CLASSROOM THEME ══ Palette: ink #2d2a4a · purple #6c5ce7 · green #00b894 · orange #ff9f43 · pink #EC3C78 · sky #54a0ff Font: Nunito (loaded in each page ); UI font SIZES kept from the original design. NOTE: diagram SVG text is untouched — every label sets font-family/size inline. */ /* ── RESET ── */ *{box-sizing:border-box;margin:0;padding:0} body{font-family:'Nunito','Verdana',sans-serif;font-size:13px;background:#fffdf5;color:#2d2a4a} /* ── MENU ── */ .menu{display:flex;flex-direction:column;align-items:center;gap:20px;padding:0 20px 48px;min-height:100vh} /* Top bar — gives the builder the site logo and a way back out (it was a dead end). */ .menu-nav{width:100%;max-width:1000px;display:flex;align-items:center;justify-content:space-between;padding:16px 0 4px} .menu-nav .menu-logo{height:36px;display:block} .menu-nav a{color:#7b7894;font-weight:800;font-size:13px;text-decoration:none;transition:color .15s} .menu-nav a:hover{color:#6c5ce7} /* Hero — what this thing actually does, shown rather than described. */ .menu-hero{width:100%;max-width:1000px;background:#fff;border:2.5px solid #2d2a4a;border-radius:20px;box-shadow:6px 6px 0 #e0f7f1;padding:22px 26px;display:flex;align-items:center;gap:26px} .menu-hero-text{flex:1;min-width:220px} .menu-hero-text h2{font-size:22px;font-weight:900;color:#2d2a4a;margin-bottom:7px;text-align:left} .menu-hero-text p{font-size:13px;color:#7b7894;font-weight:700;line-height:1.6} .menu-hero-video{width:44%;max-width:400px;flex-shrink:0;border-radius:12px;border:2px solid #efecff;overflow:hidden;background:#fffdf5;display:block} .menu-hero-video video{width:100%;display:block} @media (max-width:820px){.menu-hero{flex-direction:column}.menu-hero-video{width:100%}} .menu h2{font-size:22px;font-weight:900;color:#2d2a4a} /* Section label above each band of cards */ .menu-sec{width:100%;max-width:1000px;font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#7b7894;margin-bottom:-8px} .menu-cards{display:flex;gap:16px;flex-wrap:wrap;justify-content:center;align-items:stretch} .menu-card{background:#fff;border:2.5px solid #2d2a4a;border-radius:18px;padding:16px 16px 18px;cursor:pointer;transition:transform .18s,box-shadow .18s;text-align:center;width:210px;box-shadow:5px 5px 0 #efecff;display:flex;flex-direction:column} .menu-card:hover{transform:translateY(-4px) rotate(-.4deg);box-shadow:7px 7px 0 #efecff} /* 5 colours, 5-step cycle. (Was a 6-step cycle over 5 colours, which put two default-purple cards next to each other at positions 6 and 7.) */ .menu-card:nth-child(5n+2){box-shadow:5px 5px 0 #e0f7f1} .menu-card:nth-child(5n+2):hover{box-shadow:7px 7px 0 #e0f7f1} .menu-card:nth-child(5n+3){box-shadow:5px 5px 0 #fff1e0} .menu-card:nth-child(5n+3):hover{box-shadow:7px 7px 0 #fff1e0} .menu-card:nth-child(5n+4){box-shadow:5px 5px 0 #e5f1ff} .menu-card:nth-child(5n+4):hover{box-shadow:7px 7px 0 #e5f1ff} .menu-card:nth-child(5n+5){box-shadow:5px 5px 0 #ffe6ef} .menu-card:nth-child(5n+5):hover{box-shadow:7px 7px 0 #ffe6ef} .menu-card svg{width:100%;height:auto;display:block;margin-bottom:9px} .menu-card h3{font-size:15px;font-weight:900;margin-bottom:6px;color:#2d2a4a} .menu-card p{font-size:12px;color:#7b7894;font-weight:600;line-height:1.55} .menu-info{font-size:13px;color:#7b7894;font-weight:700} /* Controls toolbar — separates "what am I building" from "what do I do with it". */ .menu-tools{width:100%;max-width:640px;background:#fff;border:2.5px solid #2d2a4a;border-radius:18px;box-shadow:5px 5px 0 #efecff;padding:16px 18px;display:flex;flex-direction:column;align-items:center;gap:10px} .menu-btns{display:flex;gap:10px;flex-wrap:wrap;justify-content:center} /* ── BUILDER LAYOUT ── */ .builder{display:none} .builder.active{display:flex;min-height:100vh} /* Grid so the diagram spans full width but the control groups pair up two-per-row, which keeps the Reset button on screen even with a large diagram. */ .diag-panel{background:#fff;padding:16px;display:grid;grid-template-columns:1fr 1fr;gap:10px;align-content:start;width:33vw;min-width:180px;max-width:65vw;flex-shrink:0;overflow-y:auto} .diag-panel > .btn-back, .diag-panel > svg, .diag-panel > .table-preview, .diag-panel > .btn{grid-column:1 / -1} .diag-panel > .diag-ctrl-group{margin-bottom:0} @media (max-width:1100px){.diag-panel{grid-template-columns:1fr}} .resizer{width:5px;background:#e4e2f4;cursor:col-resize;flex-shrink:0;transition:background .15s} .resizer:hover,.resizer.dragging{background:#6c5ce7} .form-panel{background:#fffdf5;padding:20px;overflow-y:auto;flex:1;min-width:220px} /* ── CARDS ── */ .card{background:#fff;border:2px solid #e4e2f4;border-radius:16px;padding:16px} .card-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#7b7894;margin-bottom:12px} .info-card{background:#e5f1ff;border:2px solid #a8d0ff;border-radius:16px;padding:14px} .info-card p{font-size:12px;color:#1d5fae;font-weight:600;line-height:1.7} .step{display:inline-block;background:#54a0ff;color:#fff;border-radius:50%;width:18px;height:18px;font-size:10px;font-weight:900;text-align:center;line-height:18px;margin-right:6px} .cap-card{background:#e0f7f1;border:2px solid #00b894;border-radius:16px;padding:14px;display:none} .cap-card p{font-size:12px;color:#00795f;font-weight:700} /* ── FORM COLUMNS ── */ .form-cols{display:flex;gap:14px;align-items:flex-start} .form-col-narrow{flex:1;display:flex;flex-direction:column;gap:14px} .form-col-wide{flex:3;display:flex;flex-direction:column;gap:14px} /* ── FORM ELEMENTS ── */ .field{display:flex;align-items:center;gap:10px;margin-bottom:10px} .field label{font-size:13px;color:#2d2a4a;min-width:80px;flex-shrink:0;font-weight:700} .field input[type=text], .field input[type=number]{flex:1;font-size:13px;font-family:'Nunito','Verdana',sans-serif;font-weight:600;padding:8px 10px;border:2px solid #e4e2f4;border-radius:10px;background:#fff;color:#2d2a4a;outline:none} .field input[type=text]:focus, .field input[type=number]:focus{border-color:#6c5ce7} .field input[type=color]{width:40px;height:32px;padding:2px;border:2px solid #e4e2f4;border-radius:10px;cursor:pointer} textarea{width:100%;font-size:13px;font-family:'Nunito','Verdana',sans-serif;font-weight:600;padding:10px 12px;border:2px solid #e4e2f4;border-radius:10px;background:#fff;color:#2d2a4a;resize:vertical;min-height:80px;outline:none;line-height:1.6} textarea:focus{border-color:#6c5ce7} textarea::placeholder{color:#b9b6cf;font-weight:600} /* ── ANSWER ROWS ── */ .arow{display:flex;align-items:center;gap:10px;margin-bottom:8px} .arow input[type=radio]{width:16px;height:16px;accent-color:#00b894;flex-shrink:0;cursor:pointer} .arow .alabel{font-size:13px;font-weight:900;color:#6c5ce7;width:20px;flex-shrink:0} .arow input[type=text]{flex:1;font-size:13px;font-family:'Nunito','Verdana',sans-serif;font-weight:600;padding:8px 10px;border:2px solid #e4e2f4;border-radius:10px;background:#fff;color:#2d2a4a;outline:none} .arow input[type=text]:focus{border-color:#00b894} .correct-hint{font-size:11px;color:#7b7894;font-weight:600;margin-bottom:10px} /* ── BUTTONS ── */ .btn{font-family:'Nunito','Verdana',sans-serif;font-size:12px;font-weight:800;padding:8px 14px;border-radius:10px;cursor:pointer;border:2px solid #e4e2f4;background:#fff;color:#2d2a4a;transition:all .15s;box-shadow:0 2px 0 #e4e2f4} .btn:hover{background:#efecff;border-color:#6c5ce7;box-shadow:0 2px 0 #cfc8f5} .btn:active{transform:translateY(2px);box-shadow:0 0 0 transparent} .btn:disabled{opacity:0.4;cursor:not-allowed} .btn-primary{background:#6c5ce7;color:#fff;border-color:#6c5ce7;box-shadow:0 3px 0 #5346c4} .btn-primary:hover{background:#5b4bd5;border-color:#5b4bd5;box-shadow:0 3px 0 #5346c4;color:#fff} .btn-success{background:#00b894;color:#fff;border-color:#00b894;box-shadow:0 3px 0 #00997e} .btn-success:hover{background:#02a888;border-color:#02a888;box-shadow:0 3px 0 #00997e;color:#fff} .btn-capture{background:#fff;color:#2d2a4a;border:2.5px solid #2d2a4a;width:100%;font-size:13px;padding:10px;margin-top:4px;box-shadow:0 3px 0 #2d2a4a} .btn-capture:hover{background:#2d2a4a;color:#fff;border-color:#2d2a4a;box-shadow:0 3px 0 #2d2a4a} /* Back to menu — a card, not a footnote. One rule, inherited by all 9 builders. */ .btn-back{justify-self:start;display:inline-flex;align-items:center;gap:8px;background:#fff;border:2.5px solid #2d2a4a;border-radius:13px;color:#2d2a4a;font-family:'Nunito','Verdana',sans-serif;font-size:13px;font-weight:900;cursor:pointer;padding:9px 17px;text-decoration:none;box-shadow:3px 3px 0 #efecff;transition:transform .14s,box-shadow .14s,background .14s,border-color .14s,color .14s} .btn-back:hover{background:#efecff;border-color:#6c5ce7;color:#6c5ce7;box-shadow:5px 5px 0 #cfc8f5;transform:translateY(-2px)} .btn-back:active{transform:translateY(0);box-shadow:2px 2px 0 #cfc8f5} .btn-danger{background:#ffe6ef;color:#c2185b;border-color:#f8a5c8;font-size:11px;padding:3px 8px;box-shadow:0 2px 0 #f8a5c8} .btn-row{display:flex;gap:8px;flex-wrap:wrap} /* ── MENU QUIZ BOX ── */ .menu-quiz{background:#fff;border:2.5px solid #2d2a4a;border-radius:18px;padding:16px;width:100%;max-width:580px;box-shadow:5px 5px 0 #e0f7f1} .menu-quiz-title{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#7b7894;margin-bottom:10px} .menu-qlist{display:flex;flex-direction:column;gap:5px;max-height:220px;overflow-y:auto} /* ── ADD BAR (bottom of each builder) ── */ .add-bar{display:flex;flex-direction:column;gap:6px;padding-top:4px} /* ── DIAGRAM CONTROLS ── */ .diag-ctrl-group{background:#fffdf5;border:2px solid #e4e2f4;border-radius:14px;padding:10px 12px;margin-bottom:8px} .diag-ctrl-label{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;color:#6c5ce7;margin-bottom:8px} /* ── QUIZ LIST ── */ .qlist{max-height:120px;overflow-y:auto;display:flex;flex-direction:column;gap:4px;margin-bottom:10px} .qitem{display:flex;align-items:center;gap:8px;padding:6px 10px;background:#fff;border:2px solid #efecff;border-radius:10px;font-size:12px} .qitem span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2d2a4a;font-weight:600} .hint{font-size:11px;color:#7b7894;font-weight:600} .msg{font-size:12px;color:#7b7894;font-weight:700;min-height:16px;margin-top:4px} .sep{border:none;border-top:2px dashed #e4e2f4;margin:4px 0} /* ── TABLE PREVIEW (left panel in table builder) ── */ .table-preview{padding:16px;overflow-x:auto;flex:1;display:flex;flex-direction:column} .tbl-preview-wrap{display:flex;flex-direction:column;align-items:center;gap:10px} .tbl-preview-title{font-size:13px;font-weight:800;color:#2d2a4a;text-align:center} .tbl-preview-table{border-collapse:collapse;width:100%;font-size:12px;font-family:'Nunito','Verdana',sans-serif;border:2px solid #6c5ce7;border-radius:8px} .tbl-preview-table th{background:#6c5ce7;color:#fff;padding:8px 12px;text-align:center;font-size:11px;font-weight:800} .tbl-preview-table td{padding:6px 12px;text-align:center;border:1px solid #e4e2f4;color:#2d2a4a;font-weight:600} .tbl-preview-table tr:nth-child(even) td{background:#fbfaff} /* ── TABLE DATA ENTRY GRID ── */ .tbl-data-grid{display:grid;gap:5px 7px} .tbl-hdr-inp{font-weight:800 !important;background:#efecff !important;border-color:#cfc8f5 !important} /* ── PLAIN BUILDER (full-width, centred) ── */ #plainBuilder{justify-content:center} .plain-form-panel{max-width:620px;width:100%;padding:28px 20px;display:flex;flex-direction:column;overflow-y:auto} /* ── SCHEDULE GRID (PPF data-point entry) ── */ .sched-grid{display:grid;grid-template-columns:24px 1fr 1fr;gap:5px 8px;align-items:center} .sched-hdr{font-size:11px;font-weight:900;color:#7b7894;padding-bottom:2px} .sched-num{font-size:11px;color:#7b7894;font-weight:700;text-align:center} .sched-inp{font-size:12px;font-family:'Nunito','Verdana',sans-serif;font-weight:600;padding:5px 7px;border:2px solid #e4e2f4;border-radius:8px;width:100%;outline:none;background:#fff;color:#2d2a4a} .sched-inp:focus{border-color:#6c5ce7} /* ── EDIT MODAL ── */ .modal-card{position:relative;background:#fff;border:2.5px solid #2d2a4a;border-radius:20px;padding:28px;width:440px;max-width:92vw;z-index:1;box-shadow:8px 8px 0 #efecff} .modal-title{font-size:15px;font-weight:900;color:#2d2a4a;margin-bottom:8px} .modal-qtext{font-size:12px;color:#7b7894;font-weight:600;margin-bottom:16px;line-height:1.6;font-style:italic;background:#fffdf5;border-radius:10px;padding:9px 11px;border:2px solid #e4e2f4} .modal-label{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:#6c5ce7;margin-bottom:8px} .modal-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .modal-type-grid .btn{padding:10px 12px;font-size:12px;text-align:center;width:100%} /* ── QITEM EDIT BUTTONS ── */ .qitem-text{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#2d2a4a;font-weight:600;display:flex;align-items:center;gap:5px} .qitem-btns{display:flex;gap:5px;flex-shrink:0} .btn-sm{padding:3px 8px !important;font-size:11px !important} .btn-edit{background:#fff1e0 !important;color:#c96f00 !important;border-color:#ffd6a3 !important} .btn-edit:hover{background:#ffd6a3 !important} .qtype-tag{font-size:10px;font-weight:900;color:#6c5ce7;background:#efecff;border:1px solid #cfc8f5;border-radius:6px;padding:1px 5px;flex-shrink:0;font-style:normal} /* ── DICTATION MIC (added to each Question Text header by js/dictate.js) ── */ .mic-btn{font-family:'Nunito','Verdana',sans-serif;font-size:12px;line-height:1;padding:5px 9px;border:2px solid #e4e2f4;background:#fff;border-radius:10px;cursor:pointer;color:#2d2a4a;transition:all .15s;flex-shrink:0;text-transform:none;letter-spacing:normal} .mic-btn:hover:not(:disabled){background:#efecff;border-color:#6c5ce7} .mic-btn.rec{background:#ffe6ef;border-color:#EC3C78;color:#c2185b;font-weight:900} .mic-btn:disabled{opacity:.4;cursor:not-allowed} /* The box currently receiving dictated speech */ .dictating{border-color:#EC3C78 !important;box-shadow:0 0 0 3px rgba(236,60,120,0.15)} /* ── IMPORT AREA ── */ .import-hint{font-size:11px;color:#7b7894;font-weight:600;text-align:center;margin-top:-8px} .import-hint a{color:#6c5ce7} /* ── QUIZ PAGE (student view) ── */ .quiz-body{font-family:'Nunito','Verdana',sans-serif;background:#fffdf5;padding:24px;color:#2d2a4a} .quiz-h1{font-size:20px;font-weight:900;text-align:center;margin-bottom:28px} .quiz-wrap{max-width:900px;margin:0 auto;display:flex;flex-direction:column;gap:24px} .qcard{background:#fff;border-radius:18px;border:2.5px solid #2d2a4a;padding:24px;display:flex;gap:24px;align-items:flex-start;box-shadow:6px 6px 0 #efecff} .qdiag{flex-shrink:0;width:400px} .qright{flex:1;display:flex;flex-direction:column;gap:12px} .qnum{font-size:11px;color:#6c5ce7;text-transform:uppercase;letter-spacing:.06em;font-weight:900} .qtext{font-size:15px;line-height:1.7;font-weight:800} .abtns{display:flex;flex-direction:column;gap:8px} .abtn{font-family:'Nunito','Verdana',sans-serif;font-size:13px;font-weight:700;padding:11px 15px;border:2px solid #e4e2f4;border-radius:12px;background:#fff;cursor:pointer;text-align:left;color:#2d2a4a;transition:all .2s;line-height:1.4;box-shadow:0 2px 0 #e4e2f4} .abtn:hover{background:#efecff;border-color:#6c5ce7;box-shadow:0 2px 0 #cfc8f5} .abtn.wrong{background:#ffe6ef;border-color:#EC3C78;color:#c2185b;pointer-events:none;box-shadow:none} .abtn.correct{background:#e0f7f1;border-color:#00b894;color:#00795f;font-weight:800;pointer-events:none;box-shadow:none} .fb{font-size:13px;font-weight:800;min-height:20px} .fb.c{color:#00997e} .fb.w{color:#c2185b} .score-card{background:#fff;border-radius:18px;border:2.5px solid #2d2a4a;padding:28px;text-align:center;font-size:20px;font-weight:900;display:none;max-width:900px;margin:0 auto;box-shadow:6px 6px 0 #e0f7f1}