<template>
  <div class="public-page" :dir="lang === 'ar' ? 'rtl' : 'ltr'" :lang="lang">

    <!-- ── Top Bar ── -->
    <div class="public-topbar">
      <div class="public-topbar__inner">
        <div class="public-topbar__brand">
          <div class="public-topbar__logo">IP</div>
          <span class="public-topbar__name">InPractice</span>
        </div>
        <div class="public-topbar__right">
          <span class="public-topbar__count">
            <i class="ti ti-list-check"></i>
            {{ survey.questions.length }}
            {{ lang === 'ar' ? 'سؤال' : 'questions' }}
          </span>
          <!-- Language toggle -->
          <button @click="toggleLang" class="public-lang-btn">
            {{ lang === 'ar' ? 'EN' : 'عربي' }}
          </button>
        </div>
      </div>
      <!-- Progress fill -->
      <div class="public-topbar__progress">
        <div class="public-topbar__progress-fill" :style="`width: ${progressPct}%`"></div>
      </div>
    </div>

    <!-- ── Body ── -->
    <div class="public-body">

      <!-- Survey header card -->
      <div class="public-survey-header">
        <h1 class="public-survey-header__title">
          {{ lang === 'ar' && survey.title_ar ? survey.title_ar : survey.title_en }}
        </h1>
        <p
          v-if="survey.description_en || survey.description_ar"
          class="public-survey-header__desc"
        >
          {{ lang === 'ar' && survey.description_ar ? survey.description_ar : survey.description_en }}
        </p>
      </div>

      <!-- ── Respondent Info Card ── -->
      <div class="public-card">
        <p class="public-card__label">
          {{ lang === 'ar' ? 'معلومات عنك' : 'About You' }}
          <span class="public-card__label-note">
            ({{ lang === 'ar' ? 'اختياري' : 'all optional' }})
          </span>
        </p>

        <div class="public-demo-grid">
          <div class="public-field">
            <label class="public-field__label">
              {{ lang === 'ar' ? 'الاسم الكامل' : 'Full Name' }}
            </label>
            <input
              v-model="respondent.name"
              type="text"
              :placeholder="lang === 'ar' ? 'اسمك' : 'Your name'"
              class="public-input"
            />
          </div>

          <div class="public-field">
            <label class="public-field__label">
              {{ lang === 'ar' ? 'المسمى الوظيفي' : 'Job Title' }}
            </label>
            <input
              v-model="respondent.title"
              type="text"
              :placeholder="lang === 'ar' ? 'مثال: مدير مالي' : 'e.g. CFO'"
              class="public-input"
            />
          </div>

          <div class="public-field">
            <label class="public-field__label">
              {{ lang === 'ar' ? 'الشركة' : 'Company' }}
            </label>
            <input
              v-model="respondent.company"
              type="text"
              :placeholder="lang === 'ar' ? 'اسم الشركة' : 'Company name'"
              class="public-input"
            />
          </div>

          <div class="public-field">
            <label class="public-field__label">
              {{ lang === 'ar' ? 'العمر' : 'Age' }}
            </label>
            <input
              v-model="respondent.age"
              type="number"
              :placeholder="lang === 'ar' ? 'عمرك' : 'Your age'"
              min="15"
              max="90"
              class="public-input"
            />
          </div>

          <div class="public-field public-field--full">
            <label class="public-field__label">
              {{ lang === 'ar' ? 'الجنس' : 'Gender' }}
            </label>
            <div class="public-gender-btns">
              <button
                v-for="g in genderOptions"
                :key="g.value"
                @click="respondent.gender = respondent.gender === g.value ? null : g.value"
                :class="{ 'public-gender-btn--selected': respondent.gender === g.value }"
                class="public-gender-btn"
              >
                {{ lang === 'ar' ? g.labelAr : g.label }}
              </button>
            </div>
          </div>
        </div>
      </div>

      <!-- ── Questions ── -->
      <div class="public-questions">
        <div
          v-for="(q, qi) in survey.questions"
          :key="q.id"
          class="public-q-card"
          :class="{ 'public-q-card--error': errors[q.id] }"
        >
          <!-- Question label -->
          <div class="public-q-label">
            <span class="public-q-num">{{ qi + 1 }}</span>
            <span class="public-q-text">
              {{ lang === 'ar' && q.question_ar ? q.question_ar : q.question_en }}
              <span v-if="q.is_required" class="public-q-required">*</span>
            </span>
          </div>

          <p v-if="errors[q.id]" class="public-q-error">
            {{ lang === 'ar' ? 'هذا السؤال إلزامي.' : 'This question is required.' }}
          </p>

          <!-- ─── Multiple choice ─── -->
          <div v-if="q.type === 'multiple_choice'" class="public-options">
            <div
              v-for="(opt, oi) in options(q)"
              :key="oi"
              @click="answers[q.id] = oi"
              :class="{ 'public-option--selected': answers[q.id] === oi }"
              class="public-option"
            >
              <div class="public-option__radio" :class="{ 'public-option__radio--on': answers[q.id] === oi }">
                <div v-if="answers[q.id] === oi" class="public-option__radio-inner"></div>
              </div>
              <span>{{ opt }}</span>
            </div>
          </div>

          <!-- ─── Multi-select ─── -->
          <div v-else-if="q.type === 'multi_select'" class="public-options">
            <div
              v-for="(opt, oi) in options(q)"
              :key="oi"
              @click="toggleMulti(q.id, oi)"
              :class="{ 'public-option--selected': isMultiSelected(q.id, oi) }"
              class="public-option public-option--multi"
            >
              <div class="public-option__check" :class="{ 'public-option__check--on': isMultiSelected(q.id, oi) }">
                <i v-if="isMultiSelected(q.id, oi)" class="ti ti-check" style="font-size:10px;"></i>
              </div>
              <span>{{ opt }}</span>
            </div>
          </div>

          <!-- ─── Yes / No ─── -->
          <div v-else-if="q.type === 'yes_no'" class="public-yes-no">
            <button
              @click="answers[q.id] = 'yes'"
              :class="{ 'public-yes-no__yes--on': answers[q.id] === 'yes' }"
              class="public-yes-no__yes"
            >
              ✓ {{ lang === 'ar' ? 'نعم' : 'Yes' }}
            </button>
            <button
              @click="answers[q.id] = 'no'"
              :class="{ 'public-yes-no__no--on': answers[q.id] === 'no' }"
              class="public-yes-no__no"
            >
              ✕ {{ lang === 'ar' ? 'لا' : 'No' }}
            </button>
          </div>

          <!-- ─── Rating ─── -->
          <div v-else-if="q.type === 'rating'">
            <div class="public-rating">
              <button
                v-for="n in ratingRange(q)"
                :key="n"
                @click="answers[q.id] = n"
                :class="{ 'public-rating__dot--on': answers[q.id] === n }"
                class="public-rating__dot"
              >{{ n }}</button>
            </div>
            <div class="public-rating__labels">
              <span>{{ lang === 'ar' ? 'منخفض' : 'Low' }}</span>
              <span>{{ lang === 'ar' ? 'مرتفع' : 'High' }}</span>
            </div>
          </div>

          <!-- ─── Text ─── -->
          <div v-else-if="q.type === 'text'">
            <textarea
              v-model="answers[q.id]"
              rows="4"
              :placeholder="lang === 'ar' ? 'اكتب إجابتك هنا...' : 'Type your answer here...'"
              :dir="lang === 'ar' ? 'rtl' : 'ltr'"
              class="public-textarea"
            ></textarea>
          </div>

        </div>
      </div>

      <!-- ── Submit ── -->
      <div class="public-submit-area">
        <p v-if="hasErrors" class="public-submit-error">
          {{ lang === 'ar'
            ? 'يرجى الإجابة على جميع الأسئلة الإلزامية.'
            : 'Please answer all required questions before submitting.' }}
        </p>

        <button
          @click="submitSurvey"
          :disabled="submitting"
          class="public-submit-btn"
        >
          <span v-if="submitting">
            {{ lang === 'ar' ? 'جارٍ الإرسال…' : 'Submitting…' }}
          </span>
          <span v-else>
            {{ lang === 'ar' ? 'إرسال الإجابات →' : 'Submit Response →' }}
          </span>
        </button>

        <p class="public-submit-note">
          {{ lang === 'ar'
            ? 'إجابتك ستُسجَّل بشكل مجهول ما لم تذكر اسمك أعلاه.'
            : 'Your response will be recorded anonymously unless you provided your name above.' }}
        </p>
      </div>

      <!-- Footer -->
      <div class="public-footer">
        <span class="public-footer__brand">
          Powered by <strong>InPractice</strong>
        </span>
        <span class="public-footer__tagline">
          {{ lang === 'ar' ? 'منصة المهنيين في مصر والخليج' : 'The Professional Club for Egypt & GCC' }}
        </span>
      </div>

    </div><!-- /public-body -->
  </div>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { router } from '@inertiajs/vue3'

