/* An out cell's own field is always disabled (it's derived, never a direct input) as
   well as invalid when one of its conditions fails — but sp-textfield's `:host([disabled])
   #textfield .input` rule carries an ID selector, giving it higher specificity than the
   plain `:host([invalid]) .input` rule that would otherwise color the border red, so the
   disabled gray border silently wins and the invalid state becomes invisible. Overriding
   `--spectrum-textfield-border-color-disabled` (the custom property that losing rule reads,
   confirmed against sp-textfield's shadow-DOM stylesheet) fixes this without touching the
   plain-disabled (not invalid) case, since the selector below only matches when both
   attributes are present. `!important` is required: the component's own shadow
   stylesheet sets this property unconditionally on `:host`, which otherwise wins the
   cascade over this external rule regardless of selector specificity or source order. */
sp-textfield[invalid][disabled] {
    --spectrum-textfield-border-color-disabled: var(--spectrum-textfield-border-color-invalid-default) !important;
}

/* `<sp-sidenav>`'s own shadow stylesheet sets `:host { width: 240px; }` unconditionally
   (confirmed via the verifying-begin-ui skill: `getComputedStyle` on a live `sp-sidenav`
   reported `width: 240px` sourced from an adopted `:host` rule), regardless of its
   container's actual width. ExamplesPicker's sidebar column is 260px wide with 12px of
   padding on each side, a 236px content box — narrower than the sidenav's fixed 240px -
   so the sidenav overflows it by a few pixels and a horizontal scrollbar appears even
   when no item's label text is anywhere near wide enough to overflow on its own.
   `!important` is required for the same reason as the sp-textfield rules above: the
   shadow stylesheet's `:host` rule otherwise wins the cascade over this external rule
   regardless of selector specificity or source order. */
sp-sidenav {
    width: 100% !important;
    box-sizing: border-box !important;
}