/* Real mode only. Kept tiny on purpose: every screen uses the mock's own CSS unchanged. */
/* The server stores no category yet, so the "Shows in" row would be silently dropped: hidden until it is real. */
html[data-marla-mode="real"] .p-compose .p1-catrow { display: none !important; }
/* !important: the mock's CSS raises specificity with :not(#id) selectors. */
/* Controls without a real contract stay visible but read as off (tapping explains why). */
html[data-marla-mode="real"] .real-off { opacity: .45 !important; cursor: not-allowed; }
html[data-marla-mode="real"] .real-status:empty, html[data-marla-mode="real"] .real-status[hidden] { display: none; }
html[data-marla-mode="real"] .real-status .u-btn { margin-top: 8px; }
html[data-marla-mode="real"] [data-real-circle] { opacity: .62; }
html[data-marla-mode="real"] .real-you-circles { margin: 18px 0; }