const props = defineProps({
  token:  { type: String, required: true },
  survey: { type: Object, required: true },
})

// ── Language — standalone page, no auth store ──────────────────
// Defaults to survey's own language setting, toggleable
const lang = ref(props.survey.language ?? 'en')
const toggleLang = () => { lang.value = lang.value === 'en' ? 'ar' : 'en' }

// ── State ─────────────────────────────────────────────────────
const respondent = reactive({ name: '', title: '', company: '', age: '', gender: null })
const answers    = reactive({})
const errors     = reactive({})
const submitting = ref(false)
const hasErrors  = ref(false)

// ── Gender options ─────────────────────────────────────────────
const genderOptions = [
  { value: 'male',              label: 'Male',              labelAr: 'ذكر' },
  { value: 'female',            label: 'Female',            labelAr: 'أنثى' },
  { value: 'prefer_not_to_say', label: 'Prefer not to say', labelAr: 'لا أفضل الإفصاح' },
]

// ── Progress ──────────────────────────────────────────────────
const progressPct = computed(() => {
  const total = props.survey.questions.length
  if (!total) return 0
  const answered = props.survey.questions.filter(q => {
    const a = answers[q.id]
    if (Array.isArray(a)) return a.length > 0
    return a !== undefined && a !== '' && a !== null
  }).length
  return Math.round((answered / total) * 100)
})

