.p58h4-guard-form { display: grid; gap: 12px; margin-top: 18px; } /* The CCTV quick-control viewer has its own high stacking context. Guard dialogs are appended to , so keep them above the viewer instead of leaving a visually hidden but accessibility-visible form behind it. */ .p58h4-dialog-shell { z-index: 2147483000; isolation: isolate; } .p58h4-guard-form label { display: grid; gap: 6px; color: #b6c1d4; font-size: 13px; } .p58h4-guard-form select, .p58h4-guard-form textarea { width: 100%; box-sizing: border-box; padding: 10px; border: 1px solid rgba(255, 255, 255, .12); border-radius: 9px; background: #0b1220; color: inherit; } .p58h4-guard-form textarea { min-height: 92px; resize: vertical; } .p58h4-guard-form .p58h4-check { display: flex; align-items: center; gap: 8px; } .p58h4-form-actions { display: flex; justify-content: flex-end; gap: 8px; } .p58h4-form-actions button { padding: 9px 12px; border: 1px solid rgba(121, 217, 255, .35); border-radius: 9px; background: rgba(73, 111, 190, .2); color: inherit; } .p58h4-form-status { min-height: 18px; margin: 0; color: #79d9ff; font-size: 12px; } .p58h16-presence-panel { margin-top: 16px; } .p58h16-presence-policy { display: grid; gap: 4px; margin: 14px 0; padding: 11px 12px; border: 1px solid rgba(89, 229, 164, .25); border-radius: 11px; background: rgba(8, 40, 31, .35); } .p58h16-presence-policy span, .p58h16-presence-grid small, .p58h16-drafts small { color: #9ba8bd; font-size: 12px; } .p58h16-presence-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; } .p58h16-presence-grid article, .p58h16-drafts article { display: grid; gap: 5px; padding: 11px 12px; border: 1px solid rgba(255, 255, 255, .08); border-radius: 11px; background: rgba(0, 0, 0, .18); } .p58h16-drafts h4 { margin-bottom: 8px; } .p58h16-drafts article { grid-template-columns: minmax(0, 1fr) auto; align-items: center; } .p58h16-drafts button { padding: 7px 10px; border: 1px solid rgba(255, 123, 123, .3); border-radius: 8px; background: rgba(130, 35, 42, .25); color: inherit; } /* Keep the desktop Nexi rail control large enough for reliable pointer/touch use. */ button[data-nexi-collapse] { min-width: 44px; min-height: 44px; } @media (max-width: 560px) { .p58h16-presence-panel .p43-section-heading { align-items: stretch; flex-direction: column; } }