@php
    $h = 'font-display text-base font-semibold text-ink';
    $p = 'text-sm leading-relaxed text-ink-2';
    $li = 'text-sm leading-relaxed text-ink-2';
    $code = 'rounded bg-inset px-1.5 py-0.5 font-mono text-[12px] text-accent-text';
@endphp

<div class="space-y-3">
    <h3 class="{{ $h }}">Updates</h3>
    <p class="{{ $p }}">Under <span class="text-ink">Version &amp; Releases</span> the panel checks on open whether a newer release is available in the channel (compared against the newest tagged release). When one is available, the <span class="text-ink">"Update now"</span> button appears.</p>
    <ul class="ml-4 list-disc space-y-1.5">
        <li class="{{ $li }}"><span class="text-ink">From the button:</span> trigger "Update now". The panel is briefly unreachable for a minute or two during the rebuild; afterwards the card flips to "Current" on its own.</li>
        <li class="{{ $li }}"><span class="text-ink">Over SSH:</span> on the host run <code class="{{ $code }}">sudo clusev update</code> (from anywhere). More under "Commands / CLI".</li>
    </ul>
    <p class="{{ $p }}">An update rebuilds the image (including <code class="{{ $code }}">npm run build</code> for CSS/JS) and applies <span class="text-ink">database migrations</span>. So style changes and schema updates take effect automatically. Secrets and the configured domain are preserved.</p>
</div>