// ── Option resolver ────────────────────────────────────────────
const options = (q) => {
  return lang.value === 'ar' && q.options_ar?.length ? q.options_ar : q.options_en ?? []
}

// ── Rating range ───────────────────────────────────────────────
const ratingRange = (q) => {
  const min = q.rating_min ?? 1
  const max = q.rating_max ?? 5
  return Array.from({ length: max - min + 1 }, (_, i) => min + i)
}

// ── Multi-select helpers ───────────────────────────────────────
const toggleMulti = (qId, oi) => {
  if (!answers[qId]) answers[qId] = []
  const idx = answers[qId].indexOf(oi)
  if (idx === -1) answers[qId].push(oi)
  else answers[qId].splice(idx, 1)
}

const isMultiSelected = (qId, oi) => {
  return Array.isArray(answers[qId]) && answers[qId].includes(oi)
}

// ── Submit ─────────────────────────────────────────────────────
const submitSurvey = () => {
  let valid = true
  hasErrors.value = false

  props.survey.questions.forEach(q => {
    errors[q.id] = false
    if (!q.is_required) return
    const a   = answers[q.id]
    const empty = a === undefined || a === null || a === '' || (Array.isArray(a) && a.length === 0)
    if (empty) { errors[q.id] = true; valid = false }
  })

  if (!valid) {
    hasErrors.value = true
    window.scrollTo({ top: 0, behavior: 'smooth' })
    return
  }

  submitting.value = true

  router.post(`/s/${props.token}`, {
    answers,
    respondent_name:    respondent.name    || null,
    respondent_title:   respondent.title   || null,
    respondent_company: respondent.company || null,
    respondent_gender:  respondent.gender  || null,
    respondent_age:     respondent.age     || null,
  }, {
    onFinish: () => { submitting.value = false },
  })
}
</script>

<style scoped>
/* ══════════════════════════════════════════════════════════════
   Public Survey Page — standalone, no AppLayout
   Uses its own CSS variables mirroring InPractice navy theme
   so the page looks branded even without auth.
   ══════════════════════════════════════════════════════════════ */

:root {
  --pub-bg:        #F4F6F9;
  --pub-surface:   #FFFFFF;
  --pub-surface-alt: #EEF1F6;
  --pub-primary:   #1D9E75;
  --pub-primary-soft: #E1F5EE;
  --pub-navy:      #0F2044;
  --pub-text:      #0F2044;
  --pub-text-sec:  #4A5568;
  --pub-text-muted:#8A96A8;
  --pub-border:    #DDE2EB;
  --pub-border-in: #C8D0DC;
  --pub-success:   #1D9E75;
  --pub-success-soft: #E1F5EE;
  --pub-danger:    #D85A30;
  --pub-danger-soft: #FAECE7;
  --pub-warning:   #E8A020;
  --pub-warning-soft: #FEF3DC;
  --pub-radius-sm: 6px;
  --pub-radius-md: 10px;
  --pub-radius-lg: 14px;
  --pub-radius-xl: 18px;
  --pub-radius-pill: 999px;
  --pub-shadow:    0 1px 8px rgba(15,32,68,0.08);
  --pub-shadow-btn:0 4px 14px rgba(29,158,117,0.30);
}

