@commonpub/layer 0.81.0 → 0.83.0

package/pages/contests/[slug]/entries/[entryId].vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import type { Serialized, ContestDetail, ContestEntryItem } from '@commonpub/server';
+import type { Serialized, ContestDetail, ContestEntryItem, EntryPrivateData } from '@commonpub/server';
 import type { ContestStage } from '@commonpub/schema';
 
 // Entry detail: the content summary plus the entry's per-stage artifacts in a
@@ -60,6 +60,30 @@ const contentLink = computed(() =>
 function fmtDate(iso: string): string {
   return new Date(iso).toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
 }
+
+// --- Personal data (PII + agreement acceptances) ---
+// Fetched CLIENT-SIDE only, so partitioned PII never lands in the SSR payload.
+// The /private endpoint gates access (entrant or `contest.pii`); a 403/empty just
+// leaves the section hidden, so judges + the public never see it.
+const { contestPii } = useFeatures();
+const privateData = ref<Serialized<EntryPrivateData> | null>(null);
+const allTemplateFields = computed(() =>
+  stages.value.flatMap((s) => s.submissionTemplate ?? []).map((f) => ({ key: f.key, label: f.label, type: f.type })),
+);
+let piiFetched = false;
+async function loadPrivate(): Promise<void> {
+  if (piiFetched || typeof window === 'undefined') return;
+  piiFetched = true;
+  try {
+    const d = await $fetch<Serialized<EntryPrivateData>>(`/api/contests/${slug}/entries/${entryId}/private`);
+    if (d && (Object.keys(d.fields ?? {}).length > 0 || (d.agreements ?? []).length > 0)) privateData.value = d;
+  } catch {
+    // 403 (not the entrant / no contest.pii) or no data → section stays hidden.
+  }
+}
+// contestPii hydrates from /api/features on the client (DB overrides), so watch it
+// rather than reading once at mount.
+watch(contestPii, (on) => { if (on) void loadPrivate(); }, { immediate: true });
 </script>
 
 <template>
@@ -122,6 +146,15 @@ function fmtDate(iso: string): string {
           </li>
         </ol>
       </section>
+
+      <!-- Personal data viewer (entrant / contest.pii holders only; client-fetched). -->
+      <ContestEntryPrivateData
+        v-if="privateData"
+        :fields="privateData.fields"
+        :agreements="privateData.agreements"
+        :template="allTemplateFields"
+        :updated-at="privateData.updatedAt"
+      />
     </template>
   </div>
 </template>

package/pages/contests/[slug]/index.vue

@@ -2,6 +2,7 @@
 import type { Serialized, ContestEntryItem, ContestJudgeItem } from '@commonpub/server';
 
 const route = useRoute();
+const router = useRouter();
 const slug = route.params.slug as string;
 const toast = useToast();
 const { extract: extractError } = useApiError();
@@ -23,6 +24,9 @@ const c = computed(() => contest.value);
 const entries = computed(() => apiEntriesData.value?.items ?? []);
 const judges = computed<ContestJudgeItem[]>(() => judgesData.value ?? []);
 const isOwner = computed(() => isAdmin.value || !!(user.value?.id && c.value?.createdById === user.value.id));
+// Can edit this contest (owner / per-contest editor / contest.manage holder).
+// Drives the Edit affordance; judge/collaborator management stays owner-only.
+const canManage = computed(() => isOwner.value || !!c.value?.viewerCanManage);
 
 // Judge state derives entirely from the contest_judges table (single source of
 // truth) — not the legacy `judges` jsonb column.
@@ -53,17 +57,41 @@ const visibilityNote = computed(() => {
 interface Tab { key: string; label: string; icon: string; count?: number }
 const tabs = computed<Tab[]>(() => {
   const t: Tab[] = [{ key: 'overview', label: 'Overview', icon: 'fa-circle-info' }];
-  if (c.value?.rules) t.push({ key: 'rules', label: 'Rules', icon: 'fa-file-lines' });
-  if (c.value?.showPrizes !== false && (c.value?.prizes?.length || c.value?.prizesDescription)) t.push({ key: 'prizes', label: 'Prizes', icon: 'fa-trophy' });
+  if (c.value?.rules || c.value?.rulesBlocks?.length) t.push({ key: 'rules', label: 'Rules', icon: 'fa-file-lines' });
+  if (c.value?.showPrizes !== false && (c.value?.prizes?.length || c.value?.prizesDescription || c.value?.prizesBlocks?.length)) t.push({ key: 'prizes', label: 'Prizes', icon: 'fa-trophy' });
   t.push({ key: 'entries', label: 'Entries', icon: 'fa-box-open', count: c.value?.entryCount ?? entries.value.length });
   if (participants.value.length) t.push({ key: 'participants', label: 'Participants', icon: 'fa-users', count: participants.value.length });
   if (judges.value.length || isOwner.value) t.push({ key: 'judges', label: 'Judges', icon: 'fa-gavel', count: judges.value.length || undefined });
   return t;
 });
-const activeTab = ref('overview');
+// Active tab is synced to ?tab= so every section is directly linkable + shareable
+// and survives reload (the WAI-ARIA tablist + keyboard nav below are unchanged).
+// Validate against the known tab keys; unknown/garbage falls back to overview.
+const KNOWN_TABS = ['overview', 'rules', 'prizes', 'entries', 'participants', 'judges'];
+function tabFromQuery(): string {
+  const t = route.query.tab;
+  return typeof t === 'string' && KNOWN_TABS.includes(t) ? t : 'overview';
+}
+const activeTab = ref(tabFromQuery());
 watch(tabs, (list) => {
   if (!list.some((t) => t.key === activeTab.value)) activeTab.value = 'overview';
 });
+// Reflect tab changes in the URL (replace, not push, so tab clicks don't flood
+// history); overview is the default and omits the param for a clean URL.
+watch(activeTab, (key) => {
+  const q = { ...route.query };
+  if (key === 'overview') delete q.tab;
+  else q.tab = key;
+  if (q.tab !== route.query.tab) router.replace({ query: q });
+});
+// Honor browser back/forward that lands on a different ?tab=.
+watch(
+  () => route.query.tab,
+  () => {
+    const key = tabFromQuery();
+    if (key !== activeTab.value && tabs.value.some((t) => t.key === key)) activeTab.value = key;
+  },
+);
 
 // WAI-ARIA tabs keyboard pattern (arrow keys + Home/End, roving focus).
 function focusTab(key: string): void {
@@ -150,6 +178,32 @@ const currentSubmissionStage = computed(() => {
 });
 const myEntries = computed(() => entries.value.filter((e) => e.userId === user.value?.id));
 
+// Proposal mode (Phase 4): when the CURRENT submission stage is proposal-mode
+// and proposals are enabled, entrants submit a form (no pre-existing project)
+// and the server creates a draft placeholder. Replaces the attach-an-entry CTA.
+const currentProposalStage = computed(() => {
+  if (!c.value || features.value.contestProposals !== true || c.value.status !== 'active') return null;
+  const source = {
+    status: c.value.status,
+    startDate: c.value.startDate,
+    endDate: c.value.endDate,
+    judgingEndDate: c.value.judgingEndDate ?? null,
+    stages: c.value.stages,
+    currentStageId: c.value.currentStageId,
+  };
+  const stage = normalizeStages(source).find((s) => s.id === currentStageId(source));
+  return stage && stage.kind === 'submission' && stage.submissionMode === 'proposal' && stage.submissionTemplate?.length ? stage : null;
+});
+
+function onProposalSubmitted(projectSlug: string, contentType: string): void {
+  refreshNuxtData();
+  // Route the entrant into their new draft project to develop it for later rounds.
+  // Use the server's ACTUAL created type (not a client guess) so the URL resolves.
+  if (user.value?.username) {
+    navigateTo(`/u/${user.value.username}/${contentType}/${projectSlug}/edit`);
+  }
+}
+
 // Restrict the submit picker to the contest's eligible content types (if set).
 const eligibleTypes = computed<string[]>(() => (c.value?.eligibleContentTypes as string[] | undefined) ?? []);
 const submittableContent = computed(() => {
@@ -311,8 +365,14 @@ async function withdrawEntry(entryId: string): Promise<void> {
           <div v-show="activeTab === 'overview'" id="cpub-panel-overview" role="tabpanel" aria-labelledby="cpub-tab-overview" tabindex="0">
             <div class="cpub-about-section">
               <div class="cpub-sec-head"><h2><i class="fa fa-circle-info" style="color: var(--accent);"></i> About This Contest</h2></div>
+              <img v-if="c?.coverImageUrl" :src="c.coverImageUrl" :alt="`${c?.title || 'Contest'} cover`" class="cpub-about-cover" />
               <div class="cpub-about-card">
-                <CpubMarkdown v-if="c?.description" :source="c.description" :format="c?.descriptionFormat" />
+                <BlocksBlockContentRenderer
+                  v-if="c?.descriptionBlocks?.length"
+                  :blocks="(c.descriptionBlocks as [string, Record<string, unknown>][])"
+                  class="cpub-prose cpub-md"
+                />
+                <CpubMarkdown v-else-if="c?.description" :source="c.description" :format="c?.descriptionFormat" />
                 <p v-else>No description available for this contest.</p>
               </div>
             </div>
@@ -321,12 +381,12 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
           <!-- RULES -->
           <div v-show="activeTab === 'rules'" id="cpub-panel-rules" role="tabpanel" aria-labelledby="cpub-tab-rules" tabindex="0">
-            <ContestRules v-if="c?.rules" :rules="c.rules" :format="c?.rulesFormat" />
+            <ContestRules v-if="c?.rules || c?.rulesBlocks?.length" :rules="c?.rules ?? ''" :blocks="c?.rulesBlocks" :format="c?.rulesFormat" />
           </div>
 
           <!-- PRIZES -->
           <div v-show="activeTab === 'prizes'" id="cpub-panel-prizes" role="tabpanel" aria-labelledby="cpub-tab-prizes" tabindex="0">
-            <ContestPrizes v-if="c?.showPrizes !== false && (c?.prizes?.length || c?.prizesDescription)" :prizes="c?.prizes ?? []" :description="c?.prizesDescription" :format="c?.prizesDescriptionFormat" />
+            <ContestPrizes v-if="c?.showPrizes !== false && (c?.prizes?.length || c?.prizesDescription || c?.prizesBlocks?.length)" :prizes="c?.prizes ?? []" :description="c?.prizesDescription" :blocks="c?.prizesBlocks" :format="c?.prizesDescriptionFormat" />
           </div>
 
           <!-- ENTRIES -->
@@ -338,7 +398,25 @@ async function withdrawEntry(entryId: string): Promise<void> {
               :entries="myEntries"
               @saved="refreshEntries"
             />
-            <div v-if="c?.status === 'active'" class="cpub-entries-cta">
+            <!-- Proposal mode: a first-time entrant submits the form (no project yet). -->
+            <ContestProposalForm
+              v-if="currentProposalStage && isAuthenticated && !myEntries.length"
+              :contest-slug="slug"
+              :stage="currentProposalStage"
+              @submitted="onProposalSubmitted"
+            />
+            <!-- Proposal mode + anonymous: prompt to log in. -->
+            <div v-else-if="currentProposalStage && !isAuthenticated" class="cpub-entries-cta">
+              <div class="cpub-entries-cta-text">
+                <p class="cpub-entries-cta-title"><i class="fa-solid fa-clipboard-list"></i> Submit a proposal</p>
+                <p class="cpub-entries-cta-sub">Log in to submit a proposal for this contest.</p>
+              </div>
+              <NuxtLink :to="`/auth/login?redirect=/contests/${slug}`" class="cpub-btn cpub-btn-primary cpub-btn-lg">
+                <i class="fa-solid fa-right-to-bracket"></i> Log in to enter
+              </NuxtLink>
+            </div>
+            <!-- Attach mode (no proposal stage): the classic enter-with-a-project CTA. -->
+            <div v-if="c?.status === 'active' && !currentProposalStage" class="cpub-entries-cta">
               <div class="cpub-entries-cta-text">
                 <p class="cpub-entries-cta-title"><i class="fa-solid fa-trophy"></i> Enter this contest</p>
                 <p class="cpub-entries-cta-sub">Submit one of your published projects, or start a new one.</p>
@@ -350,6 +428,15 @@ async function withdrawEntry(entryId: string): Promise<void> {
                 <i class="fa-solid fa-right-to-bracket"></i> Log in to enter
               </NuxtLink>
             </div>
+            <div v-if="canManage && entries.length" class="cpub-entries-tools">
+              <a
+                :href="`/api/contests/${slug}/export`"
+                class="cpub-btn cpub-btn-sm"
+                download
+              >
+                <i class="fa-solid fa-file-csv"></i> Export entries (CSV)
+              </a>
+            </div>
             <ContestEntries
               :entries="entries"
               :contest-status="c?.status"
@@ -384,7 +471,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
           </div>
         </div>
 
-        <ContestSidebar :contest="c" :is-owner="isOwner" :can-judge="canJudge" @copy-link="copyLink" />
+        <ContestSidebar :contest="c" :is-owner="isOwner" :can-manage="canManage" :can-judge="canJudge" @copy-link="copyLink" />
       </div>
     </div>
   </div>
@@ -421,6 +508,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
 /* LAYOUT */
 .cpub-contest-main { max-width: 1100px; margin: 0 auto; padding: 32px; }
 
+.cpub-entries-tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }
 .cpub-entries-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 16px 20px; margin-bottom: 18px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
 .cpub-entries-cta-title { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
 .cpub-entries-cta-title i { color: var(--accent); }
@@ -467,6 +555,7 @@ async function withdrawEntry(entryId: string): Promise<void> {
 
 /* ABOUT */
 .cpub-about-section { margin-bottom: 20px; }
+.cpub-about-cover { width: 100%; max-height: 380px; object-fit: cover; display: block; border: var(--border-width-default) solid var(--border); box-shadow: var(--shadow-md); margin-bottom: 16px; }
 .cpub-about-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow-md); font-size: 12px; color: var(--text-dim); line-height: 1.7; }
 .cpub-about-card p { margin: 0; white-space: pre-line; }
 

package/pages/contests/[slug]/judge.vue

@@ -135,8 +135,9 @@ const scoring = ref<Record<string, number>>({});
 const critScoring = ref<Record<string, number[]>>({}); // per entry → [criterionScore...]
 const feedback = ref<Record<string, string>>({});
 const submitting = ref<string | null>(null);
-const error = ref('');
-const success = ref('');
+// Per-card save status (announced via aria-live) so a judge sees the result next
+// to the entry they just scored, not in one banner far up the page (G8).
+const saveStatus = ref<Record<string, { ok: boolean; msg: string }>>({});
 
 // Pre-fill from existing scores
 watch(entryList, (list) => {
@@ -165,9 +166,13 @@ function critTotal(entryId: string): number {
   return Math.round((sum / totalMax) * 100);
 }
 
+function setStatus(entryId: string, ok: boolean, msg: string): void {
+  saveStatus.value[entryId] = { ok, msg };
+}
+
 async function submitScore(entryId: string): Promise<void> {
   if (!inJudgingPhase.value) {
-    error.value = 'Scoring is only open during the judging phase.';
+    setStatus(entryId, false, 'Scoring is only open during the judging phase.');
     return;
   }
 
@@ -180,31 +185,26 @@ async function submitScore(entryId: string): Promise<void> {
       max: critMax(i),
     }));
     if (criteriaScores.some((c) => c.score < 0 || c.score > c.max)) {
-      error.value = 'Each criterion score must be between 0 and its maximum.';
+      setStatus(entryId, false, 'Each criterion score must be between 0 and its maximum.');
       return;
     }
     body = { entryId, criteriaScores, feedback: feedback.value[entryId] || undefined };
   } else {
     const score = scoring.value[entryId];
-    if (score === undefined || score < 1 || score > 100) {
-      error.value = 'Score must be between 1 and 100.';
+    if (score === undefined || score < 0 || score > 100) {
+      setStatus(entryId, false, 'Score must be between 0 and 100.');
       return;
     }
     body = { entryId, score, feedback: feedback.value[entryId] || undefined };
   }
 
-  error.value = '';
-  success.value = '';
   submitting.value = entryId;
-
   try {
     await $fetch(`/api/contests/${slug}/judge`, { method: 'POST', body });
-    success.value = 'Score submitted for entry.';
-    await refreshEntries().catch(() => {
-      success.value = 'Score saved, refresh to see the updated totals.';
-    });
+    setStatus(entryId, true, 'Score saved.');
+    await refreshEntries().catch(() => setStatus(entryId, true, 'Score saved, refresh to see the updated totals.'));
   } catch (err: unknown) {
-    error.value = (err as { data?: { message?: string } })?.data?.message || 'Failed to submit score.';
+    setStatus(entryId, false, (err as { data?: { message?: string } })?.data?.message || 'Failed to submit score.');
   } finally {
     submitting.value = null;
   }
@@ -212,6 +212,9 @@ async function submitScore(entryId: string): Promise<void> {
 </script>
 
 <template>
+  <!-- Auth-gated tool page (no SEO); ClientOnly avoids the lazy-fetch SSR/CSR
+       hydration race on the scoring controls (same rationale as the editor). -->
+  <ClientOnly>
   <div class="cpub-judge-page">
     <header class="cpub-judge-header">
       <NuxtLink :to="`/contests/${slug}`" class="cpub-judge-back">
@@ -223,7 +226,7 @@ async function submitScore(entryId: string): Promise<void> {
         <span v-if="currentReviewStage" class="cpub-judge-round">{{ currentReviewStage.name }}</span>
       </h1>
       <p class="cpub-judge-desc">
-        Score each entry from 1 to 100. Add optional feedback. Scores are saved immediately.
+        Score each entry from 0 to 100. Add optional feedback. Scores are saved immediately.
         <template v-if="currentReviewStage"> You're judging the <strong>{{ entryList.length }}</strong> {{ entryList.length === 1 ? 'entry' : 'entries' }} still in this round.</template>
       </p>
     </header>
@@ -278,9 +281,6 @@ async function submitScore(entryId: string): Promise<void> {
         </div>
       </div>
 
-      <div v-if="error" class="cpub-judge-alert cpub-judge-alert--error" role="alert">{{ error }}</div>
-      <div v-if="success" class="cpub-judge-alert cpub-judge-alert--success">{{ success }}</div>
-
       <div v-if="entryList.length === 0" class="cpub-judge-empty">
         <i class="fa-solid fa-inbox"></i>
         <p>No entries to judge yet.</p>
@@ -320,11 +320,13 @@ async function submitScore(entryId: string): Promise<void> {
             </div>
             <div class="cpub-judge-score-controls">
               <!-- Per-criterion scoring (when the contest defines a rubric) -->
-              <div v-if="hasCriteria && critScoring[entry.id]" class="cpub-judge-criteria-inputs">
+              <fieldset v-if="hasCriteria && critScoring[entry.id]" class="cpub-judge-criteria-inputs">
+                <legend class="cpub-sr-only">Scores by criterion for {{ entry.contentTitle }}</legend>
                 <div v-for="(crit, i) in criteria" :key="i" class="cpub-judge-crit-row">
-                  <label class="cpub-judge-crit-label">{{ crit.label }}</label>
+                  <label :for="`crit-${entry.id}-${i}`" class="cpub-judge-crit-label">{{ crit.label }}</label>
                   <div class="cpub-judge-crit-input-wrap">
                     <input
+                      :id="`crit-${entry.id}-${i}`"
                       v-model.number="critScoring[entry.id][i]"
                       type="number"
                       class="cpub-judge-crit-input"
@@ -336,7 +338,7 @@ async function submitScore(entryId: string): Promise<void> {
                   </div>
                 </div>
                 <div class="cpub-judge-crit-total">Overall <strong>{{ critTotal(entry.id) }}</strong> / 100</div>
-              </div>
+              </fieldset>
 
               <div class="cpub-judge-score-input-wrap">
                 <input
@@ -344,10 +346,10 @@ async function submitScore(entryId: string): Promise<void> {
                   v-model.number="scoring[entry.id]"
                   type="number"
                   class="cpub-judge-score-input"
-                  min="1"
+                  min="0"
                   max="100"
-                  placeholder="1-100"
-                  aria-label="Overall score, 1 to 100"
+                  placeholder="0-100"
+                  :aria-label="`Overall score for ${entry.contentTitle}, 0 to 100`"
                 />
                 <button
                   class="cpub-judge-score-btn"
@@ -357,19 +359,35 @@ async function submitScore(entryId: string): Promise<void> {
                   {{ submitting === entry.id ? '...' : entry.myScore !== null ? 'Update' : 'Score' }}
                 </button>
               </div>
+              <label :for="`fb-${entry.id}`" class="cpub-sr-only">Feedback for {{ entry.contentTitle }}</label>
               <textarea
+                :id="`fb-${entry.id}`"
                 v-model="feedback[entry.id]"
                 class="cpub-judge-feedback"
                 placeholder="Optional feedback (max 2000 chars)"
                 maxlength="2000"
                 rows="2"
               ></textarea>
+              <p
+                v-if="saveStatus[entry.id]"
+                class="cpub-judge-save-status"
+                :class="saveStatus[entry.id]!.ok ? 'is-ok' : 'is-err'"
+                role="status"
+                aria-live="polite"
+              >
+                <i :class="saveStatus[entry.id]!.ok ? 'fa-solid fa-circle-check' : 'fa-solid fa-circle-exclamation'"></i>
+                {{ saveStatus[entry.id]!.msg }}
+              </p>
+              <p v-else-if="!inJudgingPhase" class="cpub-judge-save-status is-muted">
+                Scoring opens in the judging phase.
+              </p>
             </div>
           </div>
         </div>
       </div>
     </template>
   </div>
+  </ClientOnly>
 </template>
 
 <style scoped>
@@ -426,13 +444,13 @@ async function submitScore(entryId: string): Promise<void> {
 .cpub-judge-score-label { display: block; font-family: var(--font-mono); font-size: 9px; color: var(--text-faint); text-transform: uppercase; }
 .cpub-judge-score-value { font-size: 20px; font-weight: 700; color: var(--accent); font-family: var(--font-mono); }
 .cpub-judge-score-controls { display: flex; flex-direction: column; gap: 6px; }
-.cpub-judge-criteria-inputs { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: var(--border-width-default) dashed var(--border); background: var(--surface2); margin-bottom: 2px; }
+.cpub-judge-criteria-inputs { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: var(--border-width-default) dashed var(--border); background: var(--surface2); margin: 0 0 2px; min-inline-size: 0; }
 .cpub-judge-crit-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
 .cpub-judge-crit-label { font-size: 11px; color: var(--text-dim); flex: 1; min-width: 0; }
 .cpub-judge-crit-input-wrap { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
 .cpub-judge-crit-input { width: 52px; padding: 4px 6px; border: var(--border-width-default) solid var(--border); background: var(--surface); color: var(--text); font-size: 12px; font-family: var(--font-mono); text-align: center; outline: none; }
 .cpub-judge-crit-input:focus { border-color: var(--accent); }
-.cpub-judge-crit-max { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
+.cpub-judge-crit-max { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); }
 .cpub-judge-crit-total { font-size: 11px; font-family: var(--font-mono); color: var(--text-dim); text-align: right; padding-top: 4px; border-top: var(--border-width-default) solid var(--border); }
 .cpub-judge-crit-total strong { color: var(--accent); font-size: 13px; }
 .cpub-judge-score-input-wrap { display: flex; gap: 0; }
@@ -452,6 +470,11 @@ async function submitScore(entryId: string): Promise<void> {
   color: var(--text); font-size: 11px; font-family: inherit; resize: vertical; outline: none;
 }
 .cpub-judge-feedback:focus { border-color: var(--accent); }
+.cpub-judge-save-status { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; font-size: 11px; font-family: var(--font-mono); }
+.cpub-judge-save-status.is-ok { color: var(--green); }
+.cpub-judge-save-status.is-err { color: var(--red); }
+.cpub-judge-save-status.is-muted { color: var(--text-faint); }
+.cpub-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
 
 @media (max-width: 768px) {
   .cpub-judge-entry { flex-direction: column; }