CSS foundations practice
Northbank Studio is reusing the same interface patterns in a production handoff screen. Apply the cascade, box model, readable text, and flex rules to fresh content. Some tasks ask for a local override; others ask you to fit a precise border box or keep a fixed action beside a flexible field. Start with the requested relationship and calculate the available width before editing. A correct result keeps unaffected siblings unchanged and leaves long text visible. The hidden fixture changes labels and spacing, so use the supplied token where the task asks for it. No new CSS feature is required in this set.
<section class="priority"><p class="status" data-text="title"></p></section><p class="status" data-text="subtitle"></p>
body{font:16px/1.5 system-ui,sans-serif;color:#17243b;background:#fff;margin:20px} button,input,select{font:inherit} button,a,input,select,summary{outline-offset:4px} img{max-width:100%} [hidden]{display:none!important}
.status{color:#b91c1c}.priority .status{color:#166534}
for (const el of document.querySelectorAll('[data-text]')) el.textContent = String(fixture[el.dataset.text] ?? '');
for (const el of document.querySelectorAll('[data-href]')) el.setAttribute('href', fixture[el.dataset.href]);
for (const el of document.querySelectorAll('[data-alt]')) el.setAttribute('alt', fixture[el.dataset.alt]);
for (const el of document.querySelectorAll('[data-value]')) el.value = String(fixture[el.dataset.value] ?? '');
for (const el of document.querySelectorAll('[data-items]')) for (const text of fixture.items) { const li = document.createElement('li'); li.textContent = text; el.append(li); }
document.documentElement.style.setProperty('--fixture-gap', fixture.gap + 'px');
Read the markup and styles together, then trace the resulting control or layout.