.public-page {
  min-height: 100vh;
  background: var(--pub-bg);
  font-family: 'Inter', sans-serif;
  color: var(--pub-text);
  font-size: 14px;
  line-height: 1.6;
}

.public-page[lang="ar"] {
  font-family: 'Cairo', 'Inter', sans-serif;
}

/* ── Top bar ── */
.public-topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--pub-navy);
  box-shadow: 0 2px 12px rgba(15,32,68,0.2);
}

.public-topbar__inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.public-topbar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.public-topbar__logo {
  width: 32px;
  height: 32px;
  background: var(--pub-primary);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.02em;
}

.public-topbar__name {
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.public-topbar__right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.public-topbar__count {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: rgba(255,255,255,0.55);
}

.public-topbar__count i { font-size: 13px; color: var(--pub-primary); }

.public-lang-btn {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: var(--pub-radius-pill);
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: background 0.15s;
}
.public-lang-btn:hover { background: rgba(255,255,255,0.15); }

.public-topbar__progress {
  height: 3px;
  background: rgba(255,255,255,0.1);
}

.public-topbar__progress-fill {
  height: 100%;
  background: var(--pub-primary);
  transition: width 0.4s ease;
}

/* ── Body ── */
.public-body {
  max-width: 680px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}

/* ── Survey header ── */
.public-survey-header {
  margin-bottom: 24px;
}

.public-survey-header__title {
  font-size: 22px;
  font-weight: 700;
  color: var(--pub-text);
  line-height: 1.3;
  margin-bottom: 12px;
}

.public-survey-header__desc {
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-left: 3px solid var(--pub-primary);
  border-radius: var(--pub-radius-md);
  padding: 16px;
  font-size: 13px;
  color: var(--pub-text-sec);
  line-height: 1.7;
}

/* ── Card ── */
.public-card {
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: var(--pub-shadow);
}

.public-card__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--pub-primary);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 16px;
}

.public-card__label-note {
  font-size: 11px;
  color: var(--pub-text-muted);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  margin-left: 6px;
}

/* ── Demographics grid ── */
.public-demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.public-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.public-field--full {
  grid-column: 1 / -1;
}

.public-field__label {
  font-size: 12px;
  font-weight: 500;
  color: var(--pub-text-sec);
}

.public-input {
  background: var(--pub-surface-alt);
  border: 1px solid var(--pub-border-in);
  border-radius: var(--pub-radius-md);
  padding: 10px 14px;
  font-size: 13px;
  color: var(--pub-text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
  width: 100%;
}

.public-input:focus { border-color: var(--pub-primary); }

/* ── Gender buttons ── */
.public-gender-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.public-gender-btn {
  font-size: 12px;
  font-weight: 500;
  padding: 7px 16px;
  border-radius: var(--pub-radius-md);
  border: 1px solid var(--pub-border-in);
  background: var(--pub-surface-alt);
  color: var(--pub-text-sec);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}

.public-gender-btn:hover { border-color: var(--pub-primary); color: var(--pub-primary); }

.public-gender-btn--selected {
  background: var(--pub-primary-soft);
  border-color: var(--pub-primary);
  color: var(--pub-primary);
  font-weight: 600;
}

/* ── Questions ── */
.public-questions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 24px;
}

.public-q-card {
  background: var(--pub-surface);
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-lg);
  padding: 20px;
  box-shadow: var(--pub-shadow);
  transition: border-color 0.15s;
}

.public-q-card--error { border-color: var(--pub-danger); }

.public-q-label {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}

.public-q-num {
  font-size: 11px;
  font-family: monospace;
  color: var(--pub-text-muted);
  background: var(--pub-surface-alt);
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

.public-q-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--pub-text);
  line-height: 1.5;
  flex: 1;
}

.public-q-required { color: var(--pub-danger); margin-left: 3px; }

