/* layouts/focus.html — forms and applications: no navbar, no footer. Logo, close, progress,
   the form, and one fixed action at the bottom. Nothing to wander off to. */
body.layout-focus { background: var(--bg); }
.focus-head { position: sticky; top: 0; z-index: 1020; background: var(--bg); border-bottom: 1px solid var(--line); }
.focus-head .bar { height: 60px; display: flex; align-items: center; gap: 12px; max-width: 640px; margin: 0 auto; padding-inline: var(--space-4); }
.focus-head .bar .logo { margin-right: auto; }
.focus-head .step-count { color: var(--text-muted); font-weight: 600; font-size: 14px; }
.progress-line { height: 3px; background: var(--line); }
.progress-line i { display: block; height: 100%; background: var(--cmu-marigold); transition: width var(--dur-slow) var(--ease-standard); }
.focus-main { max-width: 640px; margin: 0 auto; padding: var(--space-6) var(--space-4) calc(120px + env(safe-area-inset-bottom)); }
.focus-main h1 { margin-bottom: 8px; }
.focus-main .intro { color: var(--text-muted); margin-bottom: var(--space-6); }
.focus-actions { position: fixed; z-index: 1020; left: 0; right: 0; bottom: 0; background: var(--surface); border-top: 1px solid var(--line);
  padding: 12px var(--space-4) calc(12px + env(safe-area-inset-bottom)); }
.focus-actions .inner { max-width: 640px; margin: 0 auto; display: flex; gap: 10px; align-items: center; justify-content: space-between; }
.focus-actions .btn-primary, .focus-actions .btn-accent { min-width: 160px; }
@media (max-width: 575.98px) { .focus-actions .btn-primary, .focus-actions .btn-accent { flex: 1; } }
.focus-main .toast-stack, body.layout-focus .toast-stack { bottom: calc(90px + env(safe-area-inset-bottom)); }