. Cheap, reversible, pages can drop the class to revert. */ body[class*="-viewport-locked"] { min-height: 100dvh; min-height: 100lvh; display: flex; flex-direction: column; } body[class*="-viewport-locked"] main { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; } /* --- 2. 5-column max table ---------------------------------------------- */ .rmc-five-col { width: 100%; /* The grammar: at most 5 columns. The 6th never renders inline; it goes to the context drawer. Each column gets equal weight with min-width so RTL + 40% text expansion can't blow it out. */ display: grid; grid-template-columns: repeat(var(--rmc-fc-cols, 5), minmax(0, 1fr)); /* Hard ceiling — anything wider than this overflows visibly so we catch it in QA rather than scrolling silently. */ max-width: 100%; overflow: hidden; border: 1px solid var(--hairline, transparent); border-radius: 8px; } .rmc-five-col__head, .rmc-five-col__row { display: contents; } .rmc-five-col__cell { padding: 8px 16px; min-width: 0; border-block-end: 1px solid var(--hairline, transparent); background: var(--surface-elevated, transparent); color: var(--text-primary, inherit); } .rmc-five-col__head .rmc-five-col__cell { font-weight: 600; background: var(--surface-canvas, transparent); } .rmc-five-col__row:hover .rmc-five-col__cell { background: var(--surface-popover, transparent); cursor: pointer; } /* --- 3. Text expansion shield (RTL + 40% growth safe) ------------------ */ .rmc-text-shield { display: inline-block; max-inline-size: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: middle; } .rmc-text-shield[data-rmc-full]:hover::after, .rmc-text-shield[data-rmc-full]:focus-visible::after { content: attr(data-rmc-full); position: absolute; inset-inline-start: 0; inset-block-end: -1.8em; background: var(--surface-popover, transparent); color: var(--text-primary, inherit); padding: 8px 16px; border: 1px solid var(--hairline, transparent); border-radius: 8px; z-index: 60; white-space: normal; max-inline-size: 32ch; font-size: 0.875em; } /* --- 4. Top-of-page Smart Action Hub ----------------------------------- */ .rmc-action-hub { display: flex; flex-wrap: wrap; gap: 8px; padding: 16px; border: 1px solid var(--hairline, transparent); border-radius: 8px; background: var(--surface-elevated, transparent); } .rmc-action-hub__chip { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 24px; border: 1px solid var(--hairline, transparent); background: var(--surface-canvas, transparent); color: var(--text-primary, inherit); text-decoration: none; font-weight: 500; font-size: 0.875em; transition: transform var(--motion-fast, 120ms) var(--ease-standard, ease); } .rmc-action-hub__chip:hover { transform: translateY(-1px); } .rmc-action-hub__chip[data-rmc-severity="danger"] { border-color: var(--danger, transparent); } .rmc-action-hub__chip[data-rmc-severity="warning"] { border-color: var(--warning, transparent); } .rmc-action-hub__chip[data-rmc-severity="success"] { border-color: var(--success, transparent); } .rmc-action-hub__count { display: inline-flex; align-items: center; justify-content: center; min-inline-size: 24px; min-block-size: 24px; padding-inline: 8px; border-radius: 16px; background: var(--surface-popover, transparent); color: var(--text-primary, inherit); font-weight: 600; font-size: 0.75em; } /* --- 5. Context drawer (slide from right) ------------------------------ */ .rmc-context-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100vw); block-size: 100dvh; background: var(--surface-elevated, transparent); color: var(--text-primary, inherit); border-inline-start: 1px solid var(--hairline, transparent); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.08); /* off-token-allow: decorative-elevation-drop */ transform: translateX(100%); transition: transform var(--motion-medium, 240ms) var(--ease-standard, ease); z-index: 70; display: flex; flex-direction: column; overflow: hidden; } [dir="rtl"] .rmc-context-drawer { transform: translateX(-100%); } .rmc-context-drawer[data-rmc-open="true"] { transform: translateX(0); } .rmc-context-drawer__header { display: flex; align-items: center; justify-content: space-between; padding: 16px; border-block-end: 1px solid var(--hairline, transparent); } .rmc-context-drawer__body { flex: 1 1 auto; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 16px; } .rmc-context-drawer__close { background: transparent; border: none; color: var(--text-primary, inherit); font-size: 1.25em; cursor: pointer; padding: 8px; line-height: 1; } .rmc-context-drawer__close:focus-visible { outline: 2px solid var(--focus-ring, currentColor); outline-offset: 2px; } /* --- 6. Empty-state card ---------------------------------------------- */ .rmc-empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; padding: 24px; border: 1px dashed var(--hairline, transparent); border-radius: 16px; background: var(--surface-canvas, transparent); color: var(--text-primary, inherit); } .rmc-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; inline-size: 48px; block-size: 48px; border-radius: 24px; background: var(--surface-elevated, transparent); font-size: 1.5em; } .rmc-empty-state__headline { margin: 0; font-size: 1.125em; font-weight: 600; } .rmc-empty-state__body { margin: 0; color: var(--text-secondary, inherit); max-inline-size: 48ch; } .rmc-empty-state__cta { display: inline-flex; align-items: center; gap: 8px; padding: 8px 24px; border-radius: 24px; background: var(--accent, transparent); color: var(--text-on-accent, inherit); border: 1px solid transparent; font-weight: 500; text-decoration: none; } .rmc-empty-state__helper { font-size: 0.875em; color: var(--text-secondary, inherit); }