student-review-screen 0.0.1

package/dist/components/Organisms/TeacherEvaluation/TeacherEvaluation.styles.js

@@ -0,0 +1,857 @@
+"use strict";
+/**
+ * Design tokens + style objects for the teacher evaluation review layout.
+ *
+ * Two themes. Dark maps 1:1 to the Figma "Question / Theme=Dark" component
+ * (Release 5.1) and stays the default. Light is the same layout on a white card
+ * with the app's brand purple as the accent — every value that differs between
+ * them lives in `PALETTES` below, so the style objects themselves are written
+ * once against semantic token names.
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.teacherColors = exports.getStyles = exports.getTeacherColors = exports.THEMES = void 0;
+exports.THEMES = {
+    DARK: "dark",
+    LIGHT: "light",
+};
+const PALETTES = {
+    [exports.THEMES.DARK]: {
+        /* text */
+        textPrimary: "#f1f1f1",
+        textSecondary: "#dddddd",
+        textMuted: "#b8b8b8",
+        /* surfaces */
+        cardBg: "#262626",
+        cardHeaderBg: "#414141",
+        /* nested sub-question surface, a step up from the card */
+        subCardBg: "#2e2e2e",
+        /* image preview — the title bar sits darker than the image area */
+        previewHeaderBg: "#171717",
+        previewBodyBg: "#2b2b2b",
+        /* score picker — unselected value chip, and the selected fill */
+        scoreOptionBg: "#2e2e2e",
+        scoreOptionSelectedBg: "#293a16",
+        /* SCQ graded options, measured from the design */
+        optionWrongBg: "#491410",
+        optionWrongBorder: "#aa2f26",
+        optionWrongLabelBg: "#aa2f26",
+        optionCorrectBg: "#293a16",
+        optionCorrectBorder: "#8bc34a",
+        optionCorrectLabelBg: "#456125",
+        cardBorder: "#414141",
+        divider: "#707070",
+        separator: "#4b4b4b",
+        cardShadow: "drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.12))",
+        indexColor: "#dddddd",
+        /* SCQ option letter badge — the layout's existing default, kept as is */
+        optionLabelBg: "#414141",
+        optionLabelColor: "#f1f1f1",
+        /* accent — score chip, edit/save buttons */
+        accent: "#8bc34a",
+        accentHover: "#7cb342",
+        accentSoft: "rgba(139, 195, 74, 0.08)",
+        accentContrast: "#171717",
+        accentShadow: "1px 1px 4px 0px rgba(23, 23, 23, 0.4)",
+        /* neutral (cancel) button */
+        neutralBorder: "#707070",
+        neutralText: "#dddddd",
+        neutralHover: "rgba(255, 255, 255, 0.06)",
+        /* score dropdown menu */
+        menuBg: "#262626",
+        menuBorder: "#414141",
+        menuHover: "#414141",
+        menuText: "#f1f1f1",
+        /* images */
+        imageCardBg: "#ffffff",
+        imageCardBorder: "#dfdafe",
+    },
+    [exports.THEMES.LIGHT]: {
+        textPrimary: "#130159",
+        textSecondary: "#1d287a",
+        textMuted: "#5b5f7d",
+        cardBg: "#ffffff",
+        cardHeaderBg: "#f4f2fe",
+        subCardBg: "#fbfaff",
+        previewHeaderBg: "#ffffff",
+        previewBodyBg: "#f4f2fe",
+        scoreOptionBg: "#f4f2fe",
+        optionWrongBg: "#fdeceb",
+        optionWrongBorder: "#e05548",
+        optionWrongLabelBg: "#e05548",
+        optionCorrectBg: "#eef7e6",
+        optionCorrectBorder: "#7abc40",
+        optionCorrectLabelBg: "#5f8f2c",
+        scoreOptionSelectedBg: "#eef7e6",
+        cardBorder: "#dfdafe",
+        divider: "#c9c1f5",
+        separator: "#ded9f7",
+        cardShadow: "drop-shadow(0px 4px 6px rgba(19, 1, 89, 0.08))",
+        indexColor: "#1d287a",
+        optionLabelBg: "#5f4dc7",
+        optionLabelColor: "#ffffff",
+        accent: "#5f4dc7",
+        accentHover: "#4e3fb0",
+        accentSoft: "rgba(95, 77, 199, 0.08)",
+        accentContrast: "#ffffff",
+        accentShadow: "1px 1px 4px 0px rgba(19, 1, 89, 0.15)",
+        neutralBorder: "#c9c1f5",
+        neutralText: "#1d287a",
+        neutralHover: "rgba(19, 1, 89, 0.06)",
+        menuBg: "#ffffff",
+        menuBorder: "#dfdafe",
+        menuHover: "#f4f2fe",
+        menuText: "#130159",
+        imageCardBg: "#ffffff",
+        imageCardBorder: "#dfdafe",
+    },
+};
+const FONT = "'Inter', sans-serif";
+/** Unknown or missing theme falls back to dark, the original behaviour. */
+const getTeacherColors = (theme) => PALETTES[theme] || PALETTES[exports.THEMES.DARK];
+exports.getTeacherColors = getTeacherColors;
+const getStyles = (theme = exports.THEMES.DARK) => {
+    const c = (0, exports.getTeacherColors)(theme);
+    return {
+        /* ---------------- page level ---------------- */
+        root: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "24px",
+            width: "100%",
+            fontFamily: FONT,
+        },
+        sectionHeader: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "4px",
+            width: "100%",
+        },
+        sectionTitle: {
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: { base: "16px", md: "20px" },
+            lineHeight: { base: "24px", md: "28px" },
+            color: c.textPrimary,
+            margin: 0,
+        },
+        sectionDescription: {
+            fontFamily: FONT,
+            fontWeight: 400,
+            fontSize: "14px",
+            lineHeight: "20px",
+            color: c.textMuted,
+            margin: 0,
+        },
+        questionList: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+            width: "100%",
+        },
+        /* ---------------- card ---------------- */
+        /* Wraps the label + card so the label sits outside the bordered box and
+           leaves the header strip's rounded top corners intact. */
+        questionWrapper: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "6px",
+            width: "100%",
+        },
+        evaluatedByLabel: {
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "14px",
+            lineHeight: "20px",
+            color: c.textSecondary,
+            margin: 0,
+        },
+        card: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+            width: "100%",
+            bg: c.cardBg,
+            border: `1px solid ${c.cardBorder}`,
+            borderRadius: "8px",
+            filter: c.cardShadow,
+            fontFamily: FONT,
+        },
+        cardHeader: {
+            display: "flex",
+            flexDirection: { base: "column", md: "row" },
+            flexWrap: { base: "nowrap", md: "wrap" },
+            alignItems: { base: "flex-start", md: "center" },
+            alignContent: "center",
+            gap: { base: "16px", md: "20px 40px" },
+            padding: "12px",
+            bg: c.cardHeaderBg,
+            borderTopRadius: "8px",
+            width: "100%",
+        },
+        headerQuestionContainer: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "4px",
+            flex: { base: "0 0 auto", md: "1 0 0" },
+            width: "100%",
+            minWidth: { base: 0, md: "160px" },
+        },
+        /* Objective header: the index and question share a line on desktop, but the
+           question drops below the circle on mobile — both left aligned to the same
+           margin, as designed. */
+        objectiveHeaderRow: {
+            display: "flex",
+            flexDirection: { base: "column", md: "row" },
+            alignItems: { base: "flex-start", md: "center" },
+            gap: { base: "12px", md: "8px" },
+            width: "100%",
+        },
+        questionIndexRow: {
+            display: "flex",
+            alignItems: "flex-start",
+            gap: "8px",
+            width: "100%",
+        },
+        questionIndexCircle: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            boxSize: "24px",
+            borderRadius: "50%",
+            bg: c.cardBg,
+            border: `1px solid ${c.cardBorder}`,
+            color: c.indexColor,
+            fontFamily: FONT,
+            fontWeight: 400,
+            fontSize: "16px",
+            lineHeight: "24px",
+        },
+        questionTypeLabel: {
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "12px",
+            lineHeight: "24px",
+            color: c.textMuted,
+            margin: 0,
+        },
+        questionText: {
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "16px",
+            lineHeight: "24px",
+            color: c.textPrimary,
+            width: "100%",
+            wordBreak: "break-word",
+        },
+        /* ---------------- image preview ---------------- */
+        /* Fixed viewing area rather than hugging the image, so a small photo and a
+           tall page both open at the same size. 720x616 on desktop per the design;
+           viewport relative on mobile so it never overflows the screen. */
+        previewContent: {
+            display: "flex",
+            flexDirection: "column",
+            bg: c.previewBodyBg,
+            borderRadius: { base: "8px", md: "12px" },
+            overflow: "hidden",
+            mx: { base: "16px", md: "32px" },
+            width: { base: "calc(100% - 32px)", md: "720px" },
+            maxWidth: { base: "calc(100% - 32px)", md: "720px" },
+            height: { base: "min(80vh, 616px)", md: "616px" },
+            maxHeight: { base: "80vh", md: "90vh" },
+        },
+        previewHeader: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "16px",
+            flexShrink: 0,
+            px: { base: "16px", md: "24px" },
+            py: { base: "12px", md: "16px" },
+            bg: c.previewHeaderBg,
+        },
+        previewTitle: {
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: { base: "18px", md: "20px" },
+            lineHeight: { base: "24px", md: "28px" },
+            color: c.textPrimary,
+            margin: 0,
+        },
+        previewClose: {
+            color: c.textPrimary,
+            flexShrink: 0,
+            _hover: { bg: c.neutralHover },
+        },
+        previewBody: {
+            /* Takes the space the header leaves; `minHeight: 0` is what lets the image
+               shrink inside the flex column instead of forcing the modal taller. */
+            flex: "1 1 auto",
+            minHeight: 0,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            overflow: "hidden",
+            px: { base: "16px", md: "24px" },
+            py: { base: "16px", md: "24px" },
+        },
+        previewImage: {
+            maxWidth: "100%",
+            maxHeight: "100%",
+            objectFit: "contain",
+        },
+        /* ---------------- comprehension ---------------- */
+        /* The passage sits in the card header where a normal question's text does. */
+        passageText: {
+            fontFamily: FONT,
+            fontWeight: 400,
+            fontSize: "14px",
+            lineHeight: "22px",
+            color: c.textSecondary,
+            width: "100%",
+            wordBreak: "break-word",
+        },
+        /* The passage header is a plain row on the card, not a filled strip — only
+           the sub-questions get one. */
+        comprehensionHeader: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "8px",
+            width: "100%",
+            padding: "12px",
+        },
+        subQuestionList: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "12px",
+            width: "100%",
+            padding: "12px",
+        },
+        /* One nested sub-question: its own header strip over a body on the card
+           surface. No padding of its own — the strip has to span the full width, so
+           the inner sections bring their own. */
+        subQuestionCard: {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+            overflow: "hidden",
+            borderRadius: "8px",
+            border: `1px solid ${c.cardBorder}`,
+            bg: c.cardBg,
+        },
+        subQuestionIndexBadge: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            flexShrink: 0,
+            minWidth: "24px",
+            height: "24px",
+            paddingInline: "6px",
+            borderRadius: "999px",
+            bg: c.cardBg,
+            border: `1px solid ${c.cardBorder}`,
+            color: c.textSecondary,
+            fontFamily: FONT,
+            fontWeight: 500,
+            fontSize: "12px",
+            lineHeight: "16px",
+        },
+        subQuestionHeader: {
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "12px",
+            width: "100%",
+        },
+        subQuestionHeaderMain: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "4px",
+            flex: "1 0 0",
+            minWidth: "160px",
+        },
+        subQuestionIndexRow: {
+            display: "flex",
+            alignItems: "center",
+            gap: "8px",
+            width: "100%",
+        },
+        subQuestionIndex: {
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "14px",
+            lineHeight: "20px",
+            color: c.textSecondary,
+            margin: 0,
+            flexShrink: 0,
+        },
+        /* ---------------- score box ---------------- */
+        scoreBox: {
+            display: "flex",
+            alignItems: "center",
+            gap: "10px",
+            flexShrink: 0,
+            border: `1px solid ${c.accent}`,
+            borderRadius: "8px",
+            paddingInline: "16px 10px",
+            paddingBlock: "10px",
+            color: c.accent,
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "14px",
+            lineHeight: "20px",
+            bg: "transparent",
+        },
+        scoreSelect: {
+            border: `1px solid ${c.accent}`,
+            borderRadius: "8px",
+            color: c.accent,
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "14px",
+            lineHeight: "20px",
+            height: "40px",
+            bg: "transparent",
+            cursor: "pointer",
+            _hover: { bg: c.accentSoft },
+            _focus: { boxShadow: "none", borderColor: c.accent },
+            "> option": {
+                background: c.menuBg,
+                color: c.menuText,
+            },
+        },
+        /* ---------------- score picker panel ---------------- */
+        scorePanel: {
+            display: "flex",
+            flexDirection: "column",
+            gap: "16px",
+            width: { base: "300px", md: "340px" },
+            padding: "16px",
+            borderRadius: "12px",
+            bg: c.cardBg,
+            border: `1px solid ${c.cardBorder}`,
+            boxShadow: "0px 8px 24px rgba(0, 0, 0, 0.32)",
+        },
+        scorePanelHeader: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "space-between",
+            gap: "12px",
+            width: "100%",
+        },
+        scorePanelTitle: {
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "16px",
+            lineHeight: "24px",
+            color: c.textPrimary,
+            margin: 0,
+        },
+        scorePanelClose: {
+            color: c.accent,
+            flexShrink: 0,
+            _hover: { bg: c.accentSoft },
+        },
+        /* The values wrap, so a 2 mark question and a 10 mark one both lay out. */
+        scoreOptionsGrid: {
+            display: "flex",
+            flexWrap: "wrap",
+            gap: "8px",
+            width: "100%",
+        },
+        scoreOption: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minWidth: "44px",
+            paddingInline: "10px",
+            paddingBlock: "6px",
+            borderRadius: "6px",
+            border: `1px solid ${c.cardBorder}`,
+            bg: c.scoreOptionBg,
+            color: c.textPrimary,
+            fontFamily: FONT,
+            fontWeight: 500,
+            fontSize: "14px",
+            lineHeight: "20px",
+            cursor: "pointer",
+            userSelect: "none",
+            transition: "all 0.15s",
+            _hover: { borderColor: c.accent },
+        },
+        scoreOptionSelected: {
+            border: `1px solid ${c.accent}`,
+            bg: c.scoreOptionSelectedBg,
+            color: c.accent,
+            fontWeight: 600,
+        },
+        scorePanelNote: {
+            fontFamily: FONT,
+            fontWeight: 400,
+            fontSize: "12px",
+            lineHeight: "16px",
+            color: c.textMuted,
+            margin: 0,
+        },
+        scorePanelActions: {
+            display: "flex",
+            justifyContent: "flex-end",
+            width: "100%",
+        },
+        scoreUpdateButton: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minWidth: "120px",
+            paddingInline: "24px",
+            paddingBlock: "10px",
+            borderRadius: "8px",
+            bg: c.accent,
+            color: c.accentContrast,
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "14px",
+            lineHeight: "20px",
+            cursor: "pointer",
+            userSelect: "none",
+            transition: "all 0.2s",
+            _hover: { bg: c.accentHover },
+        },
+        /* ---------------- body ---------------- */
+        cardBody: {
+            display: "flex",
+            flexDirection: "column",
+            width: "100%",
+        },
+        block: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "16px",
+            padding: "12px",
+            borderRadius: "8px",
+            width: "100%",
+        },
+        feedbackBlock: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "20px",
+            padding: "12px",
+            borderRadius: "8px",
+            width: "100%",
+        },
+        blockSection: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            gap: "10px",
+            width: "100%",
+        },
+        /* title + action button, wraps when the button no longer fits */
+        blockTitleRow: {
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "center",
+            alignContent: "center",
+            justifyContent: "space-between",
+            rowGap: "12px",
+            columnGap: "12px",
+            width: "100%",
+        },
+        blockTitle: {
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "16px",
+            lineHeight: "24px",
+            color: c.textPrimary,
+            margin: 0,
+            whiteSpace: "nowrap",
+        },
+        separator: {
+            width: "100%",
+            height: "0px",
+            borderTop: `2px dashed ${c.separator}`,
+            flexShrink: 0,
+        },
+        /* ---------------- answer / summary / reference content ---------------- */
+        answerText: {
+            fontFamily: FONT,
+            fontWeight: 400,
+            fontSize: "14px",
+            lineHeight: "20px",
+            color: c.textSecondary,
+            width: "100%",
+            wordBreak: "break-word",
+        },
+        notAnswered: {
+            fontFamily: FONT,
+            fontWeight: 400,
+            fontSize: "14px",
+            lineHeight: "20px",
+            color: c.textMuted,
+            margin: 0,
+        },
+        contentCard: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            justifyContent: "center",
+            gap: "8px",
+            padding: "12px",
+            borderRadius: "6px",
+            width: "100%",
+        },
+        summaryHeadline: {
+            fontFamily: FONT,
+            fontWeight: 400,
+            fontSize: "16px",
+            lineHeight: "24px",
+            color: c.textPrimary,
+            width: "100%",
+            wordBreak: "break-word",
+        },
+        /* "What you have done well:" / "Here is how you can improve:" — the two
+           sub headings the summary body is split under. */
+        summarySubTitle: {
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "14px",
+            lineHeight: "20px",
+            color: c.textSecondary,
+            margin: 0,
+            width: "100%",
+        },
+        /* bullet list styling for the html coming from the summary */
+        summaryBody: {
+            fontFamily: FONT,
+            fontWeight: 400,
+            fontSize: "14px",
+            lineHeight: "24px",
+            color: c.textMuted,
+            width: "100%",
+            wordBreak: "break-word",
+            /* lineHeight 0 on the list collapses the line boxes that pretty printed
+               summary html leaves between <li> tags; the items restore it. */
+            "ul, ol": {
+                margin: 0,
+                paddingInlineStart: "21px",
+                listStylePosition: "outside",
+                lineHeight: 0,
+            },
+            ul: { listStyleType: "disc" },
+            li: {
+                lineHeight: "24px",
+                marginBottom: 0,
+            },
+            "p, li": {
+                fontSize: "14px",
+                color: c.textMuted,
+            },
+            "li > p": {
+                lineHeight: "24px",
+                margin: 0,
+            },
+        },
+        referenceText: {
+            fontFamily: FONT,
+            fontWeight: 400,
+            fontSize: "14px",
+            lineHeight: "24px",
+            color: c.textMuted,
+            width: "100%",
+            wordBreak: "break-word",
+        },
+        /* ---------------- student answer images ---------------- */
+        imagesRow: {
+            display: "flex",
+            flexWrap: "wrap",
+            alignItems: "flex-start",
+            gap: "16px",
+            width: "100%",
+        },
+        imageCard: {
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "flex-start",
+            overflow: "hidden",
+            flexShrink: 0,
+            width: { base: "100%", md: "auto" },
+            bg: c.imageCardBg,
+            border: `1px solid ${c.imageCardBorder}`,
+            borderRadius: "16px",
+            cursor: "pointer",
+        },
+        image: {
+            width: { base: "100%", md: "264px" },
+            maxWidth: { base: "100%", md: "264px" },
+            height: { base: "198px", md: "172px" },
+            objectFit: "cover",
+        },
+        /* ---------------- edit buttons ---------------- */
+        editButton: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "4px",
+            flexShrink: 0,
+            border: `1px solid ${c.accent}`,
+            borderRadius: "6px",
+            paddingInline: "16px",
+            paddingBlock: "8px",
+            boxShadow: c.accentShadow,
+            bg: "transparent",
+            color: c.accent,
+            fontFamily: FONT,
+            fontWeight: 500,
+            fontSize: "12px",
+            lineHeight: "16px",
+            cursor: "pointer",
+            userSelect: "none",
+            transition: "all 0.2s",
+            _hover: { bg: c.accentSoft },
+        },
+        saveButton: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "4px",
+            flexShrink: 0,
+            border: `1px solid ${c.accent}`,
+            borderRadius: "6px",
+            paddingInline: "16px",
+            paddingBlock: "8px",
+            bg: c.accent,
+            color: c.accentContrast,
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "12px",
+            lineHeight: "16px",
+            cursor: "pointer",
+            userSelect: "none",
+            transition: "all 0.2s",
+            _hover: { bg: c.accentHover },
+        },
+        cancelButton: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            gap: "4px",
+            flexShrink: 0,
+            border: `1px solid ${c.neutralBorder}`,
+            borderRadius: "6px",
+            paddingInline: "16px",
+            paddingBlock: "8px",
+            bg: "transparent",
+            color: c.neutralText,
+            fontFamily: FONT,
+            fontWeight: 500,
+            fontSize: "12px",
+            lineHeight: "16px",
+            cursor: "pointer",
+            userSelect: "none",
+            transition: "all 0.2s",
+            _hover: { bg: c.neutralHover },
+        },
+        /* Cancel / Save sit below the editor, right aligned, on the same surround. */
+        editorActions: {
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: "12px",
+            width: "100%",
+            paddingTop: "12px",
+        },
+        editorActionButton: {
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            minWidth: { base: "104px", md: "200px" },
+            paddingInline: "24px",
+            paddingBlock: "10px",
+            borderRadius: "6px",
+            fontFamily: FONT,
+            fontWeight: 600,
+            fontSize: "14px",
+            lineHeight: "20px",
+            cursor: "pointer",
+            userSelect: "none",
+            transition: "all 0.2s",
+        },
+        editorCancelButton: {
+            border: `1px solid ${c.accent}`,
+            bg: "transparent",
+            color: c.accent,
+            _hover: { bg: c.accentSoft },
+        },
+        editorSaveButton: {
+            border: `1px solid ${c.accent}`,
+            bg: c.accent,
+            color: c.accentContrast,
+            _hover: { bg: c.accentHover },
+        },
+        editorWrapper: {
+            width: "100%",
+        },
+        /* ---------------- student review ----------------
+           Only reached when the presenter runs in student mode (light theme). The
+           teacher card never renders any of these, so nothing above is affected. */
+        progressBarSpacer: {
+            paddingTop: "84px",
+        },
+        scriptWrapper: {
+            marginLeft: "16px",
+            width: "100%",
+        },
+        questionBlock: {
+            position: "relative",
+            width: "100%",
+        },
+        discussRow: {
+            display: "flex",
+            justifyContent: "flex-end",
+            width: "100%",
+            marginTop: "12px",
+        },
+        discussButton: {
+            bg: c.accent,
+            color: c.accentContrast,
+            border: `1px solid ${c.accent}`,
+            fontFamily: FONT,
+            fontSize: "14px",
+            fontWeight: 500,
+            height: "36px",
+            minWidth: "102px",
+            borderRadius: "8px",
+            _hover: { bg: c.accentHover },
+        },
+        viewDiscussButton: {
+            bg: "transparent",
+            color: c.accent,
+            border: `1px solid ${c.accent}`,
+            fontFamily: FONT,
+            fontSize: "14px",
+            fontWeight: 500,
+            height: "36px",
+            minWidth: "160px",
+            borderRadius: "8px",
+            _hover: { bg: c.accentSoft },
+        },
+        chatWrapper: {
+            width: "100%",
+            marginTop: "16px",
+        },
+        summaryWrapper: {
+            width: "100%",
+            marginTop: "16px",
+        },
+    };
+};
+exports.getStyles = getStyles;
+/** Dark tokens/styles, kept as the default export for existing imports. */
+exports.teacherColors = PALETTES[exports.THEMES.DARK];
+exports.default = (0, exports.getStyles)(exports.THEMES.DARK);
+//# sourceMappingURL=TeacherEvaluation.styles.js.map