/* ArabSchool — Phase 0 baseline styles. Deliberately simple; no frameworks. */ :root { --c-bg: #f7f9fc; --c-fg: #2d3142; --c-muted: #6b6f80; --c-accent: #5f27cd; --c-accent-soft: #f0e7ff; --c-pink: #ff6b9d; --c-yellow: #feca57; --c-green: #1dd1a1; --c-danger: #d33; --c-border: #e5e7eb; --radius: 12px; --shadow: 0 4px 14px rgba(0, 0, 0, 0.06); /* --font lives in fonts.css — it switches on html[dir='rtl'] between --font-latin (Baloo 2…) and --font-arabic (Baloo Bhaijaan 2…). Don't redeclare it here; a later :root declaration would win due to source order and permanently clobber the dynamic stack. */ } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; /* Belt-and-braces guard so a single off-screen child (long Arabic word, wide widget, etc.) can't make the whole page horizontally scrollable on phones. The kid shell already does this in kids.css; mirror it here for the public + admin layouts. */ overflow-x: hidden; } body { font-family: var(--font); color: var(--c-fg); background: var(--c-bg); line-height: 1.6; } .container { max-width: 1100px; margin: 0 auto; padding: 0 20px; } a { color: var(--c-accent); text-decoration: none; } a:hover { text-decoration: underline; } /* --- Header / footer --- */ .site-header { background: white; border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow); } .site-header .container { display: flex; align-items: center; justify-content: space-between; /* Grew from 64px to 80px so the wordmark lockup can breathe. Nav links stay vertically centered via the flex align-items above. */ height: 80px; } .brand { font-weight: 700; font-size: 1.25rem; color: var(--c-accent); /* Logo lockup lives inside the . Flex-aligns the image baseline so it reads centered against the taller nav anchors even when the PNG intrinsic aspect ratio shifts. */ display: inline-flex; align-items: center; block-size: 100%; } .brand img { display: block; /* Header is now 80px; 64px wordmark leaves ~8px breathing room top and bottom so the brand feels full-size without crowding the nav. */ block-size: 64px; inline-size: auto; max-inline-size: 300px; } .site-nav a { /* Logical property — flips to margin-right under . */ margin-inline-start: 16px; color: var(--c-fg); font-weight: 500; } .site-nav a:hover { color: var(--c-accent); } /* Phase 5B language toggle. The toggle is now a POST form so the choice can persist via CookieRequestCultureProvider. The form itself is laid out inline so it sits between anchors in the nav; the button inside is reset to render like one of the .site-nav a anchors. */ .site-nav .lang-toggle-form { display: inline; margin: 0; padding: 0; } .site-nav .lang-toggle { margin-inline-start: 16px; padding: 0; border: none; background: transparent; color: var(--c-fg); font: inherit; font-weight: 500; cursor: pointer; } .site-nav .lang-toggle:hover { color: var(--c-accent); } /* Site header responsive collapse. The default layout assumes a wide viewport — a 64px logo + up to 6 nav items (Home, My Family, Admin, Reviewer, Kids, 🌐) plus a sign-in pill or 👋 user pill blow past a phone's width. Below 780px (matches the home-hero breakpoint) we drop the fixed 80px header height, allow the container + nav to wrap, and shrink the logo. Below 480px we shrink the logo further and tighten the nav-anchor spacing so a two-row nav doesn't take half the screen. */ @media (max-width: 780px) { .site-header .container { height: auto; min-height: 64px; flex-wrap: wrap; gap: 8px 12px; padding-block: 10px; } .brand img { block-size: 48px; max-inline-size: 200px; } .site-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .site-nav a, .site-nav .lang-toggle { margin-inline-start: 0; font-size: 0.95rem; } } @media (max-width: 480px) { .brand img { block-size: 40px; max-inline-size: 160px; } .site-nav a, .site-nav .lang-toggle { font-size: 0.9rem; } } .site-footer { margin-top: 60px; padding: 24px 0; color: var(--c-muted); text-align: center; border-top: 1px solid var(--c-border); } /* --- Hero --- */ .hero { padding: 48px 0 24px; } .hero h1 { font-size: 2.5rem; margin: 0 0 8px; } .accent { color: var(--c-accent); } .lede { font-size: 1.15rem; color: var(--c-muted); margin: 0 0 24px; } .status { background: var(--c-accent-soft); padding: 12px 18px; border-radius: var(--radius); margin-bottom: 32px; } /* --- Cards --- */ .cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; } .card { display: block; padding: 20px; background: white; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); color: var(--c-fg); transition: transform 0.15s ease; } .card:hover { transform: translateY(-2px); text-decoration: none; } .card.placeholder { opacity: 0.6; cursor: default; } .card.placeholder:hover { transform: none; } .card-icon { font-size: 2rem; margin-bottom: 6px; } .card-title { font-weight: 700; margin-bottom: 4px; } .card-body { color: var(--c-muted); font-size: 0.95rem; } .text-danger { color: var(--c-danger); } /* --- Phase 1: auth + forms -------------------------------------------- */ .auth-card { max-width: 440px; margin: 48px auto; padding: 32px; background: white; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); } .auth-card h1 { margin: 0 0 4px; font-size: 1.75rem; } .auth-card .lede { margin-bottom: 24px; font-size: 1rem; } .field { margin-bottom: 16px; } .field label { display: block; font-weight: 600; margin-bottom: 6px; color: var(--c-fg); } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field select { width: 100%; padding: 10px 12px; font-size: 1rem; border: 1px solid var(--c-border); border-radius: 8px; font-family: var(--font); background: white; } .field input:focus, .field select:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } .checkbox-row { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; } .btn { display: inline-block; padding: 10px 20px; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; font-family: var(--font); cursor: pointer; text-decoration: none; } .btn-primary { background: var(--c-accent); color: white; } .btn-primary:hover { background: #4f1fb0; text-decoration: none; } .btn-secondary { background: var(--c-border); color: var(--c-fg); } .btn-secondary:hover { background: #d4d6db; text-decoration: none; } .btn-danger { background: var(--c-danger); color: white; } .btn-danger:hover { background: #b02a2a; text-decoration: none; } .btn-block { display: block; width: 100%; text-align: center; } .btn-small { padding: 4px 10px; font-size: 0.85rem; } .data-table { width: 100%; border-collapse: collapse; margin-top: 8px; } .data-table th, .data-table td { padding: 10px 12px; border-bottom: 1px solid var(--c-border); text-align: start; vertical-align: middle; } .data-table th { font-weight: 600; color: #555; background: #fafafa; } .data-table tr:last-child td { border-bottom: none; } .alert { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; } .alert-error, .alert-danger { background: #fde2e2; color: #8b1a1a; border: 1px solid #f5b5b5; } .alert-success { background: #dcf5e3; color: #1a6b3a; border: 1px solid #8fd9a8; } .alert-info { background: var(--c-accent-soft); color: var(--c-accent); } /* The asp-validation-summary tag helper renders an empty
when there are no model errors, tagged .validation-summary-valid. Without this rule, the outer .alert classes leave dead visual space above every form. */ .alert.validation-summary-valid { display: none; } .alert.validation-summary-errors ul { margin: 0; padding-inline-start: 20px; } .alert.validation-summary-errors ul:only-child li:only-child { list-style: none; margin-inline-start: -20px; } .auth-switch { margin-top: 24px; text-align: center; color: var(--c-muted); font-size: 0.95rem; } .login-pill { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; background: var(--c-accent-soft); border-radius: 999px; font-size: 0.9rem; color: var(--c-accent); } /* --- Phase 1: family dashboard --------------------------------------- */ .section-head { display: flex; align-items: center; justify-content: space-between; margin: 32px 0 16px; } .section-head h2 { margin: 0; } .students-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .student-row { display: grid; grid-template-columns: auto 1fr auto; gap: 16px; align-items: center; padding: 16px; background: white; border: 1px solid var(--c-border); border-radius: var(--radius); margin-bottom: 10px; } .student-row .emoji { font-size: 2rem; } .student-row .meta { display: flex; flex-direction: column; } .student-row .meta strong { font-size: 1.05rem; } .student-row .meta .muted { color: var(--c-muted); font-size: 0.9rem; } .student-row .actions { display: flex; gap: 8px; } /* --- Phase 1: kid-facing picker + PIN pad ---------------------------- */ .kids-shell { background: linear-gradient(135deg, #f0e7ff 0%, #ffe0ee 50%, #fff7cc 100%); min-height: 100vh; padding: 32px 0 64px; } .kids-shell .site-header { display: none; } .kids-header { text-align: center; margin-bottom: 32px; } .kids-header h1 { font-size: 2.5rem; margin: 0; color: var(--c-accent); } .kids-header p { margin: 8px 0 0; color: var(--c-fg); } .kids-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px; max-width: 780px; margin: 0 auto; } .kid-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 24px 16px; background: white; border: 3px solid white; border-radius: 20px; box-shadow: 0 10px 30px rgba(95, 39, 205, 0.15); color: var(--c-fg); transition: transform 0.15s, border-color 0.15s; } .kid-card:hover { transform: translateY(-3px); border-color: var(--c-accent); text-decoration: none; } .kid-card .emoji { font-size: 4rem; line-height: 1; } .kid-card .name { font-weight: 700; font-size: 1.2rem; } .kid-card .grade { color: var(--c-muted); font-size: 0.9rem; } .pin-pad { max-width: 360px; margin: 0 auto; background: white; border-radius: 20px; padding: 32px 24px; box-shadow: 0 10px 30px rgba(95, 39, 205, 0.15); text-align: center; } .pin-pad .avatar-big { font-size: 5rem; line-height: 1; } .pin-pad .who { font-size: 1.3rem; font-weight: 700; margin: 8px 0; } .pin-display { display: flex; justify-content: center; gap: 12px; margin: 20px 0; } .pin-dot { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--c-accent); background: transparent; transition: background 0.1s; } .pin-dot.filled { background: var(--c-accent); } .pin-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pin-key { padding: 18px 0; font-size: 1.5rem; font-weight: 700; background: var(--c-accent-soft); border: none; border-radius: 14px; color: var(--c-accent); cursor: pointer; font-family: var(--font); } .pin-key:active { transform: scale(0.95); } .pin-key.del { background: #fde2e2; color: #8b1a1a; } /* --- Admin CMS (Phase 2) --------------------------------------------- */ .admin-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; } .admin-tile { display: flex; gap: 14px; align-items: center; padding: 18px; background: white; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); color: inherit; } .admin-tile:hover { text-decoration: none; border-color: var(--c-accent); } .admin-tile-icon { font-size: 2rem; } .admin-tile strong { display: block; font-size: 1.05rem; } .admin-tile .muted { display: block; font-size: 0.9rem; color: var(--c-muted); } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; margin-top: 14px; } .stat-card { background: white; padding: 18px; border-radius: var(--radius); border: 1px solid var(--c-border); text-align: center; } .stat-card .stat-value { font-size: 2rem; font-weight: 700; } .stat-card .stat-label { color: var(--c-muted); font-size: 0.9rem; } .stat-warn { border-inline-start: 4px solid var(--c-yellow); } .stat-ok { border-inline-start: 4px solid var(--c-green); } .stat-muted { opacity: 0.7; } .section-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 24px 0 8px; } .section-head .actions { display: flex; gap: 8px; } .content-group { background: white; padding: 18px 22px; border: 1px solid var(--c-border); border-radius: var(--radius); margin-top: 20px; } .content-group h2 { margin-top: 0; } .grade-head { margin: 14px 0 4px; color: var(--c-muted); font-size: 1rem; font-weight: 600; } .topic-list { display: flex; flex-direction: column; gap: 10px; } .topic-row { background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 14px; } .topic-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; } .lesson-list { list-style: none; padding: 0; /* 16px inset on the leading edge so lesson rows nest visually under their topic. */ margin-block: 8px 0; margin-inline: 16px 0; display: flex; flex-direction: column; gap: 4px; } .lesson-list li { display: flex; gap: 8px; align-items: center; } .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } .badge-muted { background: #eef1f6; color: #4b5563; } .badge-warn { background: #fff3d6; color: #8a5a00; } .badge-ok { background: #d8f5e4; color: #0c6b3a; } .badge-dim { background: #eceef2; color: #7a7f8c; } .badge-danger { background: #fde1e1; color: #a12626; } /* --- Content import preview ---------------------------------------------- Tables and diff lists used on /Admin/Content/Import — kept scoped with .admin-table so we don't accidentally restyle existing admin tables elsewhere. */ .stat-danger { border-inline-start: 4px solid #c94040; } .admin-table { width: 100%; border-collapse: collapse; background: white; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; margin-bottom: 16px; } .admin-table th, .admin-table td { padding: 8px 12px; border-bottom: 1px solid var(--c-border); text-align: start; vertical-align: top; font-size: 0.9rem; } .admin-table thead th { background: #f7f8fa; font-weight: 600; color: #374151; } .admin-table tbody tr:last-child td { border-bottom: none; } .field-diff-list { margin: 0; padding-inline-start: 16px; font-size: 0.85rem; color: #374151; } .field-diff-list li { margin: 2px 0; } .field-diff-list code { background: #f7f8fa; padding: 1px 4px; border-radius: 4px; } /* --- Form primitives for admin pages --- */ .form-card { background: white; padding: 24px; border: 1px solid var(--c-border); border-radius: var(--radius); display: flex; flex-direction: column; gap: 14px; } .field { display: flex; flex-direction: column; gap: 4px; } .field label { font-weight: 600; font-size: 0.95rem; } .field input, .field select, .field textarea { padding: 9px 12px; border: 1px solid var(--c-border); border-radius: 8px; font: inherit; color: inherit; background: white; } .field textarea { resize: vertical; } .field input[readonly], .field textarea[readonly] { background: #f1f3f7; color: var(--c-muted); } .field .field-error { color: var(--c-danger); font-size: 0.85rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .form-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; } .alert-warn { background: #fff7e0; border-inline-start: 4px solid var(--c-yellow); padding: 10px 14px; border-radius: 8px; } /* --- Lesson editor layout --- */ .editor-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr); gap: 20px; align-items: flex-start; } @media (max-width: 900px) { .editor-grid { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; } } .quill-host { background: white; min-height: 260px; border-radius: 8px; /* Quill draws its own border via .ql-toolbar/.ql-container, so we don't need another here. */ } /* --- Quiz authoring block --------------------------------------------- */ /* v1 is a raw JSON textarea; Phase 3 replaces it with a real question editor. Monospaced + generous line-height so an admin can spot mismatched braces. */ .quiz-block { margin-top: 20px; padding: 16px 20px; border: 1px solid #e5e5e5; border-radius: 8px; background: #fafafa; } .quiz-block legend { font-weight: 600; padding: 0 6px; } .code-textarea { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; line-height: 1.5; background: white; border: 1px solid #ccc; border-radius: 6px; padding: 10px 12px; tab-size: 2; } /* Per-field list of validation errors. The QuizJsonValidator emits one message per problem; this renders them as an alert-styled list right under the JSON textarea so the author can see all fixes at once. padding-inline: = kid-bullet-indent-first, tight-on-end — asymmetric, so we specify both sides logically. */ .field-error-list { margin: 8px 0 0; padding-block: 10px; padding-inline: 30px 16px; list-style-type: disc; color: var(--c-danger); background: #fdf1f1; border: 1px solid #f0c4c4; border-radius: 6px; font-size: 0.9rem; } .field-error-list li { margin: 2px 0; } /* Collapsible "show a minimal valid payload" block on the Quiz editor. */ .quiz-schema-hint { margin: 10px 0 16px; padding: 10px 14px; background: #f4f8fb; border: 1px solid #d8e3ec; border-radius: 6px; font-size: 0.9rem; } .quiz-schema-hint > summary { cursor: pointer; font-weight: 600; color: #2a5680; } .quiz-schema-hint[open] > summary { margin-bottom: 8px; } .code-sample { margin: 0; padding: 10px 12px; background: white; border: 1px solid #d8e3ec; border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; line-height: 1.45; overflow-x: auto; white-space: pre; } /* --- Reviewer inbox ---------------------------------------------------- */ .empty-state { background: #fafafa; border: 1px dashed #ccc; border-radius: 12px; padding: 32px 24px; text-align: center; color: #555; } .review-card { background: white; border: 1px solid #e5e5e5; border-radius: 12px; padding: 20px 24px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03); } .review-card-head h2 { margin: 0 0 4px 0; font-size: 1.25rem; } .review-card-head .muted { margin: 0 0 2px 0; } .review-bodies { margin-top: 16px; border-top: 1px solid #eee; padding-top: 12px; } .review-bodies > summary { cursor: pointer; padding: 4px 0; color: #444; font-weight: 500; } .review-body-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 12px; } @media (max-width: 900px) { .review-body-grid { grid-template-columns: 1fr; } } .lesson-preview { background: #fafafa; border-radius: 8px; padding: 12px 16px; max-height: 360px; overflow-y: auto; line-height: 1.5; } .lesson-preview h2 { font-size: 1.1rem; margin-top: 12px; } .lesson-preview h3 { font-size: 1.0rem; margin-top: 10px; } /* Logical border — flips under dir="rtl" without a manual override. (The old .lesson-preview[dir="rtl"] blockquote rule that paired this used to swap border-left for border-right; border-inline-start does the same thing by definition, so the override is gone.) */ .lesson-preview blockquote { border-inline-start: 3px solid #ccc; padding: 4px 12px; color: #555; margin: 8px 0; } .review-actions { display: flex; gap: 24px; align-items: flex-start; margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee; flex-wrap: wrap; } .review-actions .return-form { display: flex; flex-direction: column; gap: 6px; flex: 1 1 320px; min-width: 280px; } .review-actions textarea { width: 100%; padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font: inherit; resize: vertical; } /* Flagged-for-re-review list on the Reviewer inbox. A quiet list, not a full card per row — these are "glance and ack" items, not full re-submissions. */ .flagged-list { list-style: none; margin: 12px 0 0; padding: 0; } .flagged-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid #eee; flex-wrap: wrap; } .flagged-row:first-child { border-top: none; } .flagged-row p.muted { margin: 4px 0 0; font-size: 0.92em; } .flagged-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* --- Phase 4 parent dashboard --------------------------------------------- Styles for /Family/Progress (index) and /Family/Progress/{id} (detail). Parent chrome — intentionally NOT the kids pastel/Comic-Sans aesthetic. Reuses the site.css tokens so it sits visually next to the other admin-ish pages. Anything kid-facing belongs in kids.css. */ .family-kid-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-top: 12px; } .family-kid-card { display: block; background: white; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 18px 20px; box-shadow: var(--shadow); color: var(--c-fg); transition: transform 120ms ease, box-shadow 120ms ease; } .family-kid-card:hover { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.08); text-decoration: none; } .family-kid-card__header { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; } .family-kid-card__avatar { font-size: 40px; line-height: 1; } .family-kid-card__name { font-size: 18px; font-weight: 600; } .family-kid-card__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .family-kid-card__stats .stat { display: flex; flex-direction: column; gap: 2px; } .family-kid-card__stats .stat__label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--c-muted); } .family-kid-card__stats .stat__value { font-size: 14px; font-weight: 500; } .family-kid-card__locked { margin-top: 12px; padding: 6px 10px; background: #fff4f4; border-radius: 6px; color: var(--c-danger); font-size: 13px; } /* Streak pill — used on both the index cards and the detail header. */ .streak-pill { display: inline-block; padding: 3px 10px; background: linear-gradient(90deg, #ffe3c4, #ffc7ab); color: #a34400; border-radius: 999px; font-weight: 600; font-size: 13px; } .streak-pill--big { padding: 8px 16px; font-size: 16px; } /* Detail-page header: avatar + name on the left, streak pill on the right. */ .family-kid-header { display: flex; align-items: center; gap: 20px; padding: 20px; background: white; border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); margin-bottom: 20px; } .family-kid-header__avatar { font-size: 56px; line-height: 1; } .family-kid-header__meta { flex: 1; } .family-kid-header__meta h1 { margin: 0 0 2px 0; font-size: 26px; } .family-kid-header__streak { align-self: center; } /* Attempts table — tabular-ish, no heavy borders. Passes badge-ok/badge-warn reuses the existing palette from the admin screens. */ .attempts-table-wrap { overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius); background: white; box-shadow: var(--shadow); } .attempts-table { width: 100%; border-collapse: collapse; font-size: 14px; } .attempts-table th, .attempts-table td { padding: 10px 14px; border-bottom: 1px solid var(--c-border); text-align: start; } .attempts-table tbody tr:last-child td { border-bottom: none; } .attempts-table th { background: #f3f4f7; font-weight: 600; color: var(--c-muted); text-transform: uppercase; font-size: 11px; letter-spacing: 0.04em; } .attempts-table td.num, .attempts-table th.num { /* Numbers hug the trailing edge of the cell — right in LTR, left in RTL. */ text-align: end; font-variant-numeric: tabular-nums; } .attempts-table .small { font-size: 12px; } /* --- Wrong-answer review (Phase 4.3E) ----------------------------------- Rendered as a collapsed
panel under each attempt row that has at least one missed-on-first-try question. Collapsed by default so the attempts table doesn't blow up into a wall of text — a parent scanning the list only expands the attempts they care about. */ .attempt-detail-row > td { background: #fafbfd; padding: 0 14px 12px 14px; border-bottom: 1px solid var(--c-border); } .attempt-wrongs { margin: 0; } .attempt-wrongs > summary { cursor: pointer; color: var(--c-muted); font-size: 13px; padding: 8px 0; user-select: none; } .attempt-wrongs > summary:hover { color: var(--c-text, #1f2937); } .attempt-wrongs[open] > summary { color: var(--c-text, #1f2937); font-weight: 500; margin-bottom: 6px; } .attempt-wrongs__list { list-style: decimal; padding-inline-start: 24px; margin: 0; display: flex; flex-direction: column; gap: 12px; } .attempt-wrongs__item { background: white; border: 1px solid var(--c-border); border-radius: var(--radius); padding: 12px 14px; } .attempt-wrongs__prompt { font-weight: 500; margin-bottom: 8px; line-height: 1.4; } .attempt-wrongs__picks { display: flex; flex-wrap: wrap; gap: 8px; } .attempt-wrongs__pick { flex: 1 1 240px; padding: 8px 12px; border-radius: var(--radius); /* Logical border so the accent sits on the leading edge in both LTR and RTL. */ border-inline-start: 3px solid var(--c-border); background: #f7f8fa; } .attempt-wrongs__pick--wrong { border-inline-start-color: #e5716a; background: #fdf2f1; } .attempt-wrongs__pick--right { border-inline-start-color: #4caf82; background: #f1fbf6; } .attempt-wrongs__pick .muted { display: block; margin-bottom: 2px; } /* Lesson rollup — a simpler list than the attempts table. */ .lesson-rollup { display: flex; flex-direction: column; gap: 8px; } .lesson-rollup__row { display: grid; grid-template-columns: 1fr auto auto; gap: 16px; align-items: center; padding: 12px 16px; background: white; border: 1px solid var(--c-border); border-radius: var(--radius); } .lesson-rollup__row--done { background: #f1fbf6; border-color: #c1ecd4; } .lesson-rollup__title { font-weight: 500; } .lesson-rollup__progress { color: var(--c-muted); font-size: 13px; font-variant-numeric: tabular-nums; } .lesson-rollup__last { color: var(--c-muted); font-size: 13px; } @media (max-width: 640px) { .family-kid-card__stats { grid-template-columns: 1fr; } .family-kid-header { flex-direction: column; align-items: flex-start; } .lesson-rollup__row { grid-template-columns: 1fr; gap: 4px; } } /* --- Skill rollup (parent dashboard + admin analytics — Phase 4.3C) ------ Grouped by strand. Each skill gets a row with a name, a progress bar for first-try rate, the numeric rate, and (on parent side) "Revisit: lesson" deep-links. Weak spots get a warn tint so the parent's eye lands on them first — the whole point of this section is to answer "what should Mom nudge Layla to revisit?". */ .skill-strand { margin-bottom: 24px; } .skill-strand__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; } .skill-strand__head h3 { margin: 0; font-size: 1.05rem; } .skill-rows { display: flex; flex-direction: column; gap: 8px; } .skill-row { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(160px, 1.5fr) auto; grid-template-rows: auto auto; gap: 6px 16px; align-items: center; padding: 12px 16px; background: white; border: 1px solid var(--c-border); border-radius: var(--radius); } .skill-row--weak { background: #fff7e6; border-color: #ffd88a; } .skill-row__name strong { font-weight: 600; } .skill-row__bar { height: 8px; background: #eaeef3; border-radius: 999px; overflow: hidden; min-width: 120px; } .skill-row__bar-fill { height: 100%; background: var(--c-primary, #2e75b6); transition: width 200ms ease; } .skill-row__bar-fill--weak { background: #e8a629; } .skill-row__stats { font-variant-numeric: tabular-nums; white-space: nowrap; } .skill-row__revisit { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 16px; padding-top: 4px; border-top: 1px dashed var(--c-border); margin-top: 4px; } .skill-revisit-link { font-size: 13px; color: var(--c-primary, #2e75b6); text-decoration: none; } .skill-revisit-link:hover { text-decoration: underline; } /* Shared table row tint for admin weak-spot flagging. Skill analytics reuses the .skill-row__bar bar to match visual language across parent + admin. */ .data-table tr.row-warn { background: #fff7e6; } @media (max-width: 640px) { .skill-row { grid-template-columns: 1fr; } } /* --- Admin quiz builder (form-over-JSON widget) ------------------------ Phase 4.2: admin-quiz-builder.js renders an MCQ editor into the `.quiz-builder` host. The raw JSON textarea still posts — the builder keeps it in sync on every mutation. Styling stays quiet: white cards on the quiz-block's grey background, small action buttons, a radio-style "correct answer" column aligned left-of-text. */ .quiz-builder { display: flex; flex-direction: column; gap: 16px; margin-bottom: 12px; } .quiz-builder-empty { margin: 0; padding: 14px 16px; background: white; border: 1px dashed #ccc; border-radius: 8px; text-align: center; } .quiz-builder-question { background: white; border: 1px solid #d8d8d8; border-radius: 10px; padding: 14px 18px 10px; margin: 0; } /* Collapsed card — header only, tighter padding so a 20-question stack fits on one screen. The chevron in .quiz-builder-q-collapse swaps glyph in JS (▾ ↔ ▸); the .collapsed class hook is here for any future per-state tweaks (e.g. background tint) without re-touching the JS. */ .quiz-builder-question.collapsed { padding: 10px 18px; } .quiz-builder-question.collapsed .quiz-builder-q-head { margin-bottom: 0; } .quiz-builder-q-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; } .quiz-builder-q-head h3 { margin: 0; font-size: 1.05rem; font-weight: 600; /* Allow the inline summary to truncate cleanly on narrow screens instead of pushing the action buttons off the row. */ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Type label after the question number when collapsed — small, muted. */ .quiz-builder-q-meta { font-weight: 400; font-size: 0.9rem; color: #6b6b6b; } /* Truncated prompt snippet shown only when the card is collapsed. dir="auto" on the span (set in JS) means an Arabic-only prompt reads RTL inline. */ .quiz-builder-q-summary { font-weight: 400; font-size: 0.95rem; color: #555; } .quiz-builder-q-actions { display: flex; gap: 6px; flex-shrink: 0; } /* Chevron toggle — same square footprint as the move buttons so the header row stays a tidy strip of icons. */ .quiz-builder-q-collapse { min-width: 32px; } /* Bulk Expand all / Collapse all links live next to "+ Add question" in the actions row. .btn-link styling already exists; this just keeps them visually grouped at the trailing edge before the count summary. */ .quiz-builder-bulk-collapse { margin-inline-start: 4px; padding-inline: 6px; } .quiz-builder-q-actions button[disabled] { opacity: 0.4; cursor: not-allowed; } /* Choice rows: [radio + letter] [English input] [Arabic input] [remove]. */ .quiz-builder-choices { margin-top: 12px; padding: 10px 12px; background: #fafafa; border: 1px solid #ececec; border-radius: 8px; } .quiz-builder-choices-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .quiz-builder-choice { display: grid; grid-template-columns: auto 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; } .quiz-builder-choice:last-of-type { margin-bottom: 0; } .quiz-builder-choice .field { margin: 0; } .quiz-builder-choice input[type="text"] { width: 100%; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; font: inherit; } .quiz-builder-choice-correct { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; background: white; border: 1px solid #d5d5d5; border-radius: 6px; cursor: pointer; user-select: none; } .quiz-builder-choice-correct input[type="radio"]:checked + .quiz-builder-choice-letter { color: var(--c-accent); font-weight: 700; } .quiz-builder-choice-letter { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; text-transform: uppercase; min-width: 1ch; } .quiz-builder-choice-remove { padding: 2px 8px; } .quiz-builder-choices-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; } /* Per-question skill picker sits between prompt row and choices block. */ .quiz-builder-skill { margin-top: 10px; padding: 8px 12px; background: #f5f8ff; border: 1px solid #dde4f5; border-radius: 8px; } .quiz-builder-skill > label { font-weight: 500; color: #2a3b66; } .quiz-builder-skill select, .quiz-builder-skill input[type="text"] { width: 100%; margin-top: 4px; } .quiz-builder-skill .quiz-builder-hint { margin: 4px 0 0; } .quiz-builder-explanation { margin-top: 12px; padding: 8px 12px; background: #fafafa; border: 1px solid #ececec; border-radius: 8px; } .quiz-builder-explanation > summary { cursor: pointer; font-weight: 500; color: #444; } .quiz-builder-explanation[open] > summary { margin-bottom: 8px; } .quiz-builder-hint { margin: 4px 0 10px; font-size: 0.88rem; } .quiz-builder-actions-row { display: flex; align-items: center; gap: 14px; padding-top: 4px; flex-wrap: wrap; } /* Preview-quiz button sits in the actions row alongside "+ Add question". Uses the standard primary colour so it reads as the affirmative action the author runs while iterating on the quiz copy. */ .quiz-builder-preview-btn[disabled] { opacity: 0.55; cursor: not-allowed; } /* ---- Preview modal ---------------------------------------------------- */ /* Fixed-position fullscreen overlay hosting an iframe to the kids quiz preview page. Lives outside the builder's
in the DOM so it doesn't submit on Save; the hidden form that POSTs to the preview endpoint also lives outside it. */ .quiz-builder-preview-backdrop { position: fixed; inset: 0; background: rgba(15, 35, 71, 0.55); display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 20px; } .quiz-builder-preview-backdrop[hidden] { display: none; } body.quiz-preview-modal-open { /* Stop the page behind the modal from scrolling when the author scrolls inside the iframe. The iframe handles its own scrolling. */ overflow: hidden; } .quiz-builder-preview-dialog { background: #fff; border-radius: 12px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35); width: min(1100px, 100%); height: min(880px, 100%); display: flex; flex-direction: column; overflow: hidden; } .quiz-builder-preview-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #e5e8ef; background: #fafbff; flex-wrap: wrap; } .quiz-builder-preview-head-left { display: flex; align-items: baseline; gap: 4px; min-width: 0; } .quiz-builder-preview-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .quiz-builder-preview-hint { font-size: 0.92rem; } .quiz-builder-preview-langs { display: inline-flex; border: 1px solid #c9d0db; border-radius: 6px; overflow: hidden; } .quiz-builder-preview-lang { border: none; background: #fff; color: #333; padding: 4px 10px; border-radius: 0; } .quiz-builder-preview-lang + .quiz-builder-preview-lang { border-inline-start: 1px solid #c9d0db; } .quiz-builder-preview-lang.selected { background: #5e5bff; color: #fff; } .quiz-builder-preview-close { font-size: 1.2rem; line-height: 1; padding: 4px 10px; color: #555; text-decoration: none; } .quiz-builder-preview-close:hover { color: #111; } .quiz-builder-preview-body { flex: 1 1 auto; min-height: 0; background: #f7f9ff; position: relative; } .quiz-builder-preview-iframe { width: 100%; height: 100%; border: 0; background: transparent; display: block; } /* Loading state — dim the iframe + show a spinner while the POST is in flight. Cleared on the iframe's `load` event from JS. */ .quiz-builder-preview-backdrop.loading .quiz-builder-preview-iframe { opacity: 0.4; transition: opacity 120ms ease; } .quiz-builder-preview-backdrop.loading .quiz-builder-preview-body::after { content: 'Rendering preview…'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #4a4a4a; font-weight: 600; pointer-events: none; } /* "Show raw JSON" toggle sits between the form and the JSON panel. */ .quiz-builder-toggle-row { margin: 6px 0 10px; } .btn-link { background: none; border: none; padding: 0; color: var(--c-accent); font: inherit; cursor: pointer; text-decoration: underline; } .btn-link:hover { color: #1d4c74; } .btn-link:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: 2px; } @media (max-width: 720px) { .quiz-builder-choice { grid-template-columns: auto 1fr auto; } .quiz-builder-choice > .field:last-of-type { grid-column: 2 / 4; } } /* Quiz v3 chunk 4 — matching / ordering / categorize authoring layouts. Each row is a grid so the inline fields and the remove button line up predictably regardless of text length. Keep the visual language identical to .quiz-builder-choice so authors aren't relearning the grammar. */ /* Matching: #num | leftEn | leftAr | ↔ | rightEn | rightAr | × */ .quiz-builder-matching-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .quiz-builder-matching-pair { display: grid; grid-template-columns: auto 1fr 1fr auto 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; } .quiz-builder-matching-pair:last-of-type { margin-bottom: 0; } .quiz-builder-matching-pair .field { margin: 0; } .quiz-builder-matching-pair input[type="text"] { width: 100%; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; font: inherit; } .quiz-builder-matching-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; color: #6b6f80; min-width: 2.5ch; } .quiz-builder-matching-side { display: contents; /* let the two fields participate directly in the grid */ } .quiz-builder-matching-arrow { color: #6b6f80; font-size: 1.15rem; text-align: center; } .quiz-builder-matching-remove { padding: 2px 8px; } .quiz-builder-matching-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; } /* Ordering: #num | ↑ | ↓ | textEn | textAr | × */ .quiz-builder-ordering-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; } .quiz-builder-ordering-item { display: grid; grid-template-columns: auto auto auto 1fr 1fr auto; gap: 8px; align-items: center; margin-bottom: 6px; } .quiz-builder-ordering-item:last-of-type { margin-bottom: 0; } .quiz-builder-ordering-item .field { margin: 0; } .quiz-builder-ordering-item input[type="text"] { width: 100%; padding: 6px 10px; border: 1px solid #ccc; border-radius: 6px; font: inherit; } .quiz-builder-ordering-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.9rem; color: #6b6f80; min-width: 2.5ch; } .quiz-builder-ordering-moves { display: contents; } .quiz-builder-ordering-move { padding: 2px 8px; min-width: 30px; } .quiz-builder-ordering-remove { padding: 2px 8px; } .quiz-builder-ordering-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; } /* Categorize splits into two blocks — the categories block and the items block. Categories are #num | labelEn | labelAr | ×. Items are textEn | textAr |