/* Shared typing-field focus, matching the Masterclass Remaster's coral edge. Inset outline preserves each control's dimensions and radius, including borderless editors. Important declarations override legacy page/ID rules. Buttons, links, checkboxes, radio buttons and upload controls keep their existing keyboard-focus indicators. */ :root { --field-focus-color: var(--coral-deep); --field-focus-halo: none; } /* Optional secondary fade: add data-field-focus-halo="true" to . It can also be enabled for a section by setting --field-focus-halo there. */ :root[data-field-focus-halo="true"] { --field-focus-halo: 0 0 0 4px rgba(250, 88, 83, .12); } :is( input:not([type="hidden"], [type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"], [type="button"], [type="submit"], [type="reset"], [type="image"]), textarea, select, [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"] ):focus, :is(.discussion-composer, .discussion-edit):has(textarea:focus) { /* Hide the old border color without changing its width or layout. */ border-color: transparent !important; outline: 1px solid var(--field-focus-color) !important; outline-offset: -1px !important; box-shadow: var(--field-focus-halo) !important; } /* Discussion textareas share the visible edge of their containing composer. */ .lesson-discussion :is(.discussion-composer, .discussion-edit) textarea:focus { outline: none !important; box-shadow: none !important; } @media (forced-colors: active) { :root { --field-focus-color: Highlight; } }