@commonpub/layer 0.82.0 → 0.83.0

package/components/contest/ContestEntries.vue

@@ -119,7 +119,7 @@ function entryLink(entry: Serialized<ContestEntryItem>): string {
               <span v-else>{{ (entry.authorName || entry.authorUsername || '?').charAt(0).toUpperCase() }}</span>
             </div>
             <NuxtLink v-if="entry.authorUsername" :to="`/u/${entry.authorUsername}`" class="cpub-entry-author-link">{{ entry.authorName }}</NuxtLink>
-            <span class="cpub-entry-meta">{{ new Date(entry.submittedAt).toLocaleDateString('en-US', { month: 'short', day: 'numeric' }) }}</span>
+            <span class="cpub-entry-meta">{{ formatLocalDate(entry.submittedAt, { year: false }) }}</span>
           </div>
           <div class="cpub-entry-footer">
             <span v-if="entry.score != null" class="cpub-entry-score">Score: {{ entry.score }}</span>

package/components/contest/ContestEntryPrivateData.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+/**
+ * ContestEntryPrivateData — the in-app viewer for an entry's partitioned personal
+ * data: PII fields (addresses, etc. stored in contest_entry_private_fields) and
+ * agreement acceptances (contest_agreement_acceptances). Presentational only — the
+ * parent fetches `/api/contests/:slug/entries/:entryId/private` CLIENT-SIDE (so PII
+ * never lands in the SSR payload) and passes the result here. The endpoint already
+ * gates access to the entrant + `contest.pii` holders; this component just renders.
+ *
+ * `template` is the flat list of every stage's submission-template fields, used to
+ * label PII keys + detect `address` fields (rendered as a formatted block rather
+ * than raw JSON). Unknown keys fall back to the raw key + value.
+ */
+import { ADDRESS_SUBFIELDS, parseAddress } from '../../utils/contestSubmission';
+
+interface TemplateField { key: string; label: string; type: string }
+interface Agreement { fieldKey: string; stageId: string; termsHash: string; termsSnapshot: string; acceptedAt: string | Date; ip?: string | null }
+
+const props = defineProps<{
+  fields: Record<string, string>;
+  agreements: Agreement[];
+  template: TemplateField[];
+  updatedAt?: string | Date | null;
+}>();
+
+const byKey = computed(() => new Map(props.template.map((f) => [f.key, f])));
+
+interface FieldRow { key: string; label: string; isAddress: boolean; value: string; addressLines: string[] }
+const fieldRows = computed<FieldRow[]>(() =>
+  Object.entries(props.fields).map(([key, value]) => {
+    const f = byKey.value.get(key);
+    const isAddress = f?.type === 'address';
+    return { key, label: f?.label ?? key, isAddress, value, addressLines: isAddress ? formatAddress(value) : [] };
+  }),
+);
+
+function formatAddress(json: string): string[] {
+  const a = parseAddress(json);
+  const cityLine = [a.city, a.region].filter(Boolean).join(', ') + (a.postal ? ` ${a.postal}` : '');
+  return [a.line1, a.line2, cityLine.trim(), a.country].map((l) => (l ?? '').trim()).filter(Boolean);
+}
+
+function agreementLabel(fieldKey: string): string {
+  return byKey.value.get(fieldKey)?.label ?? fieldKey;
+}
+function fmtDate(d: string | Date): string {
+  const dt = typeof d === 'string' ? new Date(d) : d;
+  if (Number.isNaN(dt.getTime())) return '';
+  return dt.toLocaleString('en-US', { month: 'short', day: 'numeric', year: 'numeric', hour: 'numeric', minute: '2-digit' });
+}
+
+const hasData = computed(() => fieldRows.value.length > 0 || props.agreements.length > 0);
+</script>
+
+<template>
+  <section v-if="hasData" class="cpub-epd" aria-labelledby="cpub-epd-head">
+    <div class="cpub-epd-bar">
+      <h2 id="cpub-epd-head" class="cpub-epd-head"><i class="fa-solid fa-user-shield"></i> Personal information</h2>
+      <span class="cpub-epd-note"><i class="fa-solid fa-lock"></i> Visible only to you and authorized contest organizers — never shown publicly or to judges.</span>
+    </div>
+
+    <dl v-if="fieldRows.length" class="cpub-epd-fields">
+      <template v-for="row in fieldRows" :key="row.key">
+        <dt>{{ row.label }}</dt>
+        <dd>
+          <address v-if="row.isAddress && row.addressLines.length" class="cpub-epd-address">
+            <span v-for="(line, i) in row.addressLines" :key="i">{{ line }}</span>
+          </address>
+          <span v-else>{{ row.value }}</span>
+        </dd>
+      </template>
+    </dl>
+
+    <div v-if="agreements.length" class="cpub-epd-agreements">
+      <h3 class="cpub-epd-subhead">Agreement acceptances</h3>
+      <ul class="cpub-epd-agree-list">
+        <li v-for="(a, i) in agreements" :key="`${a.fieldKey}-${a.stageId}-${i}`" class="cpub-epd-agree">
+          <div class="cpub-epd-agree-top">
+            <span class="cpub-epd-agree-label"><i class="fa-solid fa-circle-check"></i> {{ agreementLabel(a.fieldKey) }}</span>
+            <span class="cpub-epd-agree-when">Accepted {{ fmtDate(a.acceptedAt) }}<template v-if="a.ip"> · from {{ a.ip }}</template></span>
+          </div>
+          <details v-if="a.termsSnapshot" class="cpub-epd-terms">
+            <summary>View the terms accepted</summary>
+            <p class="cpub-epd-terms-text">{{ a.termsSnapshot }}</p>
+          </details>
+          <code v-if="a.termsHash" class="cpub-epd-hash" :title="`SHA-256 of the accepted terms (${a.stageId})`">sha256:{{ a.termsHash.slice(0, 16) }}…</code>
+        </li>
+      </ul>
+    </div>
+
+    <p v-if="updatedAt" class="cpub-epd-updated">Last updated {{ fmtDate(updatedAt) }}</p>
+  </section>
+</template>
+
+<style scoped>
+.cpub-epd { border: var(--border-width-default) dashed var(--accent-border); background: var(--accent-bg); box-shadow: var(--shadow-md); margin-bottom: 22px; }
+.cpub-epd-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-bottom: var(--border-width-default) solid var(--accent-border); }
+.cpub-epd-head { font-size: 14px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0; }
+.cpub-epd-head i { color: var(--accent); }
+.cpub-epd-note { font-size: 10px; color: var(--text-dim); font-family: var(--font-mono); display: inline-flex; align-items: center; gap: 5px; }
+.cpub-epd-note i { color: var(--text-faint); }
+
+.cpub-epd-fields { margin: 0; padding: 14px 16px; display: grid; grid-template-columns: minmax(120px, 200px) 1fr; gap: 8px 16px; }
+.cpub-epd-fields dt { font-size: 11px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .05em; color: var(--text-dim); }
+.cpub-epd-fields dd { margin: 0; font-size: 13px; color: var(--text); line-height: 1.6; overflow-wrap: anywhere; }
+.cpub-epd-address { font-style: normal; display: flex; flex-direction: column; }
+
+.cpub-epd-agreements { padding: 0 16px 14px; }
+.cpub-epd-subhead { font-size: 11px; font-weight: 700; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); margin: 8px 0 8px; }
+.cpub-epd-agree-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
+.cpub-epd-agree { border: var(--border-width-default) solid var(--border); background: var(--surface); padding: 10px 12px; }
+.cpub-epd-agree-top { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
+.cpub-epd-agree-label { font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
+.cpub-epd-agree-label i { color: var(--green); font-size: 11px; }
+.cpub-epd-agree-when { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
+.cpub-epd-terms { margin: 8px 0 4px; }
+.cpub-epd-terms summary { font-size: 11px; color: var(--accent); cursor: pointer; }
+.cpub-epd-terms-text { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 8px 0 0; white-space: pre-line; }
+.cpub-epd-hash { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); }
+.cpub-epd-updated { font-size: 10px; color: var(--text-faint); font-family: var(--font-mono); margin: 0; padding: 0 16px 12px; }
+
+@media (max-width: 600px) {
+  .cpub-epd-fields { grid-template-columns: 1fr; gap: 2px 0; }
+  .cpub-epd-fields dd { margin-bottom: 8px; }
+}
+</style>

package/components/contest/ContestHero.vue

@@ -16,6 +16,13 @@ const emit = defineEmits<{
 
 const c = computed(() => props.contest);
 
+// Local wall-clock formatting (dates) and the live countdown are timezone- and
+// clock-dependent, so they would mismatch between the server's TZ and the viewer's
+// on hydration (and Vue won't rectify it in prod). Gate them on a client `mounted`
+// flag: SSR + the first hydration tick render nothing, then the viewer-local value
+// fills in on mount.
+const mounted = ref(false);
+
 // Countdown timer
 const countdown = ref({ days: '00', hours: '00', mins: '00', secs: '00' });
 const targetPassed = ref(false);
@@ -48,6 +55,7 @@ function updateCountdown(): void {
 }
 
 onMounted(() => {
+  mounted.value = true;
   updateCountdown();
   countdownInterval = setInterval(updateCountdown, 1000);
 });
@@ -56,6 +64,18 @@ onUnmounted(() => {
   if (countdownInterval) clearInterval(countdownInterval);
 });
 
+// Compact "5d 12h" style remaining-time string for the inline countdown chip.
+const compactCountdown = computed<string>(() => {
+  const d = Number(countdown.value.days);
+  const h = Number(countdown.value.hours);
+  const m = Number(countdown.value.mins);
+  const s = Number(countdown.value.secs);
+  if (d > 0) return `${d}d ${h}h`;
+  if (h > 0) return `${h}h ${m}m`;
+  if (m > 0) return `${m}m ${s}s`;
+  return `${s}s`;
+});
+
 const countdownLabel = computed(() => {
   const s = c.value?.status;
   if (s === 'completed' || s === 'cancelled') return 'Contest ended';
@@ -67,19 +87,18 @@ const countdownLabel = computed(() => {
 const isEnded = computed(() => c.value?.status === 'completed' || c.value?.status === 'cancelled');
 const isPaused = computed(() => c.value?.status === 'paused');
 const isDraft = computed(() => c.value?.status === 'draft');
-// Live countdown only while the clock is actually running AND its target is still
-// in the future. Once the target passes (an upcoming contest whose open date has
-// arrived, or an active one past its close), fall back to a static date note.
-const showCountdown = computed(() => !isEnded.value && !isPaused.value && !isDraft.value && !!countdownTargetStr.value && !targetPassed.value);
+// Live countdown only while the clock is actually running (client) AND its target
+// is still in the future. Before mount the target hasn't been evaluated, so show
+// nothing live yet (the static fallbacks below cover ended/paused/draft).
+const showCountdown = computed(() => mounted.value && !isEnded.value && !isPaused.value && !isDraft.value && !!countdownTargetStr.value && !targetPassed.value);
 
 function fmtDate(s: string | null | undefined): string {
-  if (!s) return '';
-  return new Date(s).toLocaleDateString('en-US', { month: 'short', day: 'numeric', year: 'numeric' });
+  return mounted.value ? formatLocalDate(s) : '';
 }
 // Static date shown when the relevant target is in the past but the contest hasn't
 // been advanced yet (e.g. an upcoming contest whose open date arrived).
 const dateNote = computed<string | null>(() => {
-  if (isEnded.value || isPaused.value || isDraft.value || !targetPassed.value) return null;
+  if (!mounted.value || isEnded.value || isPaused.value || isDraft.value || !targetPassed.value) return null;
   if (c.value?.status === 'upcoming') return c.value?.startDate ? `Opens ${fmtDate(c.value.startDate)}` : null;
   return c.value?.endDate ? `Closed ${fmtDate(c.value.endDate)}` : null;
 });
@@ -99,8 +118,8 @@ const tagline = computed<string>(() => {
   return markdownToExcerpt(c.value?.description) || '';
 });
 
-// Phase B1 — when a contest defines explicit stages, surface the current stage's
-// name beside the status pill (default-flow contests show nothing extra).
+// When a contest defines explicit stages, surface the current stage's name beside
+// the status pill (default-flow contests show nothing extra).
 const currentStageName = computed<string | null>(() => {
   const cv = c.value;
   if (!cv || !cv.stages || cv.stages.length === 0) return null;
@@ -109,115 +128,70 @@ const currentStageName = computed<string | null>(() => {
 });
 
 const dateRange = computed<string>(() => {
-  const fmt = (d: string, withYear = false) =>
-    new Date(d).toLocaleDateString('en-US', { month: 'short', day: 'numeric', ...(withYear ? { year: 'numeric' } : {}) });
-  const start = c.value?.startDate ? fmt(c.value.startDate) : '';
-  const end = c.value?.endDate ? fmt(c.value.endDate, true) : '';
-  if (start && end) return `${start}, ${end}`;
+  if (!mounted.value) return '';
+  const start = c.value?.startDate ? formatLocalDate(c.value.startDate, { year: false }) : '';
+  const end = c.value?.endDate ? formatLocalDate(c.value.endDate) : '';
+  if (start && end) return `${start} to ${end}`;
   return start || end;
 });
+
+const entryCount = computed<number>(() => c.value?.entryCount ?? 0);
 </script>
 
 <template>
   <div class="cpub-hero">
-    <!-- Banner band — full-width image at the top, the same way other content
-         pages render their hero banner (clean band, never overlaid by text). -->
+    <!-- Slim banner band (constrained) — the hero image, not a tall block. -->
     <div v-if="c?.bannerUrl" class="cpub-hero-banner">
       <img :src="c.bannerUrl" :alt="`${c?.title || 'Contest'} banner`" />
     </div>
 
-    <!-- Hero body — the contest's dark, patterned section. Two columns:
-         title + details on the left, the countdown on the right. -->
-    <div class="cpub-hero-body">
-      <div class="cpub-hero-pattern" aria-hidden="true">
-        <div class="cpub-hero-dots"></div>
-        <div class="cpub-hero-lines"></div>
-      </div>
-
-      <div class="cpub-hero-inner">
+    <!-- Compact bar — title + status + meta + actions in one tight, clean band
+         (replaces the old tall, dark, patterned hero). -->
+    <div class="cpub-hero-bar">
+      <div class="cpub-hero-bar-inner">
         <div v-if="c?.status === 'cancelled'" class="cpub-cancelled-banner">
           <i class="fa-solid fa-ban"></i> This contest has been cancelled.
         </div>
 
-        <div class="cpub-hero-grid">
-          <!-- LEFT: title + details + actions -->
-          <div class="cpub-hero-main">
-            <div class="cpub-hero-eyebrow">
-              <span class="cpub-contest-badge"><i class="fa fa-trophy"></i> Contest</span>
-              <span class="cpub-status-pill" :data-status="c?.status || 'upcoming'">{{ c?.status || 'upcoming' }}</span>
-              <span v-if="currentStageName" class="cpub-stage-chip"><i class="fa-solid fa-diagram-project"></i> {{ currentStageName }}</span>
-            </div>
-
-            <h1 class="cpub-hero-title">{{ c?.title || 'Contest' }}</h1>
-            <p v-if="tagline" class="cpub-hero-tagline">{{ tagline }}</p>
-
-            <div class="cpub-hero-meta">
-              <span v-if="dateRange" class="cpub-hero-meta-item"><i class="fa fa-calendar"></i> {{ dateRange }}</span>
-              <span class="cpub-hero-meta-item"><i class="fa fa-folder-open"></i> {{ c?.entryCount ?? 0 }} {{ (c?.entryCount ?? 0) === 1 ? 'entry' : 'entries' }}</span>
-            </div>
-
-            <div class="cpub-hero-cta">
-              <button v-if="isAuthenticated && c?.status === 'active'" class="cpub-btn cpub-btn-primary cpub-btn-lg" @click="emit('submit-entry')"><i class="fa fa-upload"></i> Submit Entry</button>
-              <button class="cpub-btn cpub-btn-lg cpub-btn-dark" @click="emit('copy-link')"><i class="fa fa-link"></i> Share</button>
-            </div>
-
-            <!-- Admin controls — bidirectional, derived from the valid-transition map. -->
-            <div v-if="isAdmin && c" class="cpub-admin-controls">
-              <span class="cpub-admin-controls-label"><i class="fa-solid fa-shield-halved"></i> Stage</span>
-              <button
-                v-for="t in availableTransitions"
-                :key="t"
-                class="cpub-btn cpub-btn-sm"
-                :class="{ 'cpub-btn-cancel': t === 'cancelled' }"
-                :disabled="transitioning"
-                @click="emit('transition', t)"
-              ><i class="fa-solid" :class="statusAction(t).icon"></i> {{ statusAction(t).label }}</button>
-            </div>
+        <div class="cpub-hero-top">
+          <span class="cpub-contest-badge"><i class="fa fa-trophy"></i> Contest</span>
+          <span class="cpub-status-pill" :data-status="c?.status || 'upcoming'">{{ c?.status || 'upcoming' }}</span>
+          <span v-if="currentStageName" class="cpub-stage-chip"><i class="fa-solid fa-diagram-project"></i> {{ currentStageName }}</span>
+
+          <span v-if="showCountdown" class="cpub-countdown-chip">
+            <i class="fa fa-clock"></i> {{ countdownLabel }} <strong>{{ compactCountdown }}</strong>
+          </span>
+          <span v-else-if="isPaused" class="cpub-countdown-chip cpub-countdown-chip-muted"><i class="fa-solid fa-circle-pause"></i> Submissions paused</span>
+          <span v-else-if="isDraft" class="cpub-countdown-chip cpub-countdown-chip-muted"><i class="fa-solid fa-pen-ruler"></i> Draft, not launched</span>
+          <span v-else-if="dateNote" class="cpub-countdown-chip cpub-countdown-chip-muted"><i class="fa-regular fa-calendar"></i> {{ dateNote }}</span>
+          <span v-else-if="isEnded" class="cpub-countdown-chip cpub-countdown-chip-muted"><i class="fa-solid fa-flag-checkered"></i> {{ countdownLabel }}</span>
+        </div>
+
+        <h1 class="cpub-hero-title">{{ c?.title || 'Contest' }}</h1>
+        <p v-if="tagline" class="cpub-hero-tagline">{{ tagline }}</p>
+
+        <div class="cpub-hero-foot">
+          <div class="cpub-hero-meta">
+            <span v-if="dateRange" class="cpub-hero-meta-item"><i class="fa fa-calendar"></i> {{ dateRange }}</span>
+            <span class="cpub-hero-meta-item"><i class="fa fa-folder-open"></i> {{ entryCount }} {{ entryCount === 1 ? 'entry' : 'entries' }}</span>
           </div>
+          <div class="cpub-hero-cta">
+            <button v-if="isAuthenticated && c?.status === 'active'" class="cpub-btn cpub-btn-primary" @click="emit('submit-entry')"><i class="fa fa-upload"></i> Submit Entry</button>
+            <button class="cpub-btn" @click="emit('copy-link')"><i class="fa fa-link"></i> Share</button>
+          </div>
+        </div>
 
-          <!-- RIGHT: countdown -->
-          <aside class="cpub-hero-side">
-            <div v-if="showCountdown" class="cpub-countdown-section">
-              <div class="cpub-countdown-label"><i class="fa fa-clock"></i> {{ countdownLabel }}</div>
-              <div class="cpub-countdown-row">
-                <div class="cpub-countdown-block">
-                  <div class="cpub-countdown-val">{{ countdown.days }}</div>
-                  <div class="cpub-countdown-unit">Days</div>
-                </div>
-                <div class="cpub-countdown-sep">:</div>
-                <div class="cpub-countdown-block">
-                  <div class="cpub-countdown-val">{{ countdown.hours }}</div>
-                  <div class="cpub-countdown-unit">Hours</div>
-                </div>
-                <div class="cpub-countdown-sep">:</div>
-                <div class="cpub-countdown-block">
-                  <div class="cpub-countdown-val">{{ countdown.mins }}</div>
-                  <div class="cpub-countdown-unit">Minutes</div>
-                </div>
-                <div class="cpub-countdown-sep">:</div>
-                <div class="cpub-countdown-block">
-                  <div class="cpub-countdown-val">{{ countdown.secs }}</div>
-                  <div class="cpub-countdown-unit">Seconds</div>
-                </div>
-              </div>
-            </div>
-            <div v-else-if="isPaused" class="cpub-countdown-ended">
-              <i class="fa-solid fa-circle-pause"></i>
-              <span>Submissions paused</span>
-            </div>
-            <div v-else-if="isDraft" class="cpub-countdown-ended">
-              <i class="fa-solid fa-pen-ruler"></i>
-              <span>Draft, not launched</span>
-            </div>
-            <div v-else-if="dateNote" class="cpub-countdown-ended">
-              <i class="fa-regular fa-calendar"></i>
-              <span>{{ dateNote }}</span>
-            </div>
-            <div v-else class="cpub-countdown-ended">
-              <i class="fa-solid fa-flag-checkered"></i>
-              <span>{{ countdownLabel }}</span>
-            </div>
-          </aside>
+        <!-- Admin controls — bidirectional, derived from the valid-transition map. -->
+        <div v-if="isAdmin && c" class="cpub-admin-controls">
+          <span class="cpub-admin-controls-label"><i class="fa-solid fa-shield-halved"></i> Stage</span>
+          <button
+            v-for="t in availableTransitions"
+            :key="t"
+            class="cpub-btn cpub-btn-sm"
+            :class="{ 'cpub-btn-cancel': t === 'cancelled' }"
+            :disabled="transitioning"
+            @click="emit('transition', t)"
+          ><i class="fa-solid" :class="statusAction(t).icon"></i> {{ statusAction(t).label }}</button>
         </div>
       </div>
     </div>
@@ -225,112 +199,66 @@ const dateRange = computed<string>(() => {
 </template>
 
 <style scoped>
-.cpub-hero {
-  --hero-bg: var(--text);
-  --hero-text: var(--color-text-inverse);
-  --hero-text-dim: var(--text-faint);
-  /* Alpha of the hero foreground so the structure lines/surfaces track the
-     inverted hero in both themes (white-on-dark in light mode, dark-on-light
-     in dark mode) instead of vanishing white-on-white. */
-  --hero-border: color-mix(in srgb, var(--hero-text) 18%, transparent);
-  --hero-surface: color-mix(in srgb, var(--hero-text) 7%, transparent);
-}
-
-/* ── BANNER BAND ── full-width, clean, like other content pages' hero banner. */
+/* ── SLIM BANNER ── constrained hero image (was a tall ≤360px band). */
 .cpub-hero-banner {
   width: 100%;
-  /* Match the 4:1 upload crop so the banner shows exactly as framed (WYSIWYG)
-     instead of being re-cropped by a fixed height. */
   aspect-ratio: 4 / 1;
-  max-height: 360px;
+  max-height: 220px;
   background: var(--surface2);
   border-bottom: var(--border-width-default) solid var(--border);
   overflow: hidden;
 }
-.cpub-hero-banner img {
-  display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-}
+.cpub-hero-banner img { display: block; width: 100%; height: 100%; object-fit: cover; }
 
-/* ── HERO BODY ── the contest's dark, patterned section. */
-.cpub-hero-body {
-  position: relative;
-  overflow: hidden;
-  background: var(--hero-bg);
-  padding: 44px 0;
-}
-.cpub-hero-pattern { position: absolute; inset: 0; }
-.cpub-hero-dots { position: absolute; inset: 0; background-image: radial-gradient(var(--accent-border) 1.5px, transparent 1.5px); background-size: 28px 28px; opacity: .3; }
-.cpub-hero-lines { position: absolute; inset: 0; background-image: linear-gradient(var(--accent-bg) 1px, transparent 1px), linear-gradient(90deg, var(--accent-bg) 1px, transparent 1px); background-size: 56px 56px; }
-.cpub-hero-inner { max-width: 1100px; margin: 0 auto; padding: 0 32px; position: relative; z-index: 1; }
+/* ── COMPACT BAR ── one tight, clean band on a surface background. */
+.cpub-hero-bar { background: var(--surface); border-bottom: var(--border-width-default) solid var(--border); }
+.cpub-hero-bar-inner { max-width: 1100px; margin: 0 auto; padding: 20px 32px; }
 
-.cpub-cancelled-banner { background: var(--red-bg); border: var(--border-width-default) solid var(--red-border); color: var(--red); padding: 10px 14px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }
+.cpub-cancelled-banner { background: var(--red-bg); border: var(--border-width-default) solid var(--red-border); color: var(--red); padding: 10px 14px; font-size: 12px; font-weight: 600; display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
 
-/* 2-column: details (flex) + countdown (auto width). */
-.cpub-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: start; }
-.cpub-hero-main { min-width: 0; }
-
-.cpub-hero-eyebrow { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
+.cpub-hero-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
 .cpub-contest-badge { font-size: 9px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-family: var(--font-mono); color: var(--accent); background: var(--accent-bg); border: var(--border-width-default) solid var(--accent); padding: 3px 10px; border-radius: var(--radius); display: inline-flex; align-items: center; gap: 5px; }
 .cpub-contest-badge i { font-size: 8px; }
-.cpub-status-pill { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-mono); padding: 3px 10px; border-radius: var(--radius); border: var(--border-width-default) solid var(--hero-border); color: var(--hero-text-dim); }
-.cpub-status-pill[data-status="active"] { color: var(--green); border-color: var(--green); background: color-mix(in srgb, var(--green) 14%, transparent); }
-.cpub-status-pill[data-status="judging"] { color: var(--accent); border-color: var(--accent); background: var(--accent-bg); }
-.cpub-status-pill[data-status="upcoming"] { color: var(--yellow); border-color: var(--yellow); }
-.cpub-status-pill[data-status="paused"] { color: var(--yellow); border-color: var(--yellow); background: color-mix(in srgb, var(--yellow) 12%, transparent); }
-.cpub-status-pill[data-status="draft"] { color: var(--hero-text-dim); border-color: var(--hero-border); border-style: dashed; }
-.cpub-status-pill[data-status="completed"], .cpub-status-pill[data-status="cancelled"] { color: var(--red); border-color: var(--red-border); }
-.cpub-stage-chip { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono); padding: 3px 10px; border-radius: var(--radius); border: var(--border-width-default) solid var(--accent); color: var(--accent); background: var(--accent-bg); display: inline-flex; align-items: center; gap: 5px; }
+.cpub-status-pill { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; font-family: var(--font-mono); padding: 3px 10px; border-radius: var(--radius); border: var(--border-width-default) solid var(--border2); color: var(--text-dim); }
+.cpub-status-pill[data-status="active"] { color: var(--green); border-color: var(--green-border); background: var(--green-bg); }
+.cpub-status-pill[data-status="judging"] { color: var(--accent); border-color: var(--accent-border); background: var(--accent-bg); }
+.cpub-status-pill[data-status="upcoming"] { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
+.cpub-status-pill[data-status="paused"] { color: var(--yellow); border-color: var(--yellow-border); background: var(--yellow-bg); }
+.cpub-status-pill[data-status="draft"] { color: var(--text-faint); border-color: var(--border2); border-style: dashed; }
+.cpub-status-pill[data-status="completed"], .cpub-status-pill[data-status="cancelled"] { color: var(--red); border-color: var(--red-border); background: var(--red-bg); }
+.cpub-stage-chip { font-size: 9px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-family: var(--font-mono); padding: 3px 10px; border-radius: var(--radius); border: var(--border-width-default) solid var(--accent-border); color: var(--accent); background: var(--accent-bg); display: inline-flex; align-items: center; gap: 5px; }
 .cpub-stage-chip i { font-size: 8px; }
 
-.cpub-hero-title { font-size: 34px; font-weight: 800; letter-spacing: -.03em; line-height: 1.1; margin: 0 0 10px; color: var(--hero-text); }
-.cpub-hero-tagline { font-size: 14px; color: var(--hero-text-dim); line-height: 1.55; max-width: 600px; margin: 0 0 20px; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
-.cpub-hero-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--hero-text-dim); font-family: var(--font-mono); margin-bottom: 24px; }
-.cpub-hero-meta-item { display: flex; align-items: center; gap: 6px; }
+/* Inline countdown chip (pushed to the right of the top row). */
+.cpub-countdown-chip { margin-left: auto; font-size: 10px; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-dim); background: var(--surface2); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 4px 10px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
+.cpub-countdown-chip i { color: var(--accent); }
+.cpub-countdown-chip strong { color: var(--accent); font-weight: 700; }
+.cpub-countdown-chip-muted i { color: var(--text-faint); }
+
+.cpub-hero-title { font-size: 26px; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; margin: 0 0 6px; color: var(--text); }
+.cpub-hero-tagline { font-size: 13px; color: var(--text-dim); line-height: 1.55; max-width: 680px; margin: 0 0 14px; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
 
-.cpub-hero-cta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
-.cpub-btn-lg { padding: 10px 22px; font-size: 13px; }
-.cpub-btn-dark { background: var(--hero-surface); color: var(--hero-text); border-color: var(--hero-border); }
-.cpub-btn-dark:hover { background: var(--hero-surface); }
+.cpub-hero-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
+.cpub-hero-meta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-size: 11px; color: var(--text-faint); font-family: var(--font-mono); }
+.cpub-hero-meta-item { display: flex; align-items: center; gap: 6px; }
+.cpub-hero-cta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
 .cpub-btn-cancel { color: var(--red); border-color: var(--red-border); }
 .cpub-btn-cancel:hover { background: var(--red-bg); }
 
-.cpub-admin-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 18px; padding: 10px 14px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
+.cpub-admin-controls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding: 10px 14px; background: var(--accent-bg); border: var(--border-width-default) solid var(--accent-border); }
 .cpub-admin-controls-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); margin-right: 4px; font-family: var(--font-mono); }
 
-/* ── COUNTDOWN (right column) ── */
-.cpub-hero-side { display: flex; flex-direction: column; }
-.cpub-countdown-section { background: var(--hero-surface); border: var(--border-width-default) solid var(--hero-border); border-radius: var(--radius); padding: 16px 18px; }
-.cpub-countdown-label { font-size: 10px; font-family: var(--font-mono); color: var(--hero-text-dim); letter-spacing: .1em; text-transform: uppercase; margin-bottom: 12px; display: flex; align-items: center; gap: 5px; white-space: nowrap; }
-.cpub-countdown-label i { color: var(--accent); }
-.cpub-countdown-row { display: flex; align-items: flex-start; gap: 8px; }
-.cpub-countdown-block { display: flex; flex-direction: column; align-items: center; background: var(--hero-bg); border: var(--border-width-default) solid var(--hero-border); border-radius: var(--radius); padding: 10px 14px; min-width: 56px; }
-.cpub-countdown-val { font-size: 24px; font-weight: 700; font-family: var(--font-mono); color: var(--hero-text); line-height: 1; margin-bottom: 4px; }
-.cpub-countdown-unit { font-size: 8px; text-transform: uppercase; letter-spacing: .1em; color: var(--hero-text-dim); font-family: var(--font-mono); }
-.cpub-countdown-sep { font-size: 20px; font-weight: 700; color: var(--hero-border); font-family: var(--font-mono); padding-top: 10px; }
-.cpub-countdown-ended { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--hero-text-dim); background: var(--hero-surface); border: var(--border-width-default) solid var(--hero-border); border-radius: var(--radius); padding: 14px 18px; }
-.cpub-countdown-ended i { color: var(--accent); }
-
-/* ── RESPONSIVE ── stack the countdown below the details. */
-@media (max-width: 900px) {
-  .cpub-hero-grid { grid-template-columns: 1fr; gap: 28px; }
-  .cpub-hero-side { align-items: flex-start; }
-}
 @media (max-width: 768px) {
-  .cpub-hero-body { padding: 32px 0; }
-  .cpub-hero-inner { padding: 0 16px; }
-  .cpub-hero-banner { max-height: 200px; }
-  .cpub-hero-title { font-size: 24px; }
-  .cpub-hero-meta { gap: 10px; }
+  .cpub-hero-banner { max-height: 160px; }
+  .cpub-hero-bar-inner { padding: 16px; }
+  .cpub-hero-title { font-size: 21px; }
+  .cpub-hero-meta { gap: 12px; }
+  .cpub-countdown-chip { margin-left: 0; }
 }
 @media (max-width: 480px) {
-  .cpub-hero-title { font-size: 20px; }
-  .cpub-hero-tagline { font-size: 12px; margin-bottom: 16px; }
-  .cpub-hero-cta { flex-direction: column; align-items: stretch; }
-  .cpub-countdown-row { flex-wrap: wrap; justify-content: center; }
-  .cpub-countdown-block { min-width: 48px; padding: 8px 12px; }
-  .cpub-countdown-val { font-size: 20px; }
+  .cpub-hero-title { font-size: 19px; }
+  .cpub-hero-foot { align-items: stretch; }
+  .cpub-hero-cta { width: 100%; }
+  .cpub-hero-cta .cpub-btn { flex: 1; justify-content: center; }
 }
 </style>

package/components/contest/ContestJudgeManager.vue

@@ -30,12 +30,14 @@ function handleSearch(): void {
   searchTimeout = setTimeout(async () => {
     searching.value = true;
     try {
-      const data = await ($fetch as Function)('/api/admin/users', {
-        query: { search: searchQuery.value, limit: 8 },
-      }) as { items: Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }> };
+      // Contest-scoped, non-admin user search (public fields only). Avoids the
+      // admin-only /api/admin/users that 403'd for non-admin contest owners.
+      const data = await ($fetch as Function)(`/api/contests/${props.contestSlug}/user-search`, {
+        query: { q: searchQuery.value, limit: 8 },
+      }) as Array<{ id: string; username: string; displayName: string | null; avatarUrl: string | null }>;
       // Filter out users who are already judges
       const judgeIds = new Set((judges.value ?? []).map((j: ContestJudgeItem) => j.userId));
-      searchResults.value = data.items.filter((u: { id: string }) => !judgeIds.has(u.id));
+      searchResults.value = data.filter((u: { id: string }) => !judgeIds.has(u.id));
     } catch {
       searchResults.value = [];
     } finally {

package/components/contest/ContestJudgingCriteria.vue

@@ -7,9 +7,7 @@ const props = defineProps<{
   compact?: boolean;
 }>();
 
-const totalWeight = computed(() =>
-  props.criteria.reduce((sum, c) => sum + (c.weight ?? 0), 0),
-);
+const totalWeight = computed(() => props.criteria.reduce((sum, c) => sum + (c.weight ?? 0), 0));
 const hasWeights = computed(() => props.criteria.some((c) => (c.weight ?? 0) > 0));
 </script>
 
@@ -20,16 +18,9 @@ const hasWeights = computed(() => props.criteria.some((c) => (c.weight ?? 0) > 0
       <span v-if="hasWeights" class="cpub-sec-sub">{{ totalWeight }} pts total</span>
     </div>
     <div class="cpub-criteria-card">
-      <div v-for="(crit, i) in criteria" :key="i" class="cpub-criterion">
-        <div class="cpub-criterion-head">
-          <span class="cpub-criterion-label">{{ crit.label }}</span>
-          <span v-if="crit.weight != null && crit.weight > 0" class="cpub-criterion-weight">{{ crit.weight }} pts</span>
-        </div>
-        <p v-if="crit.description" class="cpub-criterion-desc">{{ crit.description }}</p>
-        <div v-if="hasWeights && crit.weight" class="cpub-criterion-bar">
-          <div class="cpub-criterion-bar-fill" :style="{ width: `${Math.min(100, (crit.weight / Math.max(totalWeight, 1)) * 100)}%` }"></div>
-        </div>
-      </div>
+      <!-- The one shared weighting visual: thin seamless bar + legend (with the
+           per-criterion descriptions). -->
+      <CpubCriteriaBar :items="criteria" />
     </div>
   </div>
 </template>
@@ -39,13 +30,6 @@ const hasWeights = computed(() => props.criteria.some((c) => (c.weight ?? 0) > 0
 .cpub-sec-head h2 { font-size: 15px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
 .cpub-sec-sub { font-size: 11px; color: var(--text-faint); margin-left: auto; font-family: var(--font-mono); }
 
-.cpub-criteria-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 14px; }
+.cpub-criteria-card { background: var(--surface); border: var(--border-width-default) solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 20px; box-shadow: var(--shadow-md); }
 .cpub-criteria-compact .cpub-criteria-card { box-shadow: none; border-style: dashed; margin-bottom: 0; }
-
-.cpub-criterion-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
-.cpub-criterion-label { font-size: 13px; font-weight: 600; color: var(--text); }
-.cpub-criterion-weight { font-size: 10px; font-family: var(--font-mono); font-weight: 700; color: var(--accent); white-space: nowrap; }
-.cpub-criterion-desc { font-size: 12px; color: var(--text-dim); line-height: 1.6; margin: 4px 0 0; }
-.cpub-criterion-bar { height: 4px; background: var(--surface2); border: var(--border-width-default) solid var(--border); margin-top: 8px; overflow: hidden; }
-.cpub-criterion-bar-fill { height: 100%; background: var(--accent); }
 </style>