Changes

=== Key instructions to be an AI ===

=== Key instructions to be an AI ===

Never use a table for labeled lists. If the content is a question + explanation, or a term + definition, use <dl><dt><dd> or flexbox rows — never a two-column table. Tables are only for genuinely tabular, multi-column comparative data.

*Never use a table for labeled lists. If the content is a question + explanation, or a term + definition, use <dl><dt><dd> or flexbox rows — never a two-column table. Tables are only for genuinely tabular, multi-column comparative data.

Every table must have a scroll wrapper: <div style="overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%;"> wrapping the <table>.

*Every table must have a scroll wrapper: <div style="overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%;"> wrapping the <table>.

Every table must have a min-width on the <table> element itself (e.g. min-width:520px) so the browser cannot crush columns — it scrolls instead.

*Every table must have a min-width on the <table> element itself (e.g. min-width:520px) so the browser cannot crush columns — it scrolls instead.

First column cells must have white-space:nowrap or a fixed min-width so key terms never break mid-word.

*First column cells must have white-space:nowrap or a fixed min-width so key terms never break mid-word.

No table-layout:fixed unless column widths are explicitly set — fixed layout without explicit widths causes the crushing.

*No table-layout:fixed unless column widths are explicitly set — fixed layout without explicit widths causes the crushing.

Test the mental model: ask "what happens if this container is 320px wide?" If the answer is "text breaks," it needs a scroll wrapper or a non-table layout.

*Test the mental model: ask "what happens if this container is 320px wide?" If the answer is "text breaks," it needs a scroll wrapper or a non-table layout.

== Changing face of workplace ==

== Changing face of workplace ==