.public-q-error {
  font-size: 12px;
  color: var(--pub-danger);
  margin-bottom: 12px;
  margin-top: -8px;
}

/* ── Options ── */
.public-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.public-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--pub-border);
  border-radius: var(--pub-radius-md);
  cursor: pointer;
  font-size: 13px;
  color: var(--pub-text-sec);
  background: var(--pub-surface-alt);
  transition: all 0.15s;
}

.public-option:hover { border-color: var(--pub-primary); color: var(--pub-text); }

.public-option--selected {
  border-color: var(--pub-primary);
  background: var(--pub-primary-soft);
  color: var(--pub-text);
}

.public-option__radio {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--pub-border-in);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.15s;
}

.public-option__radio--on { border-color: var(--pub-primary); }

.public-option__radio-inner {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--pub-primary);
}

.public-option__check {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 2px solid var(--pub-border-in);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.public-option__check--on {
  border-color: var(--pub-primary);
  background: var(--pub-primary);
  color: #fff;
}

/* ── Yes / No ── */
.public-yes-no {
  display: flex;
  gap: 12px;
}

.public-yes-no__yes,
.public-yes-no__no {
  flex: 1;
  padding: 12px;
  border-radius: var(--pub-radius-md);
  border: 1px solid var(--pub-border);
  background: var(--pub-surface-alt);
  font-size: 13px;
  font-weight: 500;
  color: var(--pub-text-sec);
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
  text-align: center;
}

.public-yes-no__yes:hover    { border-color: var(--pub-success); color: var(--pub-success); }
.public-yes-no__yes--on      { background: var(--pub-success-soft); border-color: var(--pub-success); color: var(--pub-success); font-weight: 600; }
.public-yes-no__no:hover     { border-color: var(--pub-danger); color: var(--pub-danger); }
.public-yes-no__no--on       { background: var(--pub-danger-soft);  border-color: var(--pub-danger);  color: var(--pub-danger);  font-weight: 600; }

/* ── Rating ── */
.public-rating {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 8px;
}

.public-rating__dot {
  width: 44px;
  height: 44px;
  border-radius: var(--pub-radius-md);
  border: 1px solid var(--pub-border-in);
  background: var(--pub-surface-alt);
  color: var(--pub-text-sec);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
}

.public-rating__dot:hover {
  border-color: var(--pub-warning);
  color: var(--pub-warning);
}

.public-rating__dot--on {
  background: var(--pub-warning);
  border-color: var(--pub-warning);
  color: #fff;
  font-weight: 700;
}

.public-rating__labels {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--pub-text-muted);
}

/* ── Textarea ── */
.public-textarea {
  width: 100%;
  background: var(--pub-surface-alt);
  border: 1px solid var(--pub-border-in);
  border-radius: var(--pub-radius-md);
  padding: 12px 14px;
  font-size: 13px;
  color: var(--pub-text);
  font-family: inherit;
  line-height: 1.6;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.public-textarea:focus { border-color: var(--pub-primary); }

/* ── Submit area ── */
.public-submit-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 40px;
}

.public-submit-error {
  font-size: 13px;
  color: var(--pub-danger);
  font-weight: 500;
  text-align: center;
}

.public-submit-btn {
  width: 100%;
  padding: 16px;
  background: var(--pub-primary);
  color: #fff;
  border: none;
  border-radius: var(--pub-radius-lg);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, box-shadow 0.15s;
  box-shadow: var(--pub-shadow-btn);
  font-family: inherit;
}

.public-submit-btn:hover:not(:disabled) {
  opacity: 0.92;
  box-shadow: 0 6px 20px rgba(29,158,117,0.4);
}

.public-submit-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.public-submit-note {
  font-size: 11px;
  color: var(--pub-text-muted);
  text-align: center;
  max-width: 400px;
  line-height: 1.6;
}

/* ── Footer ── */
.public-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-top: 20px;
  border-top: 1px solid var(--pub-border);
}

.public-footer__brand {
  font-size: 12px;
  color: var(--pub-text-muted);
}

.public-footer__brand strong {
  color: var(--pub-primary);
}

.public-footer__tagline {
  font-size: 11px;
  color: var(--pub-text-muted);
}

/* ── Mobile ── */
@media (max-width: 480px) {
  .public-demo-grid {
    grid-template-columns: 1fr;
  }
  .public-field--full {
    grid-column: 1;
  }
}
</style>
