/* Lifted verbatim from assignment-submission-content.blade.php. Inline it was 19,591 bytes of HTML on every render; as a file the browser fetches it once. */ /* Both roots carry the tokens, because the dialog is moved to on open and stops being a descendant of .cq-aiv. The per-verdict accent is therefore set on BOTH elements by paint(): a declared value beats an inherited one, so setting it only on the panel once left the dialog stuck on the amber default while the bar beside it went red. */ .cq-aiv, .cq-aiv-scrim { /* This component carries its own colour tokens on purpose. The page's --foreground / --background / --border variables are referenced all over this file but never actually defined, so every var() silently resolved to its light-mode fallback, including under html.dark, which the layout sets from the theme switch AND from prefers-color-scheme. Findings and student names rendered near-black on the dark dialog. */ --cq-fg: #111827; --cq-fg2: #4b5563; --cq-fg3: #6b7280; --cq-bg: #ffffff; --cq-border: #e6e8eb; --cq-muted: #f5f6f8; /* Repainted per verdict by the script below. */ --cq-aiv-accent: #f59e0b; --cq-aiv-soft: rgba(245, 158, 11, 0.12); /* Both already loaded by the layout, so this costs no request. Playfair is the serif the page's own headings use, which is what makes the report read as part of the product rather than a bare browser default. */ --cq-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --cq-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; } .cq-aiv-bar, .cq-aiv-modal { font-family: var(--cq-sans); -webkit-font-smoothing: antialiased; } .dark .cq-aiv, .dark .cq-aiv-scrim { --cq-fg: #e5e7eb; --cq-fg2: #b6bdc9; --cq-fg3: #949cab; --cq-bg: #101828; --cq-border: rgba(255, 255, 255, 0.10); --cq-muted: rgba(255, 255, 255, 0.05); } .cq-aiv { margin-bottom: 12px; } /* ---- the bar ---- */ .cq-aiv-bar { width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 14px; text-align: left; font: inherit; cursor: pointer; border: 1px solid var(--cq-border); border-radius: 10px; background: var(--cq-bg); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .cq-aiv-bar:hover { border-color: var(--cq-aiv-accent); box-shadow: 0 1px 3px rgba(15, 23, 42, .06), 0 0 0 3px var(--cq-aiv-soft); } .cq-aiv-bar:active { transform: translateY(1px); } .cq-aiv-mark { flex-shrink: 0; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(140deg, var(--cq-aiv-accent), rgba(0, 0, 0, .22)); } .cq-aiv-mark-lg { width: 28px; height: 28px; border-radius: 7px; } .cq-aiv-bartext { flex: 1; min-width: 0; } .cq-aiv-bartitle { display: block; font-family: var(--cq-serif); font-size: 15px; font-weight: 600; line-height: 1.25; letter-spacing: .1px; color: var(--cq-fg); } .cq-aiv-barsub { display: block; margin-top: 1px; font-size: 11.5px; line-height: 1.35; color: var(--cq-fg3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Verdict and score mean nothing until there is a report. Scoped to the bar: the dialog only ever renders its chip alongside a finished report anyway. */ .cq-aiv:not([data-state="done"]) .cq-aiv-bar .cq-aiv-chip, .cq-aiv:not([data-state="done"]) .cq-aiv-bar .cq-aiv-score { display: none; } .cq-aiv-score { flex-shrink: 0; display: flex; align-items: baseline; gap: 3px; white-space: nowrap; } .cq-aiv-score b { font-size: 17px; font-weight: 700; line-height: 1; color: var(--cq-aiv-accent); } .cq-aiv-score i { font-style: normal; font-size: 9.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--cq-fg3); } .cq-aiv-chip { flex-shrink: 0; font-size: 11px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; color: var(--cq-aiv-accent); background: var(--cq-aiv-soft); box-shadow: inset 0 0 0 1px var(--cq-aiv-soft); } .cq-aiv-chip-lg { font-size: 11.5px; padding: 4px 11px; } .cq-aiv-cta { flex-shrink: 0; font-size: 12px; font-weight: 600; padding: 6px 13px; border-radius: 7px; white-space: nowrap; color: #fff; background: var(--cq-aiv-accent); } .cq-aiv[data-state="done"] .cq-aiv-cta { color: var(--cq-aiv-accent); background: transparent; box-shadow: inset 0 0 0 1px var(--cq-aiv-accent); } /* ---- the dialog ---- */ .cq-aiv-scrim { position: fixed; inset: 0; /* Above the fixed page header and the other full-screen overlays on this page. */ z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 20px 16px; background: rgba(15, 23, 42, .5); } .cq-aiv-scrim[hidden] { display: none; } .cq-aiv-modal { display: flex; flex-direction: column; width: 100%; /* Wide enough that a finding is one or two lines instead of four: the report is mostly sentences, and a narrow column made a short report look long. */ max-width: 840px; /* It scrolls inside the dialog rather than growing it, so the verdict and the close button stay put on a short screen. */ max-height: calc(100vh - 40px); border-radius: 14px; background: var(--cq-bg); box-shadow: 0 24px 60px rgba(2, 6, 23, .3); overflow: hidden; } .cq-aiv-modalhead { flex-shrink: 0; display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--cq-border); background: linear-gradient(120deg, var(--cq-aiv-soft), transparent 60%); } .cq-aiv-headtext { flex: 1; min-width: 0; } .cq-aiv-headtext h3 { margin: 0; font-family: var(--cq-serif); font-size: 16.5px; font-weight: 600; line-height: 1.2; color: var(--cq-fg); } .cq-aiv-headtext small { display: block; font-size: 11px; color: var(--cq-fg3); } .cq-aiv-close { flex-shrink: 0; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; background: transparent; cursor: pointer; color: var(--cq-fg3); } .cq-aiv-close:hover { background: var(--cq-muted); color: var(--cq-fg); } .cq-aiv-modalbody { flex: 1; min-height: 0; overflow-y: auto; padding: 18px; } .cq-aiv-modalbody section { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--cq-border); } /* Only one of these three is ever on screen. Written against the dialog as well as the panel because the dialog is reparented to and is no longer a descendant of .cq-aiv; setState() mirrors the attribute onto both. */ .cq-aiv:not([data-state="loading"]) [data-role="loading"], .cq-aiv:not([data-state="failed"]) [data-role="failed"], .cq-aiv:not([data-state="done"]) [data-role="report"], .cq-aiv-scrim:not([data-state="loading"]) [data-role="loading"], .cq-aiv-scrim:not([data-state="failed"]) [data-role="failed"], .cq-aiv-scrim:not([data-state="done"]) [data-role="report"] { display: none; } .cq-aiv-wait { padding: 34px 8px; text-align: center; } .cq-aiv-wait p { margin: 0; font-size: 13.5px; color: var(--cq-fg); } .cq-aiv-wait small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--cq-fg3); } .cq-aiv-pct { display: flex; align-items: baseline; justify-content: center; gap: 2px; color: var(--cq-aiv-accent); } .cq-aiv-pct b { font-family: var(--cq-serif); font-size: 40px; font-weight: 700; line-height: 1; } .cq-aiv-pct span { font-size: 15px; font-weight: 600; } .cq-aiv-track-bar { width: 260px; max-width: 100%; height: 5px; margin: 14px auto 16px; border-radius: 999px; background: var(--cq-muted); overflow: hidden; } .cq-aiv-track-bar span { display: block; width: 0; height: 100%; border-radius: 999px; background: var(--cq-aiv-accent); transition: width .45s ease-out; } @media (prefers-reduced-motion: reduce) { .cq-aiv-track-bar span { transition: none; } .cq-aiv-fill { transition: none; } } .cq-aiv-retry { margin-top: 14px; font-size: 12px; font-weight: 500; padding: 6px 13px; border-radius: 7px; border: 1px solid var(--cq-border); background: transparent; color: var(--cq-fg); cursor: pointer; } .cq-aiv-retry:hover { border-color: var(--cq-aiv-accent); color: var(--cq-aiv-accent); } /* Verdict block */ .cq-aiv-hero { display: flex; align-items: flex-start; gap: 16px; padding: 14px; border-radius: 11px; background: var(--cq-aiv-soft); } .cq-aiv-gauge { position: relative; flex-shrink: 0; width: 76px; height: 76px; } .cq-aiv-track { fill: none; stroke: rgba(15, 23, 42, .08); stroke-width: 6; } .dark .cq-aiv-track { stroke: rgba(255, 255, 255, .12); } .cq-aiv-fill { fill: none; stroke: var(--cq-aiv-accent); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 207; stroke-dashoffset: 207; transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1); } .cq-aiv-gaugetext { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; } .cq-aiv-gaugetext b { font-family: var(--cq-serif); font-size: 24px; font-weight: 700; color: var(--cq-aiv-accent); } .cq-aiv-gaugetext i { margin-top: 3px; font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .07em; color: var(--cq-fg3); } .cq-aiv-herotext { flex: 1; min-width: 0; } .cq-aiv-m-headline { margin: 8px 0 6px; font-family: var(--cq-serif); font-size: 19px; font-weight: 600; line-height: 1.3; letter-spacing: .1px; color: var(--cq-fg); } .cq-aiv-summary, .cq-aiv-note { margin: 0; font-size: 13px; line-height: 1.65; color: var(--cq-fg2); } .cq-aiv-label { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 9px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--cq-fg3); } .cq-aiv-findings { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .cq-aiv-findings li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.55; } /* A short rule rather than a dot: it scales with the text block and reads as a severity stripe down the finding. */ .cq-aiv-sev { flex-shrink: 0; width: 3px; border-radius: 2px; background: #9ca3af; } .cq-aiv-sev[data-severity="high"] { background: #ef4444; } .cq-aiv-sev[data-severity="medium"] { background: #f59e0b; } .cq-aiv-sev[data-severity="low"] { background: #10b981; } .cq-aiv-findings strong { font-weight: 600; color: var(--cq-fg); } .cq-aiv-findings span { color: var(--cq-fg2); } .cq-aiv-flags { display: flex; flex-wrap: wrap; gap: 8px; } .cq-aiv-flag { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 6px 11px; border-radius: 8px; font-size: 12px; border: 1px solid var(--cq-border); background: var(--cq-muted); color: var(--cq-fg); } .cq-aiv-dot { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; background: #9ca3af; } .cq-aiv-dot[data-severity="high"] { background: #ef4444; } .cq-aiv-dot[data-severity="medium"] { background: #f59e0b; } .cq-aiv-dot[data-severity="low"] { background: #10b981; } .cq-aiv-flag b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cq-aiv-flag i { font-style: normal; font-size: 11.5px; color: var(--cq-fg3); } /* The AI call is its own judgement, so it gets its own colour rather than inheriting the copying verdict's. */ .cq-aiv-call { font-size: 10px; padding: 3px 8px; border-radius: 999px; color: #6d28d9; background: rgba(139, 92, 246, .13); } [data-call="likely_ai"] .cq-aiv-call { color: #b91c1c; background: rgba(239, 68, 68, .13); } [data-call="likely_human"] .cq-aiv-call { color: #047857; background: rgba(16, 185, 129, .14); } [data-call="unclear"] .cq-aiv-call { color: #6b7280; background: rgba(107, 114, 128, .14); } .dark .cq-aiv-call { color: #c4b5fd; } .dark [data-call="likely_ai"] .cq-aiv-call { color: #fca5a5; } .dark [data-call="likely_human"] .cq-aiv-call { color: #6ee7b7; } .dark [data-call="unclear"] .cq-aiv-call { color: #d1d5db; } /* The caveat that keeps a high score from reading as a verdict. */ .cq-aiv-before .cq-aiv-note { padding: 10px 12px; border-radius: 8px; border-left: 3px solid #10b981; background: var(--cq-muted); } .cq-aiv-steps { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 12.5px; line-height: 1.55; color: var(--cq-fg2); } .cq-aiv-modalfoot { flex-shrink: 0; display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--cq-border); font-size: 11px; color: var(--cq-fg3); background: var(--cq-muted); } @media (max-width: 720px) { /* The subtitle is the first thing to go: the chip and score carry the verdict in less room, and the dialog has the text. */ .cq-aiv-barsub { display: none; } .cq-aiv-hero { flex-direction: column; gap: 12px; } }