/* Editor controls only. These tokens never change the website being edited. */
.responsive-context { background: var(--wc-accent-soft); border-left: 3px solid var(--wc-accent); }
.responsive-context strong { display: flex; justify-content: space-between; gap: 8px; color: var(--wc-text-primary); font-size: 12px; }
.responsive-context strong span { color: var(--wc-text-secondary); font-size: 10px; white-space: nowrap; }
.responsive-context p, .responsive-context small { display: block; color: var(--wc-text-secondary); font-size: 11px; line-height: 1.8; margin: 8px 0 0; }
.responsive-property { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 5px; min-height: 18px; margin-top: 5px; color: var(--wc-text-secondary); font-size: 10px; line-height: 1.6; }
.responsive-property[data-mode="manual"] > span { color: var(--wc-accent); font-weight: 700; }
.responsive-property button { color: var(--wc-accent); background: var(--wc-bg-input); border: 1px solid var(--wc-border); border-radius: 5px; padding: 2px 5px; font: inherit; cursor: pointer; }
.responsive-property button:hover { border-color: var(--wc-accent); }
.responsive-property button:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 2px; }
.layer-hidden-label { font-size: 9px; padding: 2px 4px; border: 1px dashed var(--wc-border); border-radius: 3px; color: var(--wc-text-secondary); }
.responsive-property + .responsive-property { margin-top: 2px; }
.layout-settings > summary { cursor: pointer; color: var(--wc-text-primary); font-size: 11px; font-weight: 600; padding: 8px 0; }
.layout-settings[open] > summary { margin-bottom: 12px; }
.layout-settings > summary:focus-visible { outline: 2px solid var(--wc-accent); outline-offset: 2px; border-radius: 3px; }
/* Use the browser's ordinary flex sizing inside authored layouts, as exports do. */
.canvas-group > .canvas-element, .canvas-region > .canvas-element, .component-reference > .canvas-element { flex-shrink: 1; }
.is-plan-locked { position: relative; }
.plan-lock-marker { position: absolute; right: -3px; top: -6px; border: 1px solid var(--wc-border); border-radius: 4px; background: var(--wc-bg-panel); color: var(--wc-text-secondary); padding: 1px 3px; font-size: 7px; font-weight: 700; line-height: 1.3; pointer-events: none; }
.plan-lock-marker[hidden] { display: none; }
.plan-usage { color: var(--wc-text-primary); font-size: 12px; line-height: 1.8; margin: 9px 0 3px; }
.plan-limit-note { color: var(--wc-text-secondary); font-size: 11px; line-height: 1.8; margin: 0 0 8px; }
.account-guest-actions { padding: 14px; margin: 12px 0; border: 1px solid var(--wc-border); border-radius: 10px; background: var(--wc-accent-soft); }
.account-guest-actions p { font-size: 12px; line-height: 1.8; margin: 0 0 10px; color: var(--wc-text-secondary); }
.account-guest-actions .component-actions { flex-wrap: wrap; }