/* Zen mode (js/zen_mode.js): html.zen hides the page's furniture. The change
   queue dock, drawers and dialogs stay. */
html.zen [data-app-header],
html.zen [data-shot-tabs],
html.zen [data-shot-side],
html.zen .app-footer,
html.zen footer:has(> .d1-foot),
html.zen .d1-theme-fab,
html.zen .d1-theme-fab-close { display: none !important; }

/* No sidebar column at all, not a folded one */
html.zen .shot-frame,
html.zen .shot-frame[data-folded] { grid-template-columns: minmax(0, 1fr) !important; --shot-side-w: 0px; }
/* Another tab covering the page starts at the top, with no strip above it */
html.zen .st-cover { top: 0 !important; }

/* The note in the middle of the screen; takes no clicks and moves nothing */
.zen-note {
    position: fixed; top: 50%; left: 50%; z-index: 2000;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 16px 26px; border-radius: 14px;
    background: rgba(20, 24, 33, .88); color: #fff; text-align: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, .25);
    transform: translate(-50%, -50%) scale(.96); opacity: 0; pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}
.zen-note.is-on { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.zen-note b { font-size: 18px; font-weight: 700; }
.zen-note span { font-size: 13.5px; opacity: .8; white-space: nowrap; }
html[data-theme="dark"] .zen-note { background: rgba(250, 251, 253, .94); color: #141821; }
@media (prefers-reduced-motion: reduce) { .zen-note { transition: none; transform: translate(-50%, -50%); } }

/* The footer's hint (layouts/app.html, layouts/tool.html) */
.zen-hint kbd {
    display: inline-block; padding: 0 5px; border: 1px solid var(--d1-line-2, var(--d1-line)); border-radius: 4px;
    background: transparent; color: inherit; font: 11px 'Fragment Mono', monospace; line-height: 1.25; box-shadow: none; vertical-align: 1px;
}
/* No Tab key on a phone or tablet */
@media (hover: none) and (pointer: coarse) { .zen-hint { display: none; } }