<section class="view lock-view" data-view="lock">
  <header class="shell-topbar">
    <div class="shell-topbar-content">
      <p class="shell-brand">Nebula OS</p>
      <div class="shell-status">
        <span class="shell-avatar" aria-hidden="true"></span>
        <p class="shell-time" data-clock>--:--</p>
      </div>
    </div>
    <div class="shell-accent-line"></div>
  </header>

  <section class="lock-stage">
    <p class="lock-time" data-clock>--:--</p>
    <p class="lock-date muted" data-date>-- --- ----</p>
    <p class="muted lock-prompt">Press any key to unlock</p>
  </section>

  <section class="panel lock-panel" data-lock-panel>
    <p class="muted">Enter Security PIN</p>
    <div class="pin-dots" data-pin-dots></div>
    <div class="keypad" data-focus-root>
      <button class="focusable keypad-key" data-focusable="true" data-row="0" data-col="0" data-key="1">1</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="0" data-col="1" data-key="2">2</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="0" data-col="2" data-key="3">3</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="1" data-col="0" data-key="4">4</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="1" data-col="1" data-key="5">5</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="1" data-col="2" data-key="6">6</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="2" data-col="0" data-key="7">7</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="2" data-col="1" data-key="8">8</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="2" data-col="2" data-key="9">9</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="3" data-col="0" data-key="delete">⌫</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="3" data-col="1" data-key="0">0</button>
      <button class="focusable keypad-key" data-focusable="true" data-row="3" data-col="2" data-key="ok">OK</button>
    </div>
    <p class="muted lock-help">Default v0 PIN: 1234</p>
    <p class="lock-error" data-error></p>
  </section>
